How to Embed your Survey on a Website

How to Embed your Survey on a Website

Embed survey to your web application

This article will help you in Embedding your Survey from SurveySensum on a Website.

Embedding in a website is an essential sharing method for collecting user feedback for customer validation and customer-driven development. It helps you in knowing your customers better.

It can help you in getting insights such as usability, user impressions, and how effective the user found your web application.

This section will cover four important features to set up the survey into the website:

1. Appearance configuration/look and feel of the survey on your website

2. Targeting setup

3. Javascript trigger

4. Review and activate

Here are the steps you can follow to set this up from your SurveySensum account:

  • Create a survey that you want to Embed into a Website and click on the Share button from the Navigation Panel.
  • Click on the Embed in a Website icon listed on the Share screen shown in the image below.

  • After clicking on the Embed in a Website icon it will redirect to the Editor screen.
  • You can give your embed a name so it is easily recognizable next time when you are in the Share module.
  • The editor consists of three sections: Appearance, Targeting and, Review and Activate.

Appearance: There are three layouts available in the Appearance - Full Screen, Pop-Up, and Sidebar


1. Pop-Up: The survey will appear as a popup inside your website or web application. You can also choose where to display this pop-up.

This can keep your users/leads on the web application and contingently promotes the survey. It appears as a small widget, allowing your users to interact with other content on the same page.

You can choose any of the three alignments from the below options:

  • Left: The pop-up will appear on the left of your website.
  • Center: The pop-up will appear in the center of your website. This is also the default for pop up.
  • Right: The pop-up will appear on the right side of your website.

2. Full Screen: The full size of the survey will open on your web application.

This view is great when you want to get your users' full attention on a page. Full-screen surveys have the same functionality as Pop-up surveys. However, the difference is that a Full-screen survey appears on the entire screen.


3. Sidebar: The last option in the layout is the sidebar where the survey will appear on the sidebar of your website or web application.

You can edit the tab text, which says Give feedback by default. And you can also change the color. You can adjust its positions on the left-hand side or right-hand side.

This can help your users/leads to respond the survey anytime they want.

Preview

  • You can also check all the appearance options live on Preview.
  • The Mobile and Web views can interpret how the surveys will look on mobile and web browsers.


Targeting: You can choose when, where & how often you want to surveys your users.

A. Let's start with Where to show the Survey

You can either display the survey on a URL or trigger a survey after a user performs an action using Javascript Trigger.

1. If you want to display a survey on a URL, choose between 4 operators and enter the value of the URL

Here is how you can use these four operators.

  • Exact match: Targets a specific URL, including HTTP or HTTPS. For example, if you have to target a URL, enter the exact value: https://www.surveysensum.com. If you just specify surveysensum.com it will not match the condition.
  • Ends with: Target all pages that have a URL which ends in the entered value you specify; Value- /product will match all pages like www.surveysensum/product
  • Contains: Target all pages where URL contains the text you specify. Text: product, will match all pages where url contains product like www.surveysensum.com/product/NPS.

2. Use Javascript trigger if you want to trigger the survey on a specific action taken by the user on your website or web application.

Suppose a user just signed up to your platform and you want to show them the survey regarding the signup experience, in that case, you can just use this trigger to start the survey.

How to use it?

NOTE: Before starting with this section, you must have basic knowledge of the Javascript Language.

Step 1: Select the Javascript trigger from the targeting section.

Step 2: Enter an event name you would like to use as your trigger, only alphanumeric characters (a-z, A-Z, 0-9), underscores (_), and dashes (-) can be used in the trigger name. This field cannot be left blank.

Note: If a Javascript trigger is present on a page, it will cause the survey to show regardless of any other rules present.

Step 3: Click Done.

Step 4: Add trigger code to the website

In the example above, we’ve created a trigger called user_logs_in. Next, you will need to add the trigger code to your website:

window.surveysensum.startSurvey(‘user_logs_in’);

B. When to launch the survey

We have four options, to launch the survey on a webpage.

1) Launch it immediately after the page loads: This will launch the survey just after the webpage is launched.

2)After a delay of ___ seconds: Here you need to just input the delaying seconds to launch the survey after a specific time delay.

3)When a user is about to leave the page on a desktop device: The survey will appear as soon as a visitor moves their mouse cursor upwards and towards their browser toolbar. The survey is shown the moment the cursor leaves the 'viewport' - the area displaying the site

4)When the user scrolls halfway down the page: When the user scrolls halfway through your webpage this survey will show.

C: When to repeat this survey

By default, the toggle is On and 30 days

Here you can specify the repeating date of the survey in case of the user declined your survey. Or you can turn off the repetition for the declined survey.


Review and activate:

Here you can check what the triggers are and also the appearance you have applied and activated in your embedding.

  • You can turn the embedding ON or OFF.

  • The code will be generated once you save the changes.

Note: You need to use the exact code which is generated for the survey which you want to embed.

    • Related Articles

    • Survey Metrics

      The Survey Metric page gives you the frequency distribution of a survey and also each question in the survey. Visualize the responses using graphs here. This will give you an overview of the responses and its distribution metric that can help you ...
    • How to integrate the embed code

      Use the embedded survey in your web application Now you have generated the code, you just need to paste the code anywhere between the <head></head> tag of your HTML code to install the SurveySensum widget. After adding this code our SurveySensum ...
    • How to use Javascript trigger in survey embedding

      Here you will learn to use JavaScript trigger in your webpage for embedded survey Use Javascript trigger if you want to trigger the survey on a specific action taken by the user on your website or web application. Suppose a user just signed up to ...
    • How to activate and get the code snippet to embed the survey

      In this article you will get to know about activating the survey and generate the code-snippet for embedding in webpage Review and activate: Here you can check what the triggers are and also the appearance you have applied and activated in your ...
    • How to customize the look and feel of your survey

      This article will guide you to set up the appearance of the survey on your webpage. Appearance: There are three layouts available in the Appearance - Full Screen, Pop-Up, and Sidebar 1. Pop-Up: The survey will appear as a popup inside your website or ...