SurveySparrow Widgets | How to make the maximum use of it?
Trigger/restrict surveys and find every little detail about your survey submission.
SurveySparrow widgets let you trigger/restrict surveys and find every little detail about your survey submission effortlessly. You can initiate events occurring on the website or product based on these widgets.
Let’s discuss this in detail.
Note: The following steps are explained only for the Classic Surveys.
1. Create a new survey or open an existing one. Navigate to the Share tab, and select Embed.
2. Trigger the survey the way you love with three flexibilities: Inline Embed, Pop-up, and Side panel. Adjust the width and height according to your preferences.
3. Once done, copy the Javascript code.
4. With the help of developers, you can carefully run the code on your website/product snippet to trigger or find more details about your respondents' survey submissions.
5. In case you wish to configure a survey popup based on the occurrence of an event, you can make use of SurveySparrow widgets, effortlessly.
Below are the Widget configurations that you can pass in your embedded Javascript code.
Widget Configurations:
Now, let’s dive deeper into each of these widgets.
Stop the Widget Popup by default when the page loads:
To stop the widget popup when the page loads, you can pass the below parameter in the website code snippet. Doing this will restrict the widget popups, and avoid an unwanted survey.
<script> window.sparrowConfig = {
triggerOnLoad: false
} </script>
Open the Redirecting URL in a new tab:
After the completion of the survey, if you wish to redirect the respondent to a URL on a new tab, you may pass the below parameter.
<script> window.sparrowConfig = {
newTab: true
} </script>
Trigger the Widget Chat Automatically:
You can simply make use of the below parameter and add it in the website code snippet to trigger the chat widget automatically.
<script> window.sparrowConfig = {
chatAutoStart: true
} </script>
Trigger the widget at any condition:
In case you wish to trigger a SurveySparrow widget without providing any set of conditions, you can do it by passing the below parameter in the website/product code.
<script> window.sparrowConfig = {
forceTrigger: true
} </script>
To send value to a variable:
You can also send a value to the variable in the parameter and pass that value to the actual code snippet. Take a look at the below parameter to understand it better.
<script> window.SparrowLauncher('popup', {
variables: {
customer_id: 1234,
user_name: test //add custom properties
}
}); </script>
To display a survey directly in a specific language:
Do you have a website in a different language?
Are you thinking about displaying the survey based on a selected website language?
You can simply pass the value in ISO 639-2 Language code format, inside the embed share script or weblink. This will help the users take the survey from the language that you pass inside the parameter.
<script> window.SparrowLauncher('popup', {
variables: {
customer_id: 1234,
user_name: test //add custom properties,
sparrowLang: ‘hi’ // this key will help to sent a language details
}
}); </script>
To find if the users have started the survey:
In case you wish to find if the users have started the survey or not, you can make use of the below parameter.
<script> window.addEventListener('message', (e) => {
if(e && e.data && e.data.type === 'surveyLoadStarted') {
// Survey started loading
}
}); </script>
To find the language changes in the survey:
Make use of this parameter to find any language change occurred in the survey.
<script> window.addEventListener('message', (e) => {
if(e && e.data && e.data.type === 'languageChanged') {
const { code, label } = e.data; //Here you will get the new language code and label
//Language changed
}
}); </script>
To find the survey completion:
Here's how you find if the respondents have completed the survey or not. Pass the below parameter in your website/product code snippet and check the survey status of your respondents effortlessly.
<script> window.addEventListener('message', (e) => {
if(e && e.data && e.data.type === 'surveyCompleted') {
const { response, customParams } = e.data; //Here you will get the response and customparam.
//Survey completed
}
}); </script>
To find the survey redirection:
How to check if the survey has any redirection? It’s simple. Just copy the below parameter and paste it in your Embedded code snippet. You’ll find it easily.
<script> window.addEventListener('message', (e) => {
if(e && e.data && e.data.type === 'redirectPage') {
// Page redirected
}
}); </script>
To find the window close for pop-up card:
Here’s how you find the window close for your pop-up cards.
<script> window.addEventListener('message', (e) => {
if(e && e.data && e.data.type === 'removeWindow') {
// Window closed (pop-up card)
}
}); </script>
Advantages:
- You can configure the widget conditions and collect every information about a survey submission in next to no time.
- You can trigger/restrict the surveys or initiate new events when the conditions are met.
- You can collect more valuable insights from the users.
- With the insights collected, you can take actions that drive significant value to your brand.
Note:
- Every parameter by default will have its own conditions. It can be true or false. Please make sure to change it according to your convenience.
Please reach out to us if you have any questions. We are just a chat away!