Custom widgets: Global usage and information
Last updated
Was this helpful?
Last updated
Was this helpful?
👉 To learn how to create a custom widget, refer to .
👉 To know the list of propname fields, refer to .
A custom widget is a pre-set piece of code that has been totally created with the custom widget creation flow. The generated code is hosted on our servers, but is not deployed on our platform. AB Tasty doesn’t own this piece of code, it only stores it for future purposes and usages: the client owns their development, deployment, sale, and maintenance.
The configurator is fully customizable by the client. The creation flow enables to create as many configuration options as wished.
As the feature belongs to the client, AB Tasty is not responsible for the quality of the code, the potential bugs, and the maintenance of the code inside the custom widget.
Differences between widgets and Custom widgets:
Widget
Custom widget
Created by
AB Tasty
The client
Owned and maintained by
AB Tasty
The client
Editor configurator is editable
NO
YES
Widget is customizable by the end-user in the editor
YES
YES
Widget is duplicable in the account or though accounts
NO
YES
Widget is editable in the widget library
NO
YES if no live campaign using it
Widget can be pinned as favorite
YES
YES
The client can start a campaign from the widget
YES
YES
The client can create a new widget
NO
YES
The custom widget feature enables you to create custom widget templates to be used in the editor of one or several campaigns, without necessarily changing the code.
A template can be reused in the same account or in different accounts, and you can add one or several identical custom widgets to the same campaign, variation or subtest, within the visual editor of your campaign.
Using custom widgets lets you scale up when duplicating (to brands, markets, languages...) a performing campaign and makes a recurring campaign easier to adapt.
Using a custom widget can be useful when:
You want to set up a string of messages (pop-ins, banners, overlays, etc.) for your marketers to use systematically the same layout (to preserve UI, design system, and consistency through your website).
You want to share and spread this previous work on your different AB Tasty accounts (because you manage several websites or several language versions of your website through different AB Tasty accounts).
You plan to reuse the custom widget in another account, campaign, variation, or in the future for recurring campaigns, instead of duplicating your campaign.
You want to reduce the back-and-forth communication on low-value edits (colors, font sizes, images...) between your digital marketing team and your design team.
You want to keep control over time.
Examples of custom widgets you can create:
Pop-in or other kinds of promotional widget with a specific behavior/ UI path you can’t find in the AB Tasty widget library.
A complex tracker, such as “event sent each time the user puts an item in their basket, then goes to the basket page, then comes back to the homepage”.
Reusable buttons, bullet point lists, popovers, product tours, carousels, and so on: every single element which already exists in your design system and will be usable in the AB Tasty visual editor as an infinite source of small custom widgets to create design system friendly campaigns.
custom widget
Piece of code configured to be used in one or several campaigns. It serves as a base for a new personal widget and must contain the minimum code to make the widget work.
Form
Custom widgets form set-up in the user documentation
Asset
Section where you can upload some files (images, video, sound) to link your custom widget with
Widgets library
The widgets Library is a page you can access by clicking on the main navigation left panel. The library displays the entire list of all the native Tasty widgets, and all the custom widgets, you’ve already created plus the ones AB Tasty or an agency have offered to your account.
This page enables you several actions detailed in this paragraph.
The Wheel of Fortune is a custom widget designed and provided by AB Tasty. Its purpose is to showcase the capabilities of custom widgets by offering a visually rich and configurable experience. The AB Tasty team has carefully designed this widget and it can be used on your website as is. However, it is important to note that this widget is primarily intended for demonstration purposes and may not receive future functional updates like other widgets offered by the platform.
When the target page is loaded, the Wheel of Fortune displays a wheel with several segments offering discounts to visitors. The central circle displays text encouraging the visitor to spin the wheel. A click on it will trigger the rotation of the wheel, which will eventually stop and select a discount segment, updating the display to show a text describing the discount and generating a promo code.
A closing button is provided for visitors to close the wheel without playing.
The underlying mechanisms of the wheel include the distribution and selection of discounts. The user can configure the range of discounts they want to offer by defining the minimum and maximum discounts, the number of segments, and the chances of getting the minimum and maximum discounts. The widget then creates the segments based on these parameters, allocating discounts and probabilities to each o
The visual construction of the wheel is based on the user's setup and is composed of segments that alternate between two different styles: "Main Segments" and "Accent Segments." These styles have no impact on the discounts offered.
A set of parameter allows users to adapt the set up and the look of the wheel to their websites. The following tables describe all the available configurations.
Name
Impact on the wheel
Button's text
Label display in the middle of the wheel, used as the button to launch the selection
Name
Impact on the wheel
Segments numbers
Define the number of segments they want to display on the wheel (note: this number must be even to produce a valid wheel rendering)
Segments text pattern
Define a pattern that will be applied to generate the label of each segment. The keyword !variable! can be used to display, inside the pattern, the discount that will be offered by the segment. The default pattern !variable!% off ! will generate, for instance, for a segment offering a 30% discount, 30% off!
Promo code pattern
Let user defines the way to generate a promo code. As for the segment pattern, it's possible to use the keyword !variable! to include the discount into the promo code. The promo code will be displayed at the end of the wheel turns.
Min discount value
Define the minimum discount that could be offered to the visitor (this will be the minimum value display in the wheel's segments)
Max discount value
Define the maximum discount that could be offered to the visitor (this will be the maximum value display in the wheel's segments)
Chances in percent for min value
Chances (in percent) that the minimum discount is offered to the visitor
Chances in percent of max value
Chances (in percent) that the maximum discount is offered to the visitor
Name
Impact on the wheel
Wheel rotation time
Duration (in seconds) of wheel rotation
Name
Impact on the wheel
Wheel dimensions
Size (in pixels) of the wheel
Main segments color
Color used to fill the main segments
Accent segments color
Color used to fill the accent segments
Font color
Color used for the text in the main segments
Accent font color
Color used for the text in the accent segments
Button font color
Color used for the text of the center button
Button background font color
Color used to fill the center button
Wheel border width
Number of pixel used to draw the wheel border
Wheel border color
or Color used to draw the wheel border
Close button size
Size of the close button
Close button color
Color used to draw the close button
Section where you can code a form that will be displayed in the visual editor of a campaign to let the non-technical users customize custom widgets without using code.
For more information about custom widgets, refer to the