Customize Components

Netmera’s widget builder provides a wide range of customization options to help you design engaging and interactive experiences for your users. You can combine different elements, adjust their styles, and manage multiple views using the drag-and-drop dashboard.

Template Selection

After completing the Extend Widget section, you can:

• Choose a pre-designed template,

• Edit and save one of your existing widgets, or

• Start from a blank template to build a new design.

View Settings

Before customizing elements, define your widget’s general appearance:

• Width

• Border Radius

• Background Color

• Border Width

• Border Color

These settings determine how the widget will be displayed on your website.

Adding a Widget Element

• On the left side of the screen, you’ll find all available widget elements (18 options).

• To add an element:

  • Drag and drop it into your widget, or

  • Use the + button and choose Add to Left or Add to Right.

Multi-View Widgets

• View 1 represents the first page of your widget.

• To create multi-step widgets, click Add View and design additional steps for users to complete.

Text Customizations

When you add a Text element, you can format it using the customization panel on the right. Options include:

• Bold, italic, underline

• Font types and contrast

• Alignment (left, center, right)

• Hyperlinks and more

These features allow you to align text with your branding and campaign goals.

Color Settings

Each element offers Background Color customization:

• Use the color palette to choose from preset options.

• B = Black, W = White.

• Enter a custom HEX/RGB color code to match your brand colors.

• Enable the Gradient option to create gradient backgrounds for elements.

Further Visual Settings

The customization panel on the right provides advanced design options for all elements, including:

• Spacing

• Border

• Corners

• Text

• Shadow

• Display

• Position

• Effects

These options allow you to fine-tune every detail of your widget’s design.

Tip

All elements in the Netmera panel are customizable. You can add, remove, and edit elements to ensure your widgets are appealing, functional, and aligned with your brand.

• Use the toolbar on the right (Box, Spacing, Border, etc.) for general adjustments.

• For element-specific settings, select an element and click on Settings in the top-right corner of the element block.

Assigning Actions to Elements

• Click Actions can be assigned to Buttons and Images.

• To assign an action, click on the button or image and select the ⚡ (lightning icon) from the toolbar.

Identifier Codes

• Each widget element has an Identifier Code that is critical for data analysis and click action configuration.

• Best practice: Assign distinct and meaningful identifier codes for each element to avoid confusion when tracking data.

• To update an identifier, simply click on the code and edit it as needed.

Elements

Text

The Text element allows you to display customized text inside your widget. You can adjust the font, size, color, and formatting (bold, italic, underline). Alignment options include left, center, or right. Text is commonly used for displaying messages, instructions, or descriptions.

• Customization Options: Bold, italic, underline, font types, contrast, alignment, hyperlinks, and more.

• Additional Option: You can also add an image to the text block to enhance visual appeal.

Image

The Image element allows you to upload and display images in your widget, making them more engaging and potentially improving conversion rates.

• Customization Options: Choose an image, edit it, or assign click actions. Alignment controls are available in the right-side toolbar.

• Image Size: Flexible; there are no strict requirements. Widgets can adapt to various resolutions and dimensions.

• Performance Tip: Keep image files under 1 MB for best display and compatibility.

• Full-Width Tip: For full-width visuals, set the widget size equal to the image size.

Input

The Input element enables users to enter information, such as text, email, or password.

• Customization Options: Width, height, font, color, and placeholder text.

• Attributes Panel: Use the Attributes menu to define placeholder text or set validation rules.

Button

The Button element is used to trigger actions within your widget (e.g., form submission, redirection, or event triggers).

• Customization Options: Edit button color, size, shape, text, and icons.

• Templates: Predefined button styles are available in the Templates menu.

Radio Button

The Radio Button element presents a set of options where users can select only one choice.

• Customization Options: Size, color, spacing, and labels.

• Click Action Conditions: Use the identifier code (top-right corner) to define conditions. For example, a button can be configured to act only if a specific radio option is selected.

Button Group

The Button Group element allows you to display multiple buttons together, offering a choice selection.

• Customization Options: Layout, spacing, color, size, shape, text, and icons.

• Usage: Users can select a single option, making it suitable for scenarios where only one response is valid.

Text Area

The Text Area element provides a larger input box for longer responses, such as comments or feedback.

• Customization Options: Size, font, color, and placeholder text.

• Attributes Panel: Use the Attributes menu to customize placeholder content.

Checkbox

The Checkbox element lets users select one or more options from a list.

• Customization Options: Size, color, spacing, and labels.

• Click Action Conditions: Similar to radio buttons, checkboxes can be linked to conditions using their identifier codes.

Select Box

The Select Box element (dropdown menu) presents a list of options where only one can be selected.

• Customization Options: Size, color, dropdown style, labels, and values.

• Options Panel: Use the Options menu to enter display names and values for tracking.

GIF

The GIF element allows you to add animated GIFs for visual engagement.

• Customization Options: Background, spacing, and position.

• Settings: Add a GIF URL under GIF Module → Settings.

Video

The Video element embeds multimedia content directly into your widget. You can upload videos or embed from platforms like YouTube and Vimeo.

• Customization Options: Size, aspect ratio, autoplay, and playback controls.

• Settings: Add a video URL under Video Module → Settings.

Rating

The Rating element enables users to provide feedback using a star-based rating scale.

• Customization Options: Number of stars, appearance, and scale range.

• Usage: Commonly applied to collect quick feedback on products or services.

Score Rating

The Score Rating element allows users to rate on a numeric scale.

• Customization Options: Scale range, appearance, labels, and feedback text.

• Settings: Accessible under Score Rating → Settings. Options include title, description, like/dislike text, button labels, etc.

Click on Score Rating > Settings inside of your widget to customize your element. You may enter a title, description, liked text, disliked text, button text, and more. An example of how to fill in your score rating element is given below;

Spin to Win

The Spin to Win element introduces an interactive and gamified experience within your widget. Users can spin a wheel or dial to receive random rewards or outcomes. This element is commonly used in promotional campaigns, contests, and gamified interactions to increase engagement and excitement. It is supported on both mobile and web platforms.

Customize Wheel

The Spin to Win widget is highly customizable, allowing you to edit all visual and text elements to fit your design and branding.

Within this step, you will configure the Slices (segments) of the wheel:

• Slice Name Provide a clear and distinctive name for each slice to easily manage different segments.

• Win Result Define the text shown when users land on this slice. Engaging messages help maximize excitement.

• Coupon Code Assign a unique coupon code to the slice. Each code can correspond to a prize, discount, or reward. (Refer to Coupon Code Lists for uploading coupon lists.)

• Link – Add a link or deep link (optional). When the slice is selected, the relevant link will be shown to user.

• Gravity (Probability) Set the likelihood of each slice appearing.

  • Total gravity across all slices must equal 100%.

  • If no percentage is defined, gravity values are distributed equally.

  • Example: 4 slices without set values → each slice has 25% gravity.

  • If gravity is left blank, the system automatically adjusts to maintain 100%.

• Out-of-Coupon Message Define a fallback message shown when no coupons are left for a slice. Example: “We’re sorry, but there are no available coupon codes for this slice at the moment.”

Success Screen Design

Layout Options

• Modal Header – Title shown at the top of the success screen (e.g., Congratulations!).

• Header Font Size – Adjust the size of the modal header.

• Modal Background – Choose a background color or gradient for the modal.

Links & Actions

• Add a Link – Option to add a CTA link on the success screen.

• Deeplink Type – Define how links behave (e.g., one per slice).

• CTA Type – Choose CTA style (e.g., Button).

• Manage App – Enable if the link should trigger app-specific behavior.

• Link Color and Text Options – Customize CTA button colors and labels.

Messages & Text

• Win Result Text – Text displayed when a slice wins. If not defined, the default text is shown.

• Win Result Font Size – Adjust the size of the win result text.

• Click to Copy Text – Message displayed above the coupon code copy button (e.g., Click to copy code).

• If there is no coupon code left – Fallback message for when a slice runs out of coupons (e.g., “There are no available coupon codes for this slice. Please try again later.”).

Countdown

The Countdown allows you to create a real-time timer that counts down to a specific target date and time. It can be customized with labels, colors, styles, and different display modes to match your campaign or widget design.

Identifier

• Each countdown block has a unique Module Identifier (e.g., yKLIHro).

• This identifier is automatically generated and used internally to track and reference the countdown.

Time Unit Labels

You can customize the labels shown under each time unit (Day, Hour, Minute, Second).

• Default values: Day, Hour, Min, Sec.

• These fields accept custom text (e.g., in another language or using abbreviations).

• Example: change Day to Gün or D.

Target Date

• Set the exact end date and time for your countdown.

• Format: DD.MM.YYYY, HH:mm (24-hour clock).

• Example: 19.09.2025, 10:37.

• The countdown will run until this target date is reached.

Countdown Finish Text

• Define the message that appears once the countdown ends.

• Example: Time’s up!, Offer expired, or Coming soon.

• This text replaces the timer automatically when the countdown reaches zero.

Colors & Style

You can adjust the visual style of the countdown to fit your design.

• Background – Set the timer box background color.

• Font – Set the text color for numbers and labels.

• Progress Bar – Select the color used when “Under 5 minutes mode” is active.

Preview Modes

You can see the previews of the two modes when you check the checkboxes:

1. Under 5 minutes mode

   • Preview the mode when fewer than 5 minutes remain.

   • Shows a progress bar and displays only Minutes:Seconds for urgency.

2. Finished mode

   • Preview the mode that displays only the end text (from Countdown Finish Text field).

Copy Button

The Copy Button allows you to display and copy coupon codes with customizable button styles and messages. This feature is often used in promotional campaigns where users can reveal and copy a discount code with a single click.

Hidden Button Preview

Visible Button Preview

Identifier

• Each button has a unique Module Identifier (e.g., NWvLZot).

• This identifier is automatically generated and used internally to track and reference the countdown.

Coupon Code

• Select the coupon code that will be revealed and copied. Create your Coupon Codes on Setting > Coupon Code Lists before selecting them here.

Button Type

Defines how the coupon code is displayed to the user:

• Visible: The coupon code is shown directly on the button.

• Hidden (with pull tab): The code is hidden behind a button (e.g., “Reveal Code”) and only becomes visible when the user clicks.

Background Colors

• Background Color: Sets the main button color.

• Pull Tab Color: Defines the color of the reveal/pull tab section.

• Gradient Option: Enable Use Gradient Background to create a two-tone effect.

Colors

• Text Color: Sets the coupon text color.

• Pull Tab Text Color: Sets the text color inside the pull tab.

• Success Message Color: Defines the background color of the confirmation message.

Border Radius

• Adjusts the corner roundness of the button.

Button Texts

• Reveal Button Text: The initial text shown before the code is revealed (default: Reveal Code).

• Success Message Text: The message displayed after the code has been successfully copied (default: Copied!).

Preview

The Preview panel shows the entire button flow:

1. Reveal state (user sees Reveal Code).

2. Coupon state (code becomes visible).

3. Success state (confirmation message, e.g., Copied!).

Slider Feedback

The Slider Feedback element allows users to provide input on a continuous scale by dragging a slider along a predefined range. It is ideal for capturing opinions, preferences, or sentiment levels in a more dynamic way.

• Customization Options: Slider appearance, text, box design, spacing, and layout.

• Usage: Commonly applied for surveys, satisfaction tracking, or measuring intensity (e.g., “How likely are you to recommend us?”).

Emoji Feedback

The Emoji Feedback element enables users to express their emotions or opinions using emojis or emoticons. Users simply select the emoji that best matches their feelings.

• Customization Options: Emoji sets, size, spacing, and alignment.

• Usage: Often added to feedback widgets to create a casual and friendly experience, compared to formal rating scales.

Story

The Story element provides a multimedia-rich format for presenting narratives, tutorials, or interactive content inside your widget. It supports thumbnails, images, and videos, and can be enhanced with other interactive elements for engagement.

• Customization Options: Story title, icon, and story URLs. You can add multiple URLs to build a sequence of content.

• Usage: Ideal for guiding users through step-by-step experiences, feature walkthroughs, or promotional storytelling.

To create your story module, add a story title and add icon and story URL. Continue adding more URL's to your storyline to create an engaging storytelling experience.

Q&A

The Q&A element allows users to ask questions and receive answers within the widget. It can be used for customer support, FAQ sections, or interactive discussions.

• Customization Options: Layout, text formatting, and data collection for both questions and answers.

• Usage: Useful for enabling direct engagement and providing real-time responses to user queries.