Simple Survey Popup

The Simple Survey Popup Component is a part of the Survey Component Set. It allows Studio Users to integrate Simple Survey Popup into their app. 

Ideas for Using Simple Survey Popup

  • This survey option enables app users to give positive, neutral, and negative reactions.  This scale is ideal when trying to get clear feedback on whether an experience or event was good or bad. 
  • In an event app, add the Simple Survey Popup on a speaker or session Page asking attendees to rate their experience. Streamline the process by enabling them to skip adding a comment. This will increase the likelihood of getting more rating reviews.
  • If you provide customer service in an app, ask for your customer’s review after interacting with the support team. In the Instruction Text avoid yes/no questions. Rather ask a probing question, such as “How could our team improve your support experience?” This gives your customers a chance to provide recommendations.
  • Want to capture more nuance in user feedback? Check out the Rating Survey, it offers a rating review scale of 1 to 5 stars.

Simple Survey Popup Properties

The Simple Survey Popup component has the following properties:

  • Component Id - Sets the name of the Simple Survey Popup component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.

    Pro Tip: It is a best practice to use only letters without spaces for the Component Id. Symbols, spaces, and numbers are not recommended.
  • Feedback Data Store URL - Enter the Feedback Data Store URL. Connecting to the Data Store Feature will allow Studio Users to see the responses to the survey. 

Survey Prompt

  • Text - Enter the text as it should appear in the Survey Prompt. 
  • Font Size (px) - Enter the font size for the text in pixels. 
  • Text Color - Sets the color of the Font Text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Bold Text - Toggles on or off for the text to appear bold. Default is set to off. 
  • Italic Text - Toggles on or off for the text to appear italicized. Default is set to off. 
  • Alignment - Choose the alignment of the text. Choose between Left, Right, or Center.

Popup Styling

  • Background Color - Sets the color of the Background. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Text Color - Sets the color of the text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Font Size (px) - Enter the font size for the text in pixels.
  • Bold Text - Toggles on or off for the text to appear bold. Default is set to off. 
  • Italic Text - Toggles on or off for the text to appear italicized. Default is set to off. 
  • Custom Positive Icon - Upload a .SVG to display a Custom Positive Icon. If no image is uploaded the default is set to a smiley face. 
  • Positive Icon Color - Sets the color of the Positive Icon. There are two ways to set the Positive Icon Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Custom Neutral Icon - Upload a .SVG to display a Custom Neutral Icon. If no image is uploaded the default is set to a neutral face.
  • Neutral Icon Color - Sets the color of the Neutral Icon. There are two ways to set the Neutral Icon Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Custom Negative Icon - Upload a .SVG to display a Custom Positive Icon. If no image is uploaded the default is set to a frowning face. 
  • Negative Icon Color - Sets the color of the Negative Icon. There are two ways to set the Negative Icon Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.

Question

  • Text - Enter the text as it should appear in the question. 

Comment

  • Instruction Text - Enter the text as it should appear as instructions for the comment. 
  • Comment Placeholder Text - Enter the text as it should appear in the comment as a placeholder. 
  • Button Text - Enter the text as it should appear in the button. 
  • Bold Button Text - Toggles on or off for the Button Text to appear bold. Default is set to off.
  • Button Fill Color - Sets the Button Fill color. There are two ways to set the Button Fill Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Button Text Color - Sets the Button Text color. There are two ways to set the Button Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Skip - Toggles on or off to allow app users to skip entering a comment. Default is set to off. 
  • Skip Text - Enter the text as it should appear in the Skip Button. 
  • Skip Color - Sets the Skip color. There are two ways to set the Skip Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.

Confirmation

  • Confirmation Message - Enter the text as it should appear in the Confirmation Message. 

Simple Survey Popup Placement Settings

The Placement Settings for the Component sets which column(s) the Component will appear. Each Page of the app can have a different number of columns that are set in the Layout section of the Page Settings. The following Placement settings are available for this Component:

  • Column Start - Sets the column where the Component will start. 
  • Column Span - Sets how many columns the Component will span. 
  • Padding - Sets how much space will appear on the top, bottom, left, and right of the Component. When building a Page with multiple Components, the Padding will determine the overall spacing between Components.
  • Display Mode - Sets how the Component is displayed. If Both is selected, the Component will always show. Both are the default option. If Optimal is selected, the Component will only show if the browser supports the app. The main supported browsers are Chrome and Safari. If Degraded is selected, the Component will only show if the browser does not support the app. The main unsupported browser is Internet Explorer.

Still need help? Contact Us Contact Us