Widget elements reference
Widgets are composed of views and elements. A view represents a step or screen in the widget, while elements provide the content, input fields, actions, feedback controls, or promotional interactions within that view.
When building a widget, start with the goal of each view and then add only the elements required to complete that goal. Configure the visual appearance in the layout editor and define interactions such as navigation, validation, submission, and rewards through the relevant element settings.
For the complete editor workflow, see Design Widget Layout. For button and image interactions and validation rules, see Configure Widget Actions and Validation.
Plan the Widget
Start with the User Goal
Each view should have one clear purpose. For example, a view can:
Present information or media.
Collect information from the user.
Ask the user to make a choice.
Capture feedback.
Let the user continue, dismiss the widget, or claim an offer.
Present a promotional or gamified experience.
Choose elements according to the intended interaction.
Present content
Text, Image, GIF, Video, Story
Collect information
Input, Text Area
Ask for a choice
Radio Button, Checkbox, Select Box, Button Group
Submit or navigate
Button, Image
Capture feedback
Rating, Score Rating, Slider Feedback, Emoji Feedback, Q&A
Offer a reward
Copy Button, Countdown, Spin to Win
Keep each view focused. Adding unnecessary elements can make the widget harder to understand and use, particularly on mobile devices.
Add Content and Media
Use content and media elements to explain the message, establish visual hierarchy, or present information in a sequence.
Text
Text is used for headings, descriptions, labels, instructions, disclaimers, and supporting information.
Configure the font, size, alignment, emphasis, and links from the editor.
Keep the main heading short and use additional text blocks for supporting information. Use typography consistently to establish a clear hierarchy.
Image
Image is used for hero visuals, campaign banners, illustrations, and other visual content. Images can also be configured as interactive elements when users need to click them.
Upload or replace the image from the editor, then configure its alignment and click behavior.
For effective layouts:
Use one main image when possible instead of several competing visuals.
Keep the image close to the available widget width.
Add a click action only when the image is clearly intended to be interactive.
Preview the widget on mobile to check for cropping and positioning issues.
Keep image files under 1 MB for better performance.
GIF
GIF is useful for short product highlights, visual demonstrations, urgency cues, and lightweight campaign animations.
Configure the GIF URL, spacing, and position.
Keep animations short and easy to understand. Do not place information that users must understand only inside the animation. Leave sufficient space around the GIF so that movement does not overwhelm the rest of the layout.
Video
Video is used for product demonstrations, trailers, feature explanations, and other video-based content. Add a direct MP4 URL to load and play the video within the widget.
Configure:
Video URL
Size
Aspect ratio
Autoplay
Playback controls
Choose the aspect ratio before positioning nearby elements. Use short videos where possible and avoid autoplay unless it is necessary for the experience.
Keep the primary call to action visible when the video is displayed alongside other elements.
Story
Story presents a sequence of images or videos inside the widget. It can be used for product walkthroughs, feature highlights, and short campaign experiences.
Configure the following settings:
Title: Sets the story title.
Transition (ms): Defines how long each slide is displayed before moving to the next one. The minimum value is 500 ms.
Icon URL: Sets the icon displayed for the story.
Image: Enter the image URL for each story slide.
Link: Optionally add a link to make a story slide clickable.
Keep each story item focused on one message. Increase the duration when users need more time to read or understand the content. Use clear titles and icons to help users understand the sequence.
Collect User Information
Use form elements when users need to provide structured information or written responses.
Input
Input collects short user information such as names, email addresses, phone numbers, passwords, dates, and other text. Configure the input type, placeholder, required state, and validation rules.
Choose the input type according to the expected response. The selected type can affect both keyboard behavior and validation.
Date
Accepts DD/MM/YYYY and rejects invalid calendar dates.
Validates the entered value as the user types.
Password
Masks the entered value.
Phone
Opens the numeric keyboard on mobile devices.
Text
Accepts general text input.
A required field must contain a valid value before the related submission action can continue.
Text Area
Text Area is used for longer written responses such as comments, open-ended feedback, and support requests.
Configure the placeholder, size, font, and color.
Use a sufficiently large field for comfortable typing. The placeholder should explain what type of response is expected. Add validation when a response is required.
Radio Button
Radio Button allows users to select one option from a set of choices. It is suitable for yes/no questions, single-choice surveys, and preference selection.
Configure the labels, spacing, and identifier-based conditions.
Keep the number of options small and make each label understandable without additional explanation. Assign an identifier when subsequent actions or conditions depend on the selected value.
Checkbox
Checkbox allows users to select multiple options. It can be used for consent choices, feature preferences, and multi-select questions.
Configure the labels, spacing, and identifier-based conditions.
Use checkboxes only when more than one answer can be valid. Keep labels consistent and configure conditions when subsequent button behavior depends on the selected options.
Select Box
Select Box provides a compact way to display a longer list of options, such as countries, categories, branches, or other predefined values.
Configure the option labels and values, dropdown styling, and tracked values.
Use user-friendly labels for the options and consistent tracked values for reporting. For a small number of choices, Radio Button or Button Group can provide a more direct experience.
Button Group
Button Group presents multiple choices as visually prominent buttons. It is suitable for compact single-choice interactions such as Yes / No / Maybe.
Configure the layout, spacing, text, and icons.
Keep the number of options low and use short labels. Leave sufficient space between buttons to prevent accidental taps on mobile devices.
Capture Feedback
Use feedback elements to collect ratings, scores, sentiment, and open responses.
Rating
Rating collects quick star-based feedback and can be used for satisfaction prompts, reviews, and simple sentiment surveys.
Configure the number of stars, appearance, and scale range.
Pair the rating with a short question that clearly explains what users are evaluating. Rating can also be used as the first step of a feedback flow, where different actions are triggered according to the selected score.
Score Rating
Use Score Rating to collect numeric feedback, such as satisfaction scores, NPS-style ratings, or post-interaction surveys.
Configure the following settings:
Title: Add the question or heading displayed above the rating.
Description: Add supporting information or instructions.
Rating Scale: Set the minimum and maximum values, default selection, selected-state colors, and click animation.
Rating Appearance: Configure the font, size, background, text, and border styles for unselected rating options.
Hover Effects: Define the background, text, and border styles shown when users hover over a rating option.
Labels & Submit Button: Configure labels such as liked/disliked text, info tag styling, and the submit button text and appearance.
Success Message: Define the title and description displayed after the rating is submitted.
Use the minimum and maximum values to define the rating range. Set a default selection when a preselected value is appropriate. Use the selected and hover states to clearly distinguish interactive and selected options.
Slider Feedback
Slider Feedback allows users to provide a value along a continuous scale. It is suitable for sentiment, intensity, preference, and similar measurements.
Configure the appearance, text, spacing, and layout.
Use a clear question and make both ends of the scale understandable. Leave sufficient space around the slider, particularly when the widget is used on mobile devices.
Emoji Feedback
Emoji Feedback provides a lightweight way to capture sentiment, particularly in mobile-first experiences and casual surveys.
Configure the emoji set, size, spacing, and optional labels.
Emoji Type: Select the emojis displayed in the feedback scale.
Show Labels: Enable labels to provide additional context for the emoji scale.
Left Label: Define the label shown at the beginning of the scale.
Right Label: Define the label shown at the end of the scale.
Emojis: Configure the emojis displayed in each position. Click an emoji slot to open the picker and select an emoji from the available Unicode categories.
The selected emojis can represent different levels of sentiment, for example from negative to positive. Use labels when the meaning of the scale is not immediately clear.
Note: Unicode emojis are rendered using the device's native emoji set. Their appearance may therefore vary across iOS, Android, Windows, and other platforms.
Q&A
Q&A can be used for guided help, interactive FAQs, and conversational support flows.
Configure the layout, text formatting, and answer structure.
Keep questions short and use formatting to clearly distinguish questions from answers. Avoid placing too many Q&A blocks in a single widget.
Offer Rewards and Gamification
Use promotional elements to create reward-focused experiences, time-limited offers, and gamified campaigns.
Copy Button
Copy Button is designed for coupon campaigns and reveal-and-copy experiences.
Configure:
Visible or hidden mode
Reveal text
Copied message
Color
Border radius
Coupon list
Coupon lists are managed under Coupon Code Lists.
Coupon display modes
Visible mode displays the coupon code immediately.
Hidden mode keeps the code hidden until the user interacts with the button. The configured reveal text is displayed before the code is revealed.
Customize the success message so users know that the coupon has been copied successfully.
Coupon availability
Coupon codes can have an expiry date and time. Expired coupons are not displayed to end users.
If all coupons connected to the related campaign have expired, the campaign is considered finished.
Countdown
Countdown displays the remaining time until a defined date and time. It can be used for flash sales, limited-time offers, launch reminders, and time-based rewards.
Configure:
Target date and time
Labels
Finish text
Under-five-minutes mode
Colors
Set the target date first, then customize the labels according to the language and context of the widget. Define a clear finish message for when the countdown reaches zero. Preview both the active and finished states before saving.
Spin to Win
Spin to Win presents a prize wheel that users can spin to receive a defined outcome. It can be used for gamified promotions, rewards, and coupon distribution.
Configure:
Configure these parts of the wheel:
Slice names: labels shown for each reward.
Outcome text: the message shown after a spin.
Coupons or links: the reward delivered for each outcome.
Gravity: the probability assigned to each slice.
Out-of-coupon message: the message shown when rewards are unavailable.
Success screen: the view users see after their result.
Give every slice a clear name and outcome message. Assign a coupon when rewards are redeemable. Assign a link when rewards take users elsewhere.
For campaign setup, publishing, rewards, and reporting, see Spin to Win campaigns.
Complete the Widget
Before saving the widget, review each view and its interactions.
Check that each view has one clear goal.
Confirm that only the required elements are included.
Assign identifiers to interactive elements where they are required for conditions or actions.
Configure button and image click behavior.
Configure validation for form inputs.
Verify coupon and reward settings.
Preview the widget on both mobile and desktop layouts.
Check the active and completed states of time-based elements such as Countdown.
Verify that text, images, buttons, and interactive controls remain readable and usable on smaller screens.
For the editor workflow, see Design Widget Layout.
For click actions, navigation, and validation, see Configure Widget Actions and Validation.
Last updated
Was this helpful?