You can trigger web embedded CX surveys at specific points across the user journey to gather more relevant feedback and improve your web application, website or blog. You can do this in an easy way with our low code solution.
To embed surveys into your website, follow these steps for a smooth setup:
- Connect your website
- Name your embed setup
- Choose your visualization
- Customization
- Page visibility
- URL parameters
- Choose triggers
- Define targets
- Preview
-
Connect Your Website
Acquire the survey's tracking code and install it on your website. The communication between Zurvey.io and your website will happen through this code snippet. Don't worry, we only use this code to get the necessary information, such as to check whether your group has an active embed, or to check the connection between the site and Zurvey.io.
To access this feature, navigate to Settings –» Survey tracking code. You can install the tracking code manually on your website by pasting the provided code in the <head> tag of your site in the highest position available. It works for the <body> as well if you want to apply it to one page only.
Once you’ve pasted this code into your website, you can preview embed functions on your website within Zurvey.io without making them visible to your visitors.
-
Name Your Embed Setup
Provide a distinctive name for each embedded survey setup to easily differentiate between them. Specify the domain in which the survey will be embedded.
-
Choose Your Visualization
You can display CES, CSAT, NPS®, 5-star, scale, open format, or any question available in our builder in any combination, though there are some limitations in design.
- The logo, title and description of the survey from the intro element are not visualized for embedded surveys.
- Question numbers and the filling progress bar are not visualized.
- Images are not visualized on the closing page and on disqualification pages.
- The display language selector is not visualized in case of multilingual surveys.
Zurvey.io offers multiple visualization options to suit your preferences.
- Popup: the survey appears in a popup on the website.
- Full Page: the survey takes over the entire website in a full-page window.
- Slider: the survey slides in from the side of the website in a smaller window.
- Side Tab: the survey appears as a clickable tab on the side of the website.
- In Page: the survey becomes an integral part of the website and is available somewhere on the page.
-
Customization
Customization options might differ by each display option, but Zurvey.io provides a wide range of settings for colors, overlay, survey position, survey button and border radius. Let's explore the specific customization options available for each visualization option.
Popup Customization Options
- Show Popup Title: Opt to remove the survey title for a sleeker appearance.
- Background Color: Choose from available colors or provide an exact HEX code for the popup background.
- Text Color: Pick a color or provide an exact HEX code for text on the popup.
- Primary Color: Select a color or provide an exact HEX code for buttons, links, and questions.
- Border Radius: Adjust the pixel value to modify the default 4px border of popups.
- Shadow: Toggle on/off for adding a shadow effect to the popup.
- Background Overlay: Toggle on/off to add an overlay to the popup background.
- Close Automatically After Submitted: Toggle on/off for automatic closure after survey submission.
- Remove Zurvey.io Branding: Eliminate the "powered by Zurvey.io" branding from the popup.
- Remove Privacy Policy: Choose whether to display or remove the default privacy policy.
Full Page Customization Options:
- The same options as for Popup, with an additional setting to pick the color of the panel where the survey appears.(only available if the survey has a default panel)
- Remove Background Image: User can remove background image if necessary. (only available if the survey has a background image set up)
- Edge Margin: The user can specify the distance of the survey element from the edge of the screen
Slider Customization Options:
- The same options as for Popup, with an additional choice to determine the sliding direction: top, down, left, or right.
- Edge Margin: The user can specify the distance of the survey element from the edge of the screen
Side Tab Customization Options:
- Provide a custom name for the button displayed on the side tab.
In Page Customization Options:
- Limited customization options: Choose background, text, and primary colors for the survey embed. Any further customization (border, margin, position etc.) depends on the HTML element in which the survey is embedded.
- Remove Branding and Privacy Policy: Option to exclude branding and privacy policy from the embedded survey.
-
Page visibility
By default, Zurvey.io displays your survey on all pages of your website, but you can filter for only certain pages or subpages, e.g.: survey.io/blogs or /blogs as it is not necessary to include the previously provided domain name again.
If you choose to embed your survey with an “In page” embed option, you have to leave a placeholder element in your page with a unique class name or id. Your microsurvey will appear in the first match with the query selector. Ids tend to work better since ids are unique per page. For example, if you have the following HTML element in your code, the DOM query selector can be both #survey-placeholder or .placeholder. Ids should be prefixed with # while classes with a dot.
<div id=”survey-placeholder” class=”placeholder” />
-
URL Parameters
URL Parameters are a two-way channel of information. You can predefine them or get values from them based on URL queries, Cookies, Local storage, GTM or Zurvey.io variables or Constants. To create a URL parameter, you can do so in the URL tab of the publish page (see URL parameters). Once there are URL parameters available for the survey, they’ll appear in the dropdown as options to pick from in the embed menu as well.
If you would like to connect the feedback collected in your web application to specific users, you should define ‘Userid’ and ‘Groupid’ as URL parameters. This results in the following URL: https://s.zurvey.io/test?groupid=groupid&userid=userid
As a next step, you have to decide whether this data is stored as cookies, Zurvey.io Variables or Google Tag Manager variables. You can also store this data in local storage.
There are many options to store and get variables from your site connected to specific visitors or the source of their actions.
URL query can be used to pass down parameters from the URL to the survey, for example to track which product page the Feedback button was clicked on.
If the URL looks like this: https://mywebshop.com?productId=63553428, then the productId query parameter can provide value for a similar URL parameter.
Cookies: Store cookies and use their values as URL parameter values by providing the name of the cookie.
document.cookie = '=';
e.g. document.cookie = 'userId=1234';
Local Storage: Store data in local storage and use the values as URL parameter values by providing the name of the item you’ve set.
localStorage.setItem(, );
e.g. localStorage.setItem("userId", 1234);
Zurvey variable: The Zurvey.io script enables you to set variables about visitors in different scopes.
To set a Zurvey variable:
window.zurvey('set', '', '', '')
- e.g. window.zurvey('set', 'segment', 'premium', 'user')If the scope is “user”, local storage will store the variable.
- If the scope is “session”, session storage will store the variable.
- If the scope is “page”, the variable will be stored only until the current page is open.
To remove a Zurvey variable:
window.zurvey('remove', '')
e.g. window.zurvey('remove', 'segment')
GTM variable: If you use Google Tag Manager, you can use variables from the data layer.
Constants can be added as URL parameters as well. In this case, every survey submitted through web embed will automatically have this URL parameter value. This can be useful if the same survey has been shared through different platforms to track back the source.
e.g.: source URL parameter with constant value of “website” for web embed, “widget” value if using HTML widget and “campaign” if sent through email share.
-
Choose triggers
Users interact with a website or application in many ways, and any of these interactions might be just the right opportunity to ask for feedback. We’ve translated these interactions as trigger events. You can choose from predefined events based on user behavior like exit intent or scroll progress. You can also define custom Javascript events or GTM events, for example when a payment process closes successfully.
Let’s go through the trigger options one by one.
- On page visit: The embedded microsurvey appears when the page defined above is loaded.
- Click: Define an HTML class or id here. If your visitor clicks on these elements, the embedded microsurvey will show up.
- Scroll: If the user reaches the defined percentage of the page, the embedded microsurvey will show up.
- Idling user: When a user seems to have gotten lost, ask for feedback. This means a 60 second period when the user hasn't clicked, just moved around the page.
- Exit: When the user's cursor leaves your page, the embedded microsurvey shows up.
- GTM event: Input any Google Tag Manager event and if it is triggered, the embedded microsurvey will show up.
- Zurvey.io event: JavaScript events allow you to display a survey after clicking a button or encountering any JavaScript events on your website or app. This allows you to:
- Target users who’ve added a specific product to their basket or used a coupon in the cart, so you can increase your conversion rate and sales.
- Show survey on a specific section of your dashboard/app to inquire about your user's experience.
- Add a specific button in the navigation of your apps to trigger the feedback dialog. To do this, you need to let Zurvey.io know about the event triggering the survey. Provide the event name in the embed settings and add a code like this to your website:
window.zurvey('send', '', '') e.g. window.zurvey('send', 'askAboutExperience', 'true')
In all cases, a delay can be set up for the triggers. The time in seconds needs to be given for the popup to appear after the trigger fires. If it's 0, there is no delay.
Read more about this feature on our blog
Well-designed, smooth feedback collection at every digital touchpoint
-
Define Targets
Targeting users is a useful tool for collecting feedback from a representative sample. This can be achieved easily by using filtering rules. Select users by different meta information, such as first time or returning user, or based on their device, operating system or browser. You can make targeting even more sophisticated by applying different variables from cookies or Google Tag Manager.
The following targeting options are available in Zurvey.io:
- Device: mobile desktop or tablet.
- Operating System: Android, IOS, Linux, MacOS, Windows, other.
- Browser: Chrome, Firefox, Safari, Internet Explorer, Edge, other.
- Visitor Segment: new user or returning visitor.
- Percentage of visitors: the exact amount can be provided.
- Time: refers to only displaying the Embedded Survey to users once per period/session (user/browser).
- Cookie variable: If your website already stores information about visitors in cookies, that information can be used as a targeting variable if the cookie name is provided.
- GTM variable: If your website already stores information about visitors in the GTM data layer, that information can be used as a targeting variable if the GTM variable name is provided.
- Zurvey.io variable: to set it, follow this example:
- If the scope is “user”, local storage will store the variable.
- If the scope is “session”, session storage will store the variable.
- If the scope is “page”, the variable will be stored only until the current page is open.
e.g. window.zurvey('set', 'segment', 'premium', 'user') - To remove a Zurvey.io variable:
window.zurvey('remove', '') e.g. window.zurvey('remove', 'segment')
The microsurvey is now set up and ready to collect feedback from your website’s visitors. However, multiple triggers can be set up for an embedded survey by clicking the “Add new target” button at the bottom.
-
Preview
Once all necessary defining settings are provided, a preview becomes available for every embed at the bottom of the embed setup page, next to the publish and save buttons. Click on the preview button and enter the website’s link on which you’d like to preview your microsurvey, then click connect. If the survey is not connected to an active website via tracking code, the system will not be able to demonstrate certain functionalities like triggering, targeting, and In-App embed. If the system is connected to your desired website, this preview will give you an authentic look and feel of the finished microsurvey. Click preview tol have a look at how the microsurvey will look once finished.
Once you have different embeds set up for the same survey, you’ll see them on the publish
page’s embed tab, where you’ll see the embed’s title, type, if it is published or not and whether it’s connected to a website. Please keep in mind that the system considers an embed active if the website is connected, the embed setting is published and the toggle is switched on. Using this toggle you can pause the embed triggering on your website without deleting the embed.
This is also where you can copy/duplicate an embed setup or delete it entirely from the survey.
Please keep in mind that if multiple embed setups have been added to one website and triggered simultaneously only one will be displayed. For example if there are two popup embed setup triggered on page load only one will be displayed. In-page embed serves as an exception, since it can be triggered with another embed setup simultaneously.