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:
- JavaScript Embed
- iFrame Embed
JavaScript Embed
The JavaScript embed method is the most flexible and recommended approach for most websites.
Steps to Implement:
- In your Quackback dashboard, go to the survey you want to embed.
- Click on "Distribute" and select "Website Integration".
- Copy the provided JavaScript code snippet.
- 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:
- In your Quackback dashboard, go to the survey you want to embed.
- Click on "Distribute" and select "iFrame Embed".
- Copy the provided iFrame code.
- 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:
- In the Quackback dashboard, go to your survey's "Design" settings.
- Adjust colors, fonts, and other style elements.
- Changes will automatically apply to your embedded survey.
Testing Your Integration
Always test your integration thoroughly:
- Check the survey on different devices and browsers.
- Ensure the survey doesn't interfere with other website functionalities.
- 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.