How to Customize Widgets
Last updated
Last updated
Important Note:
Click actions can be assigned to "Buttons" and "Images" and they can be assigned by clicking on the button/image and navigating to the ⚡ (lightning) icon.
Important Note:
Your "Identifier" code is crucial when you are analyzing your data or assigning click actions to your buttons. Therefore, while you are creating a new widget, pay attention to attributing distinguishable "Identifier" codes to your elements and buttons. You may just simple click on the code and rewrite your own name on it.
After completing Extend Widget part, you may choose a pre-designed template or one of your widgets to edit and save or a blank template to create a new template.
When you first start customizing your widget, you may decide on Width, Border Radius, Background Color, Border Width and Border Color on "View Settings" and decide on how your widget will look on your website.
Important Note:
View 1 represents the first page you will introduce to your users, if you aim to publish a widget with more than a single page, you may add views to your widget by clicking "Add View" and create further steps you want your users to take to complete the widget.
On the left side of the screen, Elements show you the options you might choose for your widget. There are eighteen elements that you might choose from to customize your widget.
When you decide on your widget element which is suitable for your aim, by drag and drop method, you may easily choose your element and drag and drop it into your widget. You may also add elements by clicking + sign and choose your element with options "Add to Left" or "Add to Right".
When you add a "Text" to your widget, you may customize it with the options that you will see on the right side of the page. That page includes bold, italics, underlined, font types, contrast, alignment, hyperlinks and more. You may customize your text in line with your design, branding and widget aim by using these features on your Netmera panel.
When you choose an element, you will see "Background Color" on the right side of the page. You may change background color of your buttons or any element background.
If you click on the box below Background Color, you will see a color palette. B box below represents black color, while W box represents color white. If you have a custom color code, you may use it in text box below and create widgets representing your brand colors. Next to color palette box, you may see Gradient color option where you may create a gradient background for your elements.
For all your elements, the customization box on the right corner of the page will be available for your design. Aside from general customizations, if you need further adjustments on your design, you may use this design tool with "Spacing, Border, Text, Corners, Shadow, Display, Position, and Effects" options.
When customizing your widget, you have a wide range of elements at your disposal to create an engaging and interactive experience for your website visitors with Netmera's drag and drop dashboard. These elements allow you to capture their attention, collect valuable data, and encourage user participation.
Here are eighteen elements you can incorporate into your widget using Netmera Widget Dashboard which are;
Tip:
You may customize all the elements supported in Netmera Panel. You may add and remove elements from your widget and make it appealing and convenient for your users. You may customize all your widgets using the tool bar on the right corner of your screen where you see "box, spacing, border" and more. For special customization for different elements, after you add the element in your widget; you will see "Settings" button on the right corner of the elements.
The text element allows you to add customized text to your widget. You can specify the font, size, color, and formatting options such as bold or italic. Additionally, you can align the text to the left, center, or right. This element is useful for displaying messages, instructions, descriptions, or any other text content you want to convey to your users. You may also add an image to your text to make it more appealing for your users.
When you add a "Text" to your widget, you may customize it with the options that you will see on the right side of the page. That page includes bold, italics, underlined, font types, contrast, alignment, hyperlinks and more. You may customize your text in line with your design, branding and widget aim by using these features on your Netmera panel.
With the image element, you can upload and display images within your widget. Adding images will make your widgets more appealing to your users and may possible result in better conversion rates.
When you add an image element on your widget, you will see 3 options appear on image. You may "choose an image", "edit", or "add click actions". Also, you may align your image using the tool bar on the right side of the screen.
Determining the ideal image size for widgets is a flexible process as there are no strict requirements as your widgets can be customized to fit various resolutions and dimensions. You may use the appropriate image size widgets can be prepared with resolutions adjusted to the desired dimensions.
Hint About Widget Visual Sizes: If you encounter issues with your widget displays, ensure that the file uploaded to your widget design is below 1 MB to optimize performance and compatibility.
Tips for Full-Width Image Widgets:
If you prefer a full-width display, aligning the widget size with the image size can be a suitable approach by setting the widget size equal to the image size. This flexibility ensures that you can tailor widget images to your specific needs.
The input element enables you to include text input fields in your widget, allowing users to enter their information. You can specify the input type, such as text, email, or password, and set validation rules to ensure the entered data meets specific criteria. Customization options include setting the width, height, font, color, and placeholder text for the input field.
You may add an Input element in your widget. If you want to change the written context in the Input box, you may choose "Attributes" as shown in the image below and next to Placeholder, write your own text to be shown to your users.
Buttons are essential for triggering actions within your widget. You can customize the button's appearance by choosing "Edit" option and customize the color, size, and shape. Additionally, you can add text or icons to the button and define the action it performs, such as submitting a form, redirecting to another page, or initiating a specific event. For further information on how to add an action to your button, please check our notes on Adding Click Action.
Additionally, when you click on "Edit" option you can see "Templates" and choose a button for your widget from a wide variety of options.
The radio button element allows you to present users with a set of options where they can select only one choice. You can customize the appearance of the radio buttons, including the size, color, and spacing between options. Each option can have a label associated with it to provide clear descriptions.
By using the identifier code on the right top corner of the page, you may edit your Click Action conditions for your buttons. For example, you may add an button under your radio buttons, and while adding a click action to your button; you may choose that radio button identifier as a condition.
With the button group element, you can display multiple buttons together, offering users a selection of choices. You have control over the layout and styling of the button group, including the spacing between buttons and the overall design. Users can select a single option from the group, making it suitable for scenarios where only one choice is allowed.
You can customize the button's appearance by choosing "Edit" option and customize the color, size, and shape. Additionally, you can add text or icons to the button and define the action it performs, such as submitting a form, redirecting to another page, or initiating a specific event.
The text area element provides users with a larger text input area compared to a regular input field. It is useful when you expect users to enter longer responses, comments, or feedback. You can customize the size, font, color, and other styling options for the text area, providing a comfortable and visually appealing space for users to input their text.
You may add an Input element in your widget. If you want to change the written context in the Input box, you may choose "Attributes" as shown in the image below and next to Placeholder, write your own text to be shown to your users.
Checkbox elements allow users to select one or more options from a list of choices. You can define the layout and appearance of the checkboxes, including the size, color, and spacing between options. Users can toggle the checkboxes to indicate their selections, making it suitable for scenarios where multiple choices can be made.
Similar to Radio Button, by using the identifier code on the right top corner of the page, you may include your checkbox responses to your Click Action conditions.
The select box element, also known as a dropdown menu, presents users with a list of options from which they can choose a single selection. You can customize the appearance of the select box, including the size, color, and style of the dropdown arrow. Each option can have a label and a corresponding value, making it versatile for various selection scenarios.
To customize the written context of your dropdown menu, click on "Options" on design widget menu and fill in Names and Values that you will use to track your data with.
With the GIF element, you can incorporate animated GIFs into your widget to add visual interest and captivate users' attention. Customization options include adjusting the background, spacing, position of the GIF, etc. to ensure it fits seamlessly within your widget.
To add a GIF to your GIF element, click on "GIF Module" and choose "Settings". Then add your GIF URL to and click OK.
The video element allows you to embed videos directly into your widget, enabling users to watch and interact with multimedia content. You can upload video files or embed videos from popular hosting platforms like YouTube or Vimeo. Customization options include setting the video size, aspect ratio, autoplay settings, and controlling the playback.
To add a Video, simply drag and drop the video element, then click on "Video Module" and choose "Settings". Then add your Video URL to and click OK.
The rating element allows users to provide a numerical rating or feedback based on a specified scale. You can customize the number of rating stars, their appearance, and the scale range. This element is commonly used for gathering feedback, opinions, or ratings on products, services, or user experiences.
The score rating element is similar to the rating element, but it allows users to provide a score or rating on a numeric scale instead of using stars. You can define the range of the scale, customize the appearance of the rating indicators, and specify the feedback text or labels associated with minimum and maximum scores.
In order to customize your score rating, when you add the element to your widget, click on "Score Rating" and then click "Settings" inside of your widget. Then you may customize your element according to your needs. 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;
The spin to win element adds an interactive and engaging feature to your widget. Users can spin a wheel or dial and receive random rewards or outcomes. You can customize the design, prizes, and probabilities of winning to create an exciting and interactive experience for your users. This element is often used in promotional campaigns, contests, or gamified interactions. The "Spin to Win" widget is a versatile feature that can be utilized both on mobile and web platforms.
Usage Frequency:
Users can spin the wheel once per day. After 24 hours have elapsed, they can spin it again.
One of the standout features of the Spin to Win widget is its high degree of customization. You have the power to edit and personalize all the components and text elements within the widget, allowing you to tailor it to your specific requirements and branding. This flexibility ensures that the Spin to Win experience aligns seamlessly with your unique objectives and design preferences.
Within this section, you have the capability to create and configure Slices that will appear on the wheel. To do so, follow these steps:
Slice Name
Provide a distinctive name for the Slice you wish to add. This name helps you easily identify and manage different segments of the Spin wheel.
Win Result
Specify the text that will be displayed to users when they win this particular Slice. Crafting engaging and enticing Win Result text can enhance user excitement.
Coupon Code
Assign a unique coupon code to this Slice. These coupon codes serve as rewards for users when they land on this segment of the wheel. Each code can be linked to specific prizes or discounts. Visit Coupon Code Lists on how to upload your coupon lists on Netmera.
Gravity
In the "Gravity" section, you have the option to adjust the probability of each segment appearing on the wheel. The total gravity value must always sum up to 100%. If a user doesn't specify a percentage, the gravity values will be distributed equally among the segments. For instance, if there are 4 segments and no percentages are set, each segment will have a 25% gravity. Additionally, if Gravity is not specified for a Slice, it will be automatically calculated to maintain the 100% total.
If there is no coupon code left:
This is a message that your users will see if you have no avaiable coupons for that slice. This message ensures transparency and helps manage user expectations. You can display a message like the following: "We're sorry, but there are no available coupon codes for this slice at the moment."
During this step, you have the opportunity to customize the design of the success screen that your users will see upon winning. You can adjust header details, font size, font color, and background color to align with your brand's aesthetic. Additionally, the "Click to Copy Text" button simplifies the process for users to easily save their codes, enhancing their overall experience.
The slider feedback element enables users to provide feedback or input on a continuous scale by dragging a slider along a predefined range. You can customize the appearance with the slider. This element is ideal for capturing subjective opinions, preferences, or sentiment analysis. You may edit Text, Box, Spacing, and more in the tool bar on the right side of the screen.
The emoji feedback element allows users to express their emotions or opinions using a set of emojis or emoticons. Users can select an emoji that best represents their feelings or feedback. You can add an emoji feedback to your feedback widget to make it seem more friendly and casual than a score rating or rating button, which might be more suitable for formal businesses.
The story element provides a multimedia-rich format for presenting narratives, tutorials, or interactive content within your widget. It supports thumbnails, videos and images, however; you may add other interactive elements to create an engaging storytelling experience. You can customize the layout within the story to guide users through the content.
To create your story module, add a story title and add icon and story url. Then, you may continue adding more URL's to your storyline to create an engaging storytelling experience.
The Q&A element enables users to ask questions and receive answers within the widget. Users can submit their queries, and you can provide responses or engage in a conversation. This element is useful for customer support, FAQ sections, or interactive discussions. You can customize the layout, formatting, collect data for questions or answers to ensure a smooth Q&A experience.
