Embedding a survey is an effective way to ask the feedback from your audience when they are visiting your webpage. Qwary's javascript SDK makes it effortless to embed surveys into your webpage. Qwary supports three embed options.

Below is the step by step guide to embed the survey to your webpage. Click here to download the sample code for your reference.

1) Open your survey that you would like to embed and go to distribute --> Direct link and copy survey Id.

Example: A highlighted token from the below URL is survey id.

https://survey.qwary.com/form/S_wSzSPnasH9Wc_FT15X0J1BuEcPl5gIPTGrxqnl0WQ=

2) Add JavaScript SDK to your webpage's body page.

<script src="https://static.qwary.com/resources/min-js/sdk/qwary.sdk.v1.min.js"> </script>

3) Sidetab Embed - show survey panel on the right side of the webpage.

<script>
window.qwarySettings = {
surveyId : 'S_wSzSPnasH9Wc_FT15X0J1BuEcPl5gIPTGrxqnl0WQ=',
layout : 'side_tab',
buttonText : 'Feedback',
showLunchButton: true,
qwaryBranding: true,
contact : {
email : '<contact email address>',
firstName : '<contact first name>',
lastName : '<contact last name>',
streetAddress : '<contact street address>',
city : '<contact city>',
country: '<contact country>',
state: '<contact state>',
postalCode: '<contact postal code>',
department: '<contact department>',
phoneNumber: '<contact phone number>'
}
};
qwary.survey();
</script>

Contact helps you identify the participants who filled up the survey. Contact populated in settings will be automatically added/updated to your Qwary's contact list. 'qwary.survey()' method triggers the survey.

4) Popup embed- Show survey panel in popup mode.

<script>
window.qwarySettings = {
surveyId : 'S_wSzSPnasH9Wc_FT15X0J1BuEcPl5gIPTGrxqnl0WQ=',
layout : 'popup',
showLunchButton: false,
popupHeight: '600px',
popupWidth: '800px',
qwaryBranding: false,
contact : {
email : '<contact email address>',
firstName : '<contact first name>',
lastName : '<contact last name>',
streetAddress : '<contact street address>',
city : '<contact city>',
country: '<contact country>',
state: '<contact state>',
postalCode: '<contact postal code>',
department: '<contact department>',
phoneNumber: '<contact phone number>'
}
};
qwary.survey();
</script>

Contact helps you identify the participants who filled up the survey. Contact populated in settings will be automatically added/updated to your Qwary's contact list. 'qwary.survey()' method triggers the survey.

5) Fullscreen embed - Show survey on a full browser screen.

<script>
window.qwarySettings = {
surveyId : 'S_wSzSPnasH9Wc_FT15X0J1BuEcPl5gIPTGrxqnl0WQ=',
layout : 'full_screen',
showLunchButton: false,
qwaryBranding: false,
contact : {
email : '<contact email address>',
firstName : '<contact first name>',
lastName : '<contact last name>',
streetAddress : '<contact street address>',
city : '<contact city>',
country: '<contact country>',
state: '<contact state>',
postalCode: '<contact postal code>',
department: '<contact department>',
phoneNumber: '<contact phone number>'
}
};
qwary.survey();
</script>

6) Inline embed - Show survey on embedded inline into your webpage.

<div class="qwary-widget"></div>
<script>
window.qwarySettings = {
surveyId : 'S_wSzSPnasH9Wc_FT15X0J1BuEcPl5gIPTGrxqnl0WQ=',
layout : 'inline',
popupHeight: '600px',
popupWidth: '100%',
container: 'qwary-widget',
contact : {
email : '<contact email address>',
firstName : '<contact first name>',
lastName : '<contact last name>',
streetAddress : '<contact street address>',
city : '<contact city>',
country: '<contact country>',
state: '<contact state>',
postalCode: '<contact postal code>',
department: '<contact department>',
phoneNumber: '<contact phone number>'
}
};
qwary.survey();
</script>
Did this answer your question?