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. 

Screenshot_2022-11-24_at_02.11.58.png

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 access t

 

Discovery of the Widgets library

 

Main display rules

When you land on the page, the widgets are sorted alphabetically, 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

mceclip2.png

 

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.

mceclip3.png

 

Using filters shortcuts

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

Natively, “All” is selected by default. 

mceclip4.png

  • 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.

 

mceclip5.png

 

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

mceclip7.png


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: 

 

 

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 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

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 widget form set-up in our dev portal

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 thisparagraph

 

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. 

At this stage, we can’t open your website and simulate the custom widget on it.  There are some chances that your custom widget is not executed if you have declared the presence of a certain element of your website’s structure which doesn’t exist in the sandbox. We’re currently working on another solution to avoid this problem.

 

Good to know 💡

You can also save your widget, add it in a campaign and work on a new version of your custom widget directly in the editor, as the preview will be automatic as your website will be loaded. There is an option to save your widget as the new one from the editor.

 

 

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.

 

mceclip8.png

 

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. 

 

Good to know 💡

If you need to add several custom widgets to a variation, or to other variations/subtests, you won’t be able to duplicate them. You will have to use the variation duplication option, then do the needed changes in your second variation.

 

 

 

 

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. 

Was this article helpful?

/