New Surveys

1. Design Mode vs. Preview Mode

Design Mode (default)

When you land on the design page after selecting the template, you are in design mode by default. Click on the UI elements in the simulator for further configuration options like editing the text, changing the font type, size, background colour, etc. You can also remove the UI element from the design by hovering over it and clicking the delete icon.

Preview Mode

Once you toggle into preview mode, you can interact with the questions in the simulator as they are intended for the end user on their device. You can select the choices, answer the short answer question, select the rating, and click the Next button to move to the next question. To be able to edit the UI elements’ configuration, you need to toggle back to Design Mode.

2. Edit Design Section

Orientation

You can change the orientation of the template to one of Full Screen, Center or Footer. The orientation will be applied to all the questions in the survey.

Dim Background

Enable the dim background radio button to dim the background screen when the survey container is shown to the end user.

You can change the dim background colour by clicking on the colour icon. You can also change the opacity percentage of the dim background by sliding the slider.

Mandatory Question

Enable the Mandatory Question radio button to make this question mandatory for the end user to answer. Once enabled, the Next button on the survey container will be disabled until the end user makes a selection, e.g. selects an option, selects a rating, and starts typing.

Randomize Choices

Enable the randomize choices radio button in Single-Choice and Multi-Choice templates to present the choices in randomized order to end users.

Progress Bar

Enable the progress bar so the end user can see a small colored strip on top of survey container.

Icon Buttons

By default the cross mark is in top right corner and the back arrow is in top left corner. You can switch their positions by clicking on the switch position icon.

3. In-Place Editing

When you are in Design Mode, you can click on the items to use the edit options available. You can also remove an item by hovering on it and clicking on the delete icon that appears at the top left corner of that item.

To add the removed item again, hover over the survey container and click on the pencil/edit icon.

Progress Bar

Click on the progress bar at the top. A palate with options to edit the colors of completed and yet to be completed colors and size/height of the progress bar will open. Just click on the color to select your preferred color.

Stepper

You can change the text and format of the question stepper by clicking on it.

Cross and Back Icons

You can change the color, size and margin of the cross icon and back arrow.

Text

You can edit any of the text items by clicking on them.

You can change the font type, font size and font color. You can also configure the alignment, margin and padding.

Button

You can configure the button by clicking on the non-textual part of the button.

You select the button action as Next, Submit or Dismiss. You can change the button color for Active and Inactive state. You can use these options to select the button position, wide or small button and provide margin and paddings.

Background

You can change the background color of any section by clicking on the non-textual portion of that section.

Choices and Ratings

For single-choice and multi-choice templates, you can configure the choices. Click on the non-textual portion to configure the options tile. Click on the textual portion to edit the option text and textual attributes like font-type, size and active and inactive font-color.

You can select the options tiles as filled or outlined, configure the corner radius, active and inactive background color and padding.

Ratings

Click on the non-textual part in the rating tile for configuration options.

You can configure active and inactive color, resize the tile, add stroke and stroke color to it and configure the corner radius.

Click on the rating number for number related configurations.

4. NPS Template Specific

Number of Buttons

Select the start and end rating number of the rating scale you want.

Labels

Enable or disable the text label for start and end number of the rating scale.

eg. most likely, least likely, etc.

Questions and Suggestions

You can ask question on the same screen based on the rating selected by the user.

1. Click on the icon, a pop-up will appear

2. Click on Add a Question based on rating

3. Select the condition and ratings as per your requirement

4. Enable Question

   1. Edit and enter the question text

5. Enable Suggestion

   1. Suggestions are response tiles to the question. End User can just click on the tiles to select his response for the question.

   2. Click on Add Suggestion to add a suggestion tile.

   3. Click on the Suggestion 1, Suggestion 2, etc. text to edit and write your own response

6. Enable Feedback box

   1. Adds a text box for user to enter a textual response.

Reactions

You can display a emoji and text based on the rating selected by the user.

1. Click on the icon, a pop-up will appear

2. Select the condition and ratings as per your requirement

3. Enable Message

   1. Edit the text and write a message to display

   2. eg. Excellent, Very Poor, etc.

4. Enable Image

   1. provide the url