Feedback

Allow users to rate their experience using emotive icons

npm run add Feedback

Use the Feedback component to display a list of emotive icons (sad, neutral, and happy) to provide your users a way to quickly rate their experience. This provides lightweight, frictionless feedback collection.

<Feedback />

By default the Feedback component doesn’t expect any props. However, you can optionally customize both the textarea and button using the textarea and button props. The button is disabled by default unless an input is provided. You can change the minimum required number of characters inside the component itself.

Custom Textarea and Button

To customize the component, you can set the following two props:

• textarea: Pass a TextareaProps to customize the input.
• button: Pass a ButtonProps along with a text property and optionally an icon property to customize the CTA button.

<Feedback
    title="Custom textarea and button"
    textarea={{ placeholder: 'Help us grow in the right direction.' }}
    button={{ theme: 'info', text: 'Send' }}
/>

The Feedback component also extends the Card component, meaning you can use card-specific props such as secondary or compact. In the above example, title is specific to Card.

Feedback in Modal

You can also combine the component with the Modal component to collect feedbacks inside a modal.

---
import { Button, Modal } from 'webcoreui/astro'
---

<Button id="feedback-btn">Give Feedback</Button>

<Modal id="feedback-modal" transparent={true}>
    <Feedback
        title="Send us your feedback!"
        secondary={true}
    />
</Modal>

<script>
    import { modal } from 'webcoreui'

    modal({
        trigger: '#feedback-btn',
        modal: '#feedback-modal'
    })
</script>

When using the component inside a Modal component, make sure to set the modal to transparent using the transparent prop. You can do the same with Popover or Sheet components, depending on your needs.

Events

Inside the component, you’ll find a placeholder console.log where you have access to the form data. Here you can replace this with your own fetch call to send the data to your backend and do additional changes to your application.

API

type FeedbackProps = {
    textarea?: TextareaProps
    button?: {
        text: string
        icon?: string
    } & ButtonProps
} & CardProps