> For the complete documentation index, see [llms.txt](https://user.netmera.com/netmera-user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://user.netmera.com/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/widget-elements-reference.md). # 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.

User goal	Recommended elements
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.

Input type	Behavior
Date	Accepts `DD/MM/YYYY` and rejects invalid calendar dates.
Email	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](/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/spin-to-win-campaigns.md).

Spin to Win configuration — Configure each wheel slice and its reward.

### 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**. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://user.netmera.com/netmera-user-guide/omnichannel-engagement/widgets/build-a-widget/widget-elements-reference.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.