Web-app embed collector: An overview

TABLE OF CONTENTS

• How to collect responses using the web app embed collector
• How to use the code snippet and collect contact attributes or contact fields
• How to use and configure the email hash encryption feature in the embed code? 

Freshsurvey's web-app embed collector allows you to display your survey on any single-page application or service by embedding a Javascript snippet.

When a user visits your application or service land on a page where your snippet has been embedded, they’ll see your survey at the bottom of the page.

Once the survey has been completed, it will disappear automatically.

A) How to collect responses using the web app embed collector

Once you've created your survey, you can collect responses via the web app embed collector. 

1. In the 'Collect responses' screen, select 'Web-app embed' as the response collection medium

2. In the 'Collect responses' screen, select 'Web-app embed' as the response collection medium

3. Set the web-app embed style as per your preference. We support Default, Compact, or Cozy styles, which decrease in size in that order.

4. Specify how many seconds Freshsurvey widgets needs to wait before rendering the survey.

5. As you configure the collector, the Javascript code snippet below will be updated. Once you're ready, hit 'Next' to schedule your survey.

6. You need to schedule and activate your survey to start collecting responses. Make your selections and click 'Activate'

7. Once activated, the code snippet used to embed the survey can be copied and added to your app or site

How to use the code snippet and collect contact attributes or contact fields

You can collect essential contact and custom contact fields by adding them as shown below:

<script>
SurveyWidget.init({
        type: "default",
        delay: 2,
        include_unsubscribe :true,
        survey_id: "5000xxx40-6000-4000-9000-8000xxxxxx9x",
        survey_collector_id: "SC-001",      contact: {
            "first_name": "John",  // Replace with your contact's first name
            "last_name": "Smith",    // Replace with your contact's last name
            "work_email": "john.smith@example.com",   // Replace with your contact's work email
            "custom_field_1": "{{your dynamic value goes here}}",  // Replace with your contact custom_field_1
      }
  })
</script>

How to use and configure the email hash encryption feature in the embed code? 

To include the encrypted email hash, you will have to add a contact attribute ‘work_email_hash’ in the contact object of the embed code. You can pass this dynamic hashed email values generated using the secret email hash key provided in the Settings > Account info section. We will detect this attribute used in the request and decrypt the contact email. Learn more.

You can enable email hashing encryption by passing the 'work_email_hash' variable as shown below:

<script src="https://cdn.surveyserv.com/widget.min.js"></script>
  <script>
  SurveyWidget.init({
        type: "default",
        delay: 5,
        include_unsubscribe: true,
        survey_id: "f3e0eef9-d4ab-47f9-8a28-91ee3d76d781",
        survey_collector_id: "SC-394",contact: {
        "first_name": "John",  // Replace with your contact's first name 
        "last_name": "Doe",    // Replace with your contact's last name
        "work_email_hash": "{{your dynamic value goes here}}",  // Replace with contact's work email hash 
      }
  })
  </script>

Note: 

For the below contact fields, we support only the mentioned format when passed via web-app embed;

• Date/time contact fields: We support only ISO format (yyyy-MM-dd'T'HH:mm:ss.SSSXXX). For example, 2022-10-31T01:30:00.000+05:00. 
• Timezone: We support timezone only if it is passed in either 'Asia/Kolkata' or 'UTC+05:30' format. 

B. Choose an audience and schedule

To learn more about choosing the audience, read this article.  

To learn more about how you can schedule a survey after configuring the collector and selecting the target audience, read this article here.