Guides

Multiple Choice Question

This section provides details on the component Multiple Choice Question in the screen composer

Suggest Edits

General overview

Multiple Choice Questions (MCQ) are useful to collect feedback from your users. They can be integrated in onboarding flows or surveys.


Benefits

The Screen Composer offers the following benefits:

  • Ease of creation: you can create native surveys and multiple choice questions Screen in no-code and deploy them into your app without needing to update it.
  • Flexibility: the MCQ component is flexible and can be configured in different way. You can define:
    • whether multiple answers are possible or not
    • whether the question should be mandatory or optional
    • whether the answer should be submitted as soon as the user clicks on it or if a validation is required by click on a validation CTA.
  • Data collection: when users answer a survey, the data is collected by the Purchasely platform. A new survey module, allowing you to visualize the data collected will be integrated to the Purchasely Console soon
  • Data integration: when users submit an answer to a survey, a UI / SDK Event is generated by the SDK. By creating an event delegate / event listener in your app, you can intercept this event and forward it to any 3rd party integration or 3rd party SDK, which will allow you to fetch and visualize the data collected in your favorite analytics or mCRM/engagement platform
  • User segmentation: when users answer a survey, you can save the answers submitted in User attributes. This will allow you to segment your user base depending on their answers by creating Audiences.

Examples of Surveys

A typical example is a cancellation survey:

  • when a user cancel their subscription you can present them with a cancellation survey that you can design with the Screen Composer to better understand why they cancel their subscription
  • the answer provided can be saved in a user attribute cancellation_reason
  • you can then create an audience to target users who submitted a specific answer. Eg:
    cancellation_reason is equal to subscription_too_expensive
  • a specific user journey can then be created for this particular Audience. Eg:
    Presenting a discounted retention offer to the user who said their subscription was too expensive

Other examples that can be created with the Screen Composer include:



Configuration

MCQ structure

The MCQ has the following structure:

It is composed of:

  • a parent element (highlighted on the picture above), where settings, general styles and layout parameters can be defined
  • A Question section, which is a collection of Labels , where you can enter the question you want to be displayed
  • An Answers section, which is a collection of Answers (or Options) that will be displayed to the users

The MCQ component itself does not include any CTA to submit the answers. It comes as a separate element called CTA for Multiple choice question, so that it can be associated in a different surface (eg: the Bottom bar in the template Sticky button). More details here.



MCQ configuration process

To configure a MCQ, here is the process:

  1. Set and configure the Survey associated the MCQ in the Settings section of the Parent element
  2. Configure the layout and styles of the Answers at the level of the parent element
  3. Configure the Texts(s) of the question and apply the desired style(s)
  4. Configure the Answers that should be displayed. For each, set an Answer value and configure the associated Texts
  5. Configure the CTA associated to the survey to submit the answers

1. Configuring the Survey

In the Settings section of the MCQ parent element, you can define the Id of the survey.

By default, the Id is set to survey_1.

You can either click on Create new Survey id or click on the Edit button which appears on roll-over on the Id itself to configure the parameters of the survey

Here are the parameters that can be configured:


  • Survey id: set an identifier that matches the purpose of the survey. This Id allows to aggregate the data under the same parent. This means that several MCQ components on several different Screens sharing the same Survey Id will aggregate their data together.
  • Save answer in custom user attribute: this attribute allows you to store the answer provided by users in Custom User Attributes. Doing this allows you to build Audiences target users depending on the answer(s) they provided.
    • When enabled, you will need to associate the survey with a Custom User Attribute that you need to create in the Console beforehand.
    • You should select an attribute which type matches the type of data that will be stored in it (eg: Strings if the answer provided can be Strings, Integer for numbers etc...).
  • Skippable: by default the MCQ is mandatory and users have no choice but to answer it (unless they close the Screen).
    • When a Survey is configured as mandatory, the associated Validate CTA is disabled as long as the user does not choose among one of the options displayed.
    • When a Survey is configured as Skippable, CTA will be Active by default and users will therefore be able to continue without choosing one of the options displayed
  • Validate on selection: this option allows you to have the answer validated when clicked. This allows you to skip the Validation step and shorten the user flow. In this configuration, no Validation CTA is required. A secondary action (eg: Open Screen) will be possible to define for every option proposed.
  • Allow multiple: this option is used to allow multiple answers to be selected.
    • When enabled, you can define the minimum number of options that should be selected before the button becomes active, unless the Survey has been defined as Skippable.

Screen behavior depending on survey configuration

2. Configuring the Answers layout and style

Answers styles

Answers styles (except the Texts of the Answers) are common to all the answers and defined at the level of the parent element. They must be defined for both states: unselected and selected


Answers icon

  • You can activate or deactivate the icon

  • If you activate it, you can define 2 different images depending on the state of the answer: unselected / selected

  • The icon size and icon alignment (left or right) can be adjusted

  • By enabling Text and Icon centered, you can wrap the icon & the Texts inside button at the center of the button


Answers layout

  • Full width: allows you to extend the picker to fit 100% of the width available. If deactivated, the width of the answer will hug its content.
  • Min height: defines the minimum height for the picker. If the content overflows and does not fit in that height, the picker will extend its height.
  • Space between answers: defines the spacing between the pickers

3. Configuring the Question Text(s)

In the Question section, you can add Texts and apply a style to each of them

4. Configuring the Answers available and associated Texts

For each Answer / Option displayed, you need to configure both a Value and the Text you want to be displayed on the Screen.

  • The Value is used for tracking the Answers provided by the users and segmenting them.
    2 users with different locales, choosing the same answer submit the same value.

  • Texts can be added as sub-elements of the Answer. They are associated with specific styles and can be localized.
    2 users with different locales will see the Texts of the answers localized

=> We invite you to put a code value or the default language Text in the field Value and the localized version in the Texts

When the switch Selected by default is enabled, the corresponding Answer will be automatically selected by default when the Screen gets displayed, without needing an interaction from the user. This can be used for opt-outs options.


5. Configuring the CTA associated to the MCQ

Depending on how you have configured the survey, you might need (or not) a submit button for the user to validate their answers:

  • if the survey is configured with the option Validate on selection enabled => no CTA is required, the answer will be automatically submitted as soon as the user chooses it

  • if the survey is configured with the option Validate on selection disabled => you need to add a distinct composant CTA for Multiple choice question to you screen so that users can submit their answers.


    • In the latter case, click on Add component, then drag & drop the component CTA for Multiple choice question into the desired surface
      Note: This surface can be different from the one containing the Multiple choice question component.

This CTA offers the same display and layout options as a standard button Here they are all:


  • Survey id: The value should match the Survey id associated to the Multiple choice question.

    • The default value is set to the id of the first MCQ created in the Screen
    • Only change it it you have several independent Surveys (with several different ids) in the Screen

  • Layout:

    • Full width:

      • when enabled (by default), the CTA takes the full width available in the surface.

        • The surface left & right padding quand the component left & right margin are taken into consideration to determine the width available

      • when disabled, you can manually set the Width of the CTA

    • Min height: allows to set the minimum height of the CTA. If the content inside the CTA does not fit (eg: for devices on which the accessibility settings have been activated), the CTA get enlarged.

    • Icon: You can activate or deactivate the icon

    • The icon size and icon alignment (left or right) can be adjusted

    • By enabling Text and Icon centered, you can wrap the icon & the Texts inside button at the center of the button

  • Styles:

    • You can define 2 different background and border for the CTA depending on its state: active / disabled

    • The CTA is deactivated only when the Survey has been configured as not Skippable or when the number of answers selected is inferior to the Minimum number of answers defined for the Survey.

    • Note that at the level of the Answer, it is possible to define if it should be selected by default or not

Updated 1 day ago