# Creating and managing 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
* The presets you have created
* 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.

![](https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-722589fa26bcf2cdce85350fd2b72ece1f19ebcd%2F9350a1d5094e110be1c68dc1888d0304.png?alt=media)

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 (for some widgets)
* Use directly a widget or a custom widget by creating a campaign
* Create and edit custom widgets
* Duplicate custom widgets in your account or on another one you’ve accessed

## Discovery of the Widgets library <a href="#id-01gns5359gnxrgy87h0va5he3e" id="id-01gns5359gnxrgy87h0va5he3e"></a>

3 tabs are available in the widget library:

![](https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-2a3147089270c7344eaf4b11bc8e3ea5af28ee24%2F503b6df53bd27b8bc0c5033cb85762f4.png?alt=media)

* **AB Tasty Widgets**: native AB Tasty widgets, sorted alphabetically
* **Presets:** the widget configurations you have saved
* **Your widgets:** the custom widgets you’ve created in your account and those that have been shared with you

Widgets are divided into 4 different categories: Dynamic content, Promotional content, Special and Tracking.\
You can filter widgets by categories using the multiselect dropdown:

![](https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-7bafeff5273a89864debf70a1d4743415426ea70%2F87a23fad19765d5cf3f475a15f13fdbc.png?alt=media)

By default, all categories are selected.

### Extended view of the cards <a href="#id-01gns5359htwabfa9a2naz1fw3" id="id-01gns5359htwabfa9a2naz1fw3"></a>

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
* Description
* The CTA to create a campaign started to the widget

### Actions on the widgets <a href="#id-01gns5359hr0e9n7v412hake6w" id="id-01gns5359hr0e9n7v412hake6w"></a>

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

#### Edition (for custom widgets and presets) <a href="#h_01j52xmv409yq9pnbvtpmfpdwe" id="h_01j52xmv409yq9pnbvtpmfpdwe"></a>

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

#### Duplication (for custom widgets only) <a href="#h_01j52xn2f56h8acr66x89rr85r" id="h_01j52xn2f56h8acr66x89rr85r"></a>

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

#### Deletion (for custom widgets and presets) <a href="#h_01j52xn9pp5f1hscwpfj089620" id="h_01j52xn9pp5f1hscwpfj089620"></a>

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 in campaigns <a href="#h_01j52xnkczeyvxsppt1hx7pw53" id="h_01j52xnkczeyvxsppt1hx7pw53"></a>

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

## Widget Presets <a href="#id-01h4zz9j1es1t129ztdfxtmkex" id="id-01h4zz9j1es1t129ztdfxtmkex"></a>

The primary purpose of Widget Presets is to enhance your workflow by providing a convenient way to reuse successful widget configurations. Imagine being able to take a widget that performed exceptionally well in one campaign and effortlessly apply it to another campaign, achieving consistent results. Additionally, Widget Presets allow you to leverage widgets specifically designed for personalization within similar contexts. For example, you can reuse a widget tailored for a specific event in a subsequent event of the same nature, or apply a similar campaign for a different type of event.

By utilizing the Widget Presets feature, you have the ability to curate your own library of widgets, tailored to your unique needs and use cases. This empowers you to industrialize successful widget configurations, saving time and effort in recreating them from scratch. With Widget Presets, you can streamline your campaign management, optimize your workflow, and significantly increase efficiency.

### Using a preset <a href="#id-01h4zz9j1e9r8ajvk7hjvpb1jq" id="id-01h4zz9j1e9r8ajvk7hjvpb1jq"></a>

You have the opportunity to leverage presets directly from the Widget Library in your account. This functionality is similar to how you use standard widgets. Within the Widget Library, you'll find a dedicated "Presets" tab that provides a comprehensive list of all the available presets in your account.

Inside the "Presets" tab, each preset is presented as a card, featuring a "Use" button.

![](https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-08a8d3b1e32e6d0a082974ff07c1ae326facd5f7%2F9fbd48bf9a59a1e3ff59df06bc60b354.png?alt=media)

Clicking the "Use" button triggers a lightweight campaign creation assistant. This assistant prompts you to specify the campaign type, provide a name, and enter a URL.

![](https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-033f429a8ecd7c7fc3c0d7b75aaeecbe7dddcf3f%2Fee74a6ccd0584528305fbcba3e1477bd.png?alt=media)

Once you provide these details, the campaign is instantly created, and you are seamlessly redirected to the visual editor.

In the visual editor, you'll find a variation of the specified URL that includes the selected preset. The widget configurator is automatically opened, allowing you to start customizing and fine-tuning the widget configuration based on the chosen preset.

You can also use a preset from the visual editor, refer to [Widgets configuration in the visual editor](https://docs.abtasty.com/~/revisions/qwC2vgJ0JzjAiTAzF6Mb/web-experimentation-and-personalization/editors-and-widget/list-of-widgets/widgets-configuration-in-the-visual-editor).

### Deleting a preset <a href="#id-01j1qgep2527vde34hxgy8tm5y" id="id-01j1qgep2527vde34hxgy8tm5y"></a>

Deleting a preset is straightforward within the Widget Gallery. For each preset, you'll find a management menu accessed through the ellipsis icon ("..."). This menu provides various options, including the ability to delete presets.

To delete a preset, simply access the management menu for the desired preset and select the delete option. This will remove the preset from your account.

![](https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-6f21f420210722aed485d90e8f68a33e09765aef%2Fa1b45b67616a1731b8784fd4535ca094.png?alt=media)

Similar to what has been described earlier, when you delete a preset, it does not remove the configurations of widgets that were initialized using that preset. The deletion only affects the preset itself, ensuring that existing widgets retain their customized settings.

## Custom Widgets <a href="#id-01j1qgnc8e2wtpdqzde4a8yq2z" id="id-01j1qgnc8e2wtpdqzde4a8yq2z"></a>

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.

👉 To learn how to create a custom widget, refer to [How to create a Custom Widget](https://docs.abtasty.com/~/revisions/qwC2vgJ0JzjAiTAzF6Mb/assets-library/widget-library/how-to-create-a-custom-widget).

👉 For more information about Custom Widgets (options, usage, parameters, examples, ...) refer to, refer to [Custom Widgets](https://docs.abtasty.com/~/revisions/qwC2vgJ0JzjAiTAzF6Mb/web-experimentation-and-personalization/editors-and-widget/list-of-widgets/custom-widget).

### Using a custom widget in a campaign <a href="#id-01gns5359jfg63x6thbmqchn5k" id="id-01gns5359jfg63x6thbmqchn5k"></a>

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 <a href="#id-01gns5359jaqn4jxv8ry398mkh" id="id-01gns5359jaqn4jxv8ry398mkh"></a>

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, go to the ***Your widgets*** tab, select the desired custom widget and click ***Add***.

![](https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2Fgit-blob-a2810637ef6c266ed9a2215c23e050cc7f64e90e%2F2e61ffd1b41550e1281c9d48cb94e92d.png?alt=media)

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

On hovering over each custom widget, you’ll get 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.

For more information, refer to [Configuring and using widgets in the visual editor](https://docs.abtasty.com/~/revisions/qwC2vgJ0JzjAiTAzF6Mb/web-experimentation-and-personalization/editors-and-widget/list-of-widgets/widgets-configuration-in-the-visual-editor).
