Guide: Widget Library and Custom Widgets

The widget library page gathers all the pieces of content you can enjoy in the AB Tasty platform to create your campaign (test or personalization): 

• All the widgets AB Tasty has developed
• All the custom widgets you’ve created thanks to our custom widget creation flow
• All the custom widgets AB Tasty has set-up for you and has offered you. 

This library can be used for several purposes: 

• Get all your pieces of content - widgets in a unique place
• Be inspired thanks to our client’s use cases (coming soon)
• Use directly a widget or a custom widget by creating a campaign starting from the content in 4 clicks (coming soon)
• Choose your favorite to organize your library
• Creation and edition actions of the custom widgets
• Duplication of the custom widgets in your account or on another one you’ve accessed 

Discovery of the Widgets library

Main display rules

When you land on the page, the widgets are sorted alphabetically, and widgets and custom widgets are mixed:

To locate you, you can keep in mind the following color scheme: 

• AB Tasty native widgets are in green
• Your custom widgets are in orange
• The other custom widgets, developed and offered by AB Tasty are in blue

Sorting and filtering

You can use the following options to customize the view.

Using favorite feature

On hovering on each widget card, a star appears. If you click on it, the widget will be pinned at the top of the library. This way, you can create a personal view linked to your user identifier and retrieve your favorites easily. 

If you click again on the yellow star, the widget will take its initial place in the list. 

NB: this configuration is persistent when you come back on the page during the session or a new one in the future.

Using filters shortcuts

We have displayed 3 tabs to help you to find easier each type of widgets: 

Natively, “All” is selected by default. 

• Widgets: will display only the native AB Tasty widgets
• My Custom widgets: will display only the custom widgets you’ve created in your account
• Other Custom widgets: will display only the custom widgets AB Tasty has created and has offered to you

Clicking back on “All” will erase the previous filter. 

These filters are not cumulative. 

If you quit the page and come back, the configuration won’t be saved.

Using advanced filters

On the right, you can use the CTA “Filter”. 

Natively, the filter view is off by default. 

This CTA will trigger a filter panel where you'll be able to choose several options to filter your widgets. 

You can select only 1 option per section, but you can use several sections at the same time.

Section 1: “Widgets labels”

• You can select only 1 option within the list
• The labels are the ones presented in the cards and depends on the labels you’ve previously created in your custom widgets

Use case:you can filter the widgets on the label “Pormotion” to be inspired with content that are specific to this purpose on a website.

Section 2: “Activity”

You can select only 1 option within the list

• Active: will select all the widgets that are currently used in a live campaign of your account 
• Inactive: will select all the widgets that are not currently used in a live campaign of your account 

Section 3: “Type of widgets”

You can select only 1 option in the list.

This filter has the same effect than the filter shortcut.

• Widgets: will display only the native AB Tasty widgets
• My Custom widgets: will display only the custom widgets you’ve created in your account
• Other Custom widgets: will display only the custom widgets AB Tasty has created and has offered to you

Selecting items in filters

Once selected, the item goes in the upper section “X filters selected”

Clicking on the cross cancels everything

Clicking on OK will close the panel and filters the content of the library according to the choices. 

When using the filter panel, the shortcut filters are deactivated.

Once filtered, the Filter button turns with the number of filters used inside.

To reset a filter, click again in the CTA and reset the setup by clicking on “Reset”.

If you quit the page and come back, the configuration won’t be saved.

Widgets cards structure

The widgets and custom widgets are presented thanks to cards where you will find different kind of information and actions. 

Information about the widgets 

The cards are presented with the following elements: 

• The background

• For widgets: the main cover that represents the widget

• For custom widgets: AB Tasty displays a default orange cover. You can change this cover by editing the custom widget.

• The “tag” above the background

• For widgets: always AB Tasty as the widget library belongs to AB Tasty, it’s always in green

• For custom widgets: the name of the account owner of the custom widget, it’s always in orange

• For other custom widgets: always AB Tasty as the widget library belongs to AB Tasty, it’s always in blue

• The name of the widget

If it’s too long, a tooltip is displayed on hover to reveal the entire name

• The label

• For widgets: it’s fixed and chosen by AB Tasty regarding the advantages and purposes of each widget

• For custom widgets: the name of the account owner of the custom widget, it’s always in orange

• The activity

• Active: means that the widget is used in a live/ live in QA campaign in the account
• Inactive: means that the widget is not used in a live/ live in QA campaign in the account

Actions on the widgets 

On hover over the widgets cards, you’ll discover several different options: 

• Edition: for custom widgets only

You can enter the creation flow of the custom widget to edit it.
If the custom widget is used in a live campaign, the picto is deactivated

• Duplication: for custom widgets only

If you click on it you’ll trigger the following pop in: 

In this case, you can:

• Keep the option “Current account” to duplicate the custom widget on your current library. This is a good workaround to edit a custom widget which is currently used in a live/ live in QA campaign.
• Select another account to duplicate the custom widget in another account you have access to. The newly created custom widget in the other account will totally belong to the new account.

Then you can update the name of the custom widget before clicking on “Duplicating”.

• Trash: for custom widgets only

You can trash any custom widget.

this action is definitive.

If the custom widget is used in a live campaign, the picto is deactivated.

• Use it (soon)

This option triggers the short campaign creation flow. You’ll be able to create a new campaign (test o personalization) starting from the widget.

Extended view of the cards 

If you click on the card of a widget, you’ll trigger an extended view to give you more information about the widget such as: 

• Inspirational content for each AB tasty widget with a use case when a client has shared it with us (coming soon)
• Documentation link
• The CTA to create a campaign started to the widget

Custom widgets

What’s a custom widget? 

Differences between widgets and custom widgets

A widget is a pre-set piece of code AB Tasty has created which comes with its own Widget Configurator. These widgets belong to AB Tasty: the company owns their development, deployment, sale, and maintenance. 

The configurator is not customizable by itself. As the feature belongs to AB Tasty, it’s not possible to add options to configure something which is not planned. If you’d like to submit an improvement request, please use our Feedback board. 

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. 

To sum-up: 

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 sub-test, 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

For more information about custom widgets, refer to the FAQ.

Creating a new custom widget

Creation flow

From the Widgets library  page, click Create a custom widget and fill in the following information:

Main information

• Custom widget name: give a clear name to easily understand what is inside and to retrieve it within the custom widget library. Each template must have a unique name, but not too long to be able to see it entirely.  (E.g. “Pop-in news”). 
• Description (optional): you can use this section to be more specific about the goal of the custom widget.  (E.g. “To promote newsletter and collect emails - new branding”. This description will be also visible in the widget library in the editor and on the extended view in the widget library. 
• Label (optional): the label is displayed on the widget card to enable you to sort them and use the filters. We’re providing a native list of labels such as Promotion but you can also create your own label by clicking on the drop-down, typing your label, and clicking on ENTER. The new label will be visible in the future label choices.
• Add image (optional): the image is displayed on the widget card as a cover, it’s useful to identify your custom widgets in one look. You can upload your image or drag and drop it from your files.

Configuration

• JavaScript code section: enter your JS snippet to inject your custom widget on your page.
• CSS code section: enter your CSS code to customize the UI of your custom widget.
• HTML code section: enter your additional HTML code to enrich your content.
• Form code section: declare your objects following the rules explained in the right panel. The objective is to create a specific form that will be usable in the visual editor when a user will add a custom widget to his campaign. This way, the user will be able to change parameters very easily. To get more information about the form structure, please refer to our dev portal article or our specific article in the user documentation. 
• Assets section:upload assets (images, video, sound) that will be automatically hosted on our server. 

Preview of your custom widget 

Next to each code box, an eye appears on hover. 

Click on it to open a new tab and preview your code in a sandbox. 

Saving your custom widget 

You have 2 Save buttons on the page: 

• Save enables you to save your work, but not quit the creation flow interface

• Save and quit enables you to save your work and quit the creation flow interface (coming soon)

Using a custom widget in a campaign

Once you have created your own custom widget from the custom widget page of the platform, you can use it directly in the editor of any type of campaign (test, patch, or personalization). 

There are 2 ways to do it: 

• By creating a campaign the classic way on the dashboard then open the editor and adding it
• By clicking on the use it CTA directly on hover on the custom widget in the widget Library (soon)

Adding your custom widget in the visual editor of an existing campaign

To use an existing custom widget template in a campaign, go to the visual editor of your campaign, click Add widgets from the right sidebar, select the desired widget and click Add widget.

The library that appears is more or less the same as you have on the Widget library page. 

On hovering over each widget, you’ll get the description of each widget: 

• For AB Tasty Widgets: the description AB Tasty provides
• For Custom widgets: the description you’ve set up in your custom widget creation flow (optional)

Once you have added your custom widget to your campaign, a left panel (custom widget configurator) is displayed and you can adapt/customize it to match specific needs.

Editing your custom widget 

The custom widget configurator includes 3 different tabs:

The Form tab

This tab enables you to change CSS parameters (such as a color or wording) easily by editing specific fields.  

These fields have been configured on the custom widget set-up page. All pre-set-up fields are available in the form tab

The Code tab

This tab enables you to retrieve the code that has been configured in the custom widget template and to adapt it. You can change anything you want in the following code areas: 

• Javascript
• CSS (e.g. changing a color)
• HTML (e.g. changing wording)
• Form

It can be useful to rework on your custom widget with the ability to see directly the effects on your changes in the editor (preview on your website) versus our preview option in the creation flow that executes the custom widget in a sandbox.

The Assets tab

This tab is not available when you open your custom widget configurator for the first time. 

You can see the number of assets added to the custom widget template next to the tab. 

First, you must save your custom widget in the editor by clicking the Save button on the bottom right, and reopening the custom widget configurator from the history panel on the right of the editor.

Then, you will be able to access the Asset options and add some assets and/or delete the existing ones. 

Saving your custom widget 

Once your rework is over, you have 2 possibilities to save your custom widget:

• To use the edited/ customized custom widget in your current campaign only: click Apply.
  The custom widget will be applied to the campaign with all the changes you’ve done.
  
  

  These changes are not recorded in the origin custom widget in your library. To save this new version of the custom widget as a new one: click "Save as a new custom widget"

  A new custom widget based on the original template including your latest modifications will be added to the custom widget template library. This action also applies the custom widget to your current campaign.
  
  The new version of your custom widget won’t replace the one you used to create it.
  All the changes are recorded in the new custom widget, except those which have been performed thanks to the form.

The original custom widget template can’t be overwritten in the editor. This way, live campaigns using this custom widget can’t be compromised. 

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

Discount set up

Wheel behaviour

Wheel styling

FAQ about custom widgets

What is a custom widget?

A custom widget template is a piece of code (it can include JavaScript, CSS and HTML) configured to be used in one or several campaigns. It serves as a base for a custom widget and must contain the minimum code to make a custom widget work. Custom widget templates can be created and managed from the Widgets library of the platform. 

When to use a custom widget?

Using a custom widget can be useful in the following cases:

1. 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 though your website).
2. 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).
3. You plan to reuse the custom widget in another account, campaign, variation, or in the future recurring campaigns, instead of duplicating your campaign.
4. 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.
5. You want to keep control over time.

What can a custom widget be used for?

Here is a non-exhaustive list of custom widgets you can create: 

• Pop-in or another kind 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.

Can I nest custom widgets?

Yes. For example, you may need to create a collapsible block using a custom widget.

You may also want to create a carousel custom widget and a button custom widget.

If each of these custom widgets is freely disposable (through the "form" or JavaScript code), you can also nest them together.

Can I enjoy custom widgets between accounts? 

For the moment, it's not possible to import a custom widget from one account to another directly from the editor. The account that owns the custom widget needs to duplicate it to the new account first.

What is the difference between widgets and custom widgets?

The widgets are pieces of code you can edit in the editor thanks to the Widget Configurator. 

They are created and maintained by AB Tasty.

For more information about widgets, refer to our documentation.

Maintenance of template custom widgets

In case of a bug or bad display of custom widgets, AB Tasty Maintenance won’t be available. Ab Tasty maintains only the free custom widgets that are available in every AB Tasty account and the AB Tasty widgets of course.