Quackback

Website integration for Quackback surveys

Learn how to integrate Quackback surveys into your website for seamless feedback collection.

Website Integration for Quackback Surveys

Integrating Quackback surveys into your website allows you to collect valuable feedback directly from your visitors. This guide will walk you through the process of embedding surveys on your website.

Integration Methods

Quackback offers two primary methods for website integration:

  1. JavaScript Embed
  2. iFrame Embed

JavaScript Embed

The JavaScript embed method is the most flexible and recommended approach for most websites.

Steps to Implement:

  1. In your Quackback dashboard, go to the survey you want to embed.
  2. Click on "Distribute" and select "Website Integration".
  3. Copy the provided JavaScript code snippet.
  4. Paste the code snippet into your website's HTML, just before the closing </body> tag.
<script>
  (function(q,u,a,c,k){
    var s = document.createElement('script');
    s.async = true;
    s.src = 'https://cdn.quackback.com/embed.js';
    s.onload = function() { quackback.init({id: 'YOUR_SURVEY_ID'}); };
    document.body.appendChild(s);
  })();
</script>

Placement

For optimal performance, place the script at the end of your HTML body to ensure it doesn't block page rendering.

iFrame Embed

The iFrame embed method is useful when you have limited control over your website's JavaScript or when you want to embed the survey in a specific location.

Steps to Implement:

  1. In your Quackback dashboard, go to the survey you want to embed.
  2. Click on "Distribute" and select "iFrame Embed".
  3. Copy the provided iFrame code.
  4. Paste the code into your website's HTML where you want the survey to appear.
<iframe src="https://surveys.quackback.com/s/YOUR_SURVEY_ID" width="100%" height="600px" frameborder="0"></iframe>

Responsiveness

Adjust the width and height attributes of the iFrame to fit your website's layout. Consider using CSS for responsive sizing.

Customizing the Embed

Trigger Options

You can customize when and how the survey appears:

  • On page load
  • After a delay
  • On exit intent
  • On scroll percentage
  • On button click

To set a trigger, add the appropriate option to the quackback.init() function:

quackback.init({
  id: 'YOUR_SURVEY_ID',
  trigger: 'exit-intent'
});

Styling

Customize the appearance of your embedded survey to match your website's design:

  1. In the Quackback dashboard, go to your survey's "Design" settings.
  2. Adjust colors, fonts, and other style elements.
  3. Changes will automatically apply to your embedded survey.

Testing Your Integration

Always test your integration thoroughly:

  1. Check the survey on different devices and browsers.
  2. Ensure the survey doesn't interfere with other website functionalities.
  3. Test all trigger options if you're using them.

QA Process

Implement a quality assurance process that includes testing the survey integration as part of your website updates.

By following these steps, you can seamlessly integrate Quackback surveys into your website, allowing you to gather valuable feedback from your visitors at key moments in their journey.