In-Web & App survey (micro survey)

Owned by Estelle Lesot (Deactivated)
Last updated: Oct 12, 2023 by Björn Östberg
10 min read

What is it about?

Capture feedback on your website(s) and/or inside your App(s)

This documentation page will help our customers' developer to set up properly the survey(s).

Note: That it is a new feature and needs to be requested and set up via our Customer Success/Support team as a first step.

In-Web survey
In-App survey

1. Parameters available

This is a list of parameters available for the survey. Those can be defined by customers and applied during implementation.

  1. Modal (pop-up): Positions the widget in the middle of the screen while hiding screen content.

  2. Footer banner (in-web survey only): Positions the widget at the bottom of the screen while still showing the screen content. Two options are available:

    1. The footer can be persistent (footer) or

    2. The user is able to minimize the widget and click back into it at a later point (persistent-footer).

Define how you want to design your survey:

  • Primary color: Change the color of the header and primary button background.

  • Header + Primary button text color: Change the color of the text in the header and primary button background.

  • Paragraph text color: Change the color of the text for messages.

  • Rating scale format (for NPS, CES, or CSAT questions)

    • button : Display the rating scale as numbers.

    • circle: Display the rating scale as circles.

    • star: Display the rating scale as stars.

    • emoji: Display the rating scale as emoticons.

       

  • The frequency depends on the user’s action: Did the user close or answer the survey?

    • A period can be configured to show the survey once or multiple times for each action.

    • Numeric value e.g “1” (day) or “once” expected

Examples:

  • "answered": 3, "closed": 8

    • If answered, the survey shows up again after 3 days

    • If closed, the survey shows up again after 8 days

    • "answered": once, "closed": 0

      • After answering the first time, the survey doesn't show up again

      • After closing, the survey will show up again

    • "answered": 0, "closed": once

      • After closing the first time, the survey doesn't show up again

      • After answering, the survey will show up again

  • Setting default: "answered": 1, "closed": 1

  • Note: Cookies are re-set each time changes are made to the SDK. It means the survey will show up again to the end-user.

The “close” frequency is not applicable on the “persistent-footer” type.

 

Display the survey:

  • After clicking a button manual

  • After the page loads onLoad

    • Automatically open the questionnaire when the page is
      loaded.

  • Delay on the page delay:<number>

    • Delay amount used for automatically triggered after the user has been on the page for the given time in seconds.

  • Scrolling amount scroll:<number> 

    • Example: when the user scrolls to the middle of the page, the pop-up appears

  • When the user is about to abandon the page (in-web survey only) onPageLeave

    • When cursor is on the top of the page

 

2. Web & app SDKs - Set up guide

This part is the technical set up guide to help the developers to implement the survey inside the product (website or application)

Quickstart

  1. A questionnaire is created in the Customer Alliance platform (with a questionnaire ID).

    1. This questionnaire ID is available on CA platform, and is needed for the setup.

    2. It can be shared by the customer directly, or by our customer support team.

    3. Customers developers don’t need access to the CA platform.

  2. Recommended: Notify our customer support team and let them know the domain(s) of the websites you want to use the questionnaire on so we can restrict it’s usage

  3. Include the questionnaire Javascript SDK into your website before the closing body tag:

<html> ... <body> ... <script src="https://questionnaire.customer-alliance.com/ca/embedded/sdk.js"></script> <script> window.customerAllianceQuestionnaireSdk.init({ // options that are explained further below }); </script> </body> </html>

API Reference

  • window.customerAllianceQuestionnaireSdk.init(params)

Please run this method before making the call to CA.open(), if you want to set-up the SDK.

Parameters

All parameters are optional.

Name
Type
Description
Name
Type
Description

params

object

A collection of initialization parameters that control the setup of the SDK.

questionnaireID

string

Questionnaire ID from the CA portal.

This parameter is only optional if trigger manual is used and can alternatively be passed as argument for the open function in that case.

For others triggers that don’t need a call to the open function the questionnaireID parameter is mandatory here.

type

string

Accepted values are:

  • pop-up

  • footer

  • persistent-footer

This controls the way to show the questionnaire. As a pop-up or footer overlay.

primaryColor

string

Sets color of title bar background and buttons. e.g. #3B62B2 or black

primaryTextColor

string

Sets text color of title bar background and buttons. e.g. white or #FFFFFF

ratingType

string

Accepted values are circle, star or button

  • button (default)

  • circle

  • star

  • emoji

Rating is shown as mentioned by the type.
Note: The rating scale (1-5, 1-7, 1-10, …) is coming from the questionnaire builder inside CA platform.

frequency

string

  • Frequency must be set for 2 sub parameters- ‘answered’ and ‘closed’.  -

    • Answer means that the user has completed the entire survey.

    • Closed  means that the user has has not answered the survey (drop off) 

  • Values must be entered for answered and closed. 

    • frequency { answered: <value>, closed: <value>} 

  • Accepted values can be: 

    • answered: 'once' - after the questionnaire is answered, it won’t be  shown again. 

    • closed: 'once' - after the questionnaire is clsoed, it won’t be  shown again. 

    • answered: 10 after the questionnaire is answered, it won’t be shown  again in 10 days (if the trigger is condition is met). 10 can be replace  with any whole number. The number represents the delay in number of  days 

    • closed: 10 after the questionnaire is closed, it won’t be shown again  in 10 days (if the trigger is condition is met). 10 can be replace with any  whole number. The number represents the delay in number of days 

trigger

string

Accepted values are:

  • onPageLeave

    • Automatically open the questionnaire when the user leaves the page viewport area.

    • Only work on desktop (detects movement of the mouse)

  • onLoad

    • Automatically open the questionnaire when the page is loaded.

  • manual

    • Default value. open() need to be called to show the questionnaire.

  • scroll:<number> 

    • Scroll amount used for automatically triggered after the user  has scrolled given value. The number is the amount of pixels.

  • delay:<number>

    • Delay amount used for automatically triggered after the user  has been on the page for the given time in seconds. The  number is the delay in seconds. 

    • Deprecated trigger value as number. Example: trigger: 500

attributes

object

JSON object with string values.

Custom data that will be associated to any submitted questionnaire result and is visible on our platform.

Example code:

window.customerAllianceQuestionnaireSdk.init({ type: 'pop-up', primaryColor: '#3B62B2', primaryTextColor: 'white', frequency: { answered: 3, closed: 8 }, trigger: 'delay:100', ratingType: 'star', questionnaireID: 'some_questionnaire_id', attributes: { key1: 'value1', key2: 'value2' } });

 

  • window.customerAllianceQuestionnaireSdk.open(optionalQuestionnaireId)

Shows the questionnaire as per the configured or default init options.

Name
Type
Description
Name
Type
Description

questionnaireID

string

Questionnaire ID from the CA portal. Optional value only if configured in CA.init().

Example code:

window.customerAllianceQuestionnaireSdk.open(); // or window.customerAllianceQuestionnaireSdk.open('some_questionnaire_id')

Note: questionnaireID can be found on the CA platform in this section of the account:

 

Types of Questionnaire

Pop-up

Footer

Persistent-footer

Shows a button in the footer as shown below: Upon clicking on it, the footer questionnaire is shown and clicking on close within the footer questionnaire shows the footer button again