How to add a Feedback Widget to your website

#webdev #tutorial #react #product

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 surveys efficiently.

Step 1: Register Your Qualli Account

If you haven't already, start by creating your Qualli 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

Learn more about Qualli here

Step 2: Create Your Survey

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.

<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.

<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

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

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 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.”