👉 To learn how to create a custom widget, refer to How to create a Custom Widget.
👉 To know the list of propname fields, refer to List of propname Fields and Their Specificities.
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 |
Specific information about custom widgets
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.
Glossary
|
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 |
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. 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. This page enables you several actions detailed in this paragraph. |
For more information about custom widgets, refer to the FAQ.
Example: Wheel of fortune
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.
Description
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.
Underlying wheel mechanisms
Discounts distribution and selectionÂ
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
Visual construction of the wheelÂ
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.
Parameters
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.
CTA set up
| Name | Impact on the wheel |
| Button's text | Label display in the middle of the wheel, used as the button to launch the selection |
Discount set up
| 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 |
Wheel behavior
| Name | Impact on the wheel |
| Wheel rotation time | Duration (in seconds) of wheel rotation |
Wheel styling
| 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 |