How to add a Feedback Widget to your website
Tags: webdev, tutorial, react, product
Published: 2024-05-15 12:35:24

Integrating on-page surveys into your website can be a game-changer for gathering user feedback and improving your services. Here’s a straightforward guide to setting up and launching your [Qualli](https://usequalli.com?utm_source=dev.to&utm_campaign=web_widget) surveys efficiently.


### Step 1: Register Your Qualli Account
If you haven't already, start by creating your [Qualli](https://usequalli.com?utm_source=dev.to&utm_campaign=web_widget) account. It’s free to get started, and you can register quickly to begin harnessing the power of direct user feedback. [Check out our pricing here](https://usequalli.com/pricing?utm_source=dev.to&utm_campaign=web_widget)

[Learn more about Qualli here](https://usequalli.com/)


### Step 2: Create Your Survey
![Creating your survey in Qualli](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6euu9or0d9jpbg9yrxs.gif)
Navigate to our Survey Builder to craft your Feedback Survey.

This tool is designed to be intuitive, helping you create effective surveys in no time.


### Step 3: Website HTML Code
Let's tweak your website's HTML and CSS. Insert the following snippets to integrate the survey seamlessly:

Head Section: Add the provided script at the end of your Head section.
```html
<style>
#feedback-button {
    position: fixed;
    top: 50%;
    right: -25px;
    width: 100px;
    height: 40px;
    background-color: #007bff; /* Assuming #007bff as the primary color */
    color: white;
    z-index: 99;
    transform: rotate(90deg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px; /* Assuming a default border-radius */
    cursor: pointer;
    transition: transform 0.3s ease;
}

#feedback-button:hover {
    transform: rotate(90deg) scale(1.1);
}

#feedback-button p {
    margin: 0;
    font-size: 0.875rem; /* Equivalent to text-sm */
    font-weight: bold;
    pointer-events: none;
}
</style>
```

Body Section: Place the initial script at the beginning of your Body section.
```html 
<div id="feedback-button">
   <p>Feedback</p>
</div>
```

Customisation Tip: You can modify the code as needed, but remember to keep the ID (“feedback-button”) intact for functionality.

Once added, refresh your page, and you should see the Feedback button on the right side.


### Step 4: Linking the Button to Your Survey
#### Creating Your Trigger
![Creating a trigger in Qualli](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vg6kkttkcxhs5os03ca7.gif)
A trigger is an action taken by your user, such as clicking the Feedback Button. Here’s how to set it up:
- Go to “Triggers” in the sidebar and select “Create new Trigger.”
- Enter a clear Internal name and description, like “User Clicked Feedback Button.”
- Enable “CSS selector” and input “#feedback-button” to recognize clicks on the specified HTML element.

#### Activating Your Survey Trigger
![Activating your trigger in Qualli](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77k4bssja17649127q1o.gif)

After saving your trigger:

- Return to your survey and open “settings.”
- In the “Triggers” section, enable “Show based on Trigger.”
- Activate the trigger you created and update the settings to save changes.


### Step 5: Publish Your Survey and We’re Done 🥳
Finally, publish your survey and refresh your webpage to test the new setup. Enjoy collecting valuable user feedback directly from your site!

### Why Use Qualli?
When you're looking for a easy-to-implement, time-saving 3rd party library: [Qualli](https://usequalli.com?utm_source=dev.to&utm_campaign=web_widget) could be a good fit for you.

Qualli is capable for in-app surveys, straight into your user experience

**Benefits:**
- 🖥️📱 Works on web and Mobile (created by and for RN developers)
- 🎨 Typeform like survey builder
- ⏳Little to none dev-time required after implementation
- 😌 Non-tech user friendly: Hand it off to your marketing or UX team
- 📈 Send your data to Zapier


### FAQ
**Why does the survey only show once?**
To keep showing the survey under certain conditions, go to your survey's settings, find “Limits,” and enable “Keep showing when conditions are met.”