Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Explore these articles for a deeper understanding of the steps needed to create a successful campaign that aligns with your objectives. Each step is tailored to provide control and clarity, allowing users to create, manage, and confirm campaigns effortlessly and efficiently. With AB Tasty, crafting a campaign is simple, whether you're setting up experiments or personalizations for your website or application.
The dashboard also allows you to filter historical data metrics by date.
To apply a filter, select any of the predefined periods from the top menu of your dashboard:
Past 12 months: data from the past 12 completed months + current month as a result
Past 6 months: data from the past 6 completed months + current month as a result
Past 3 months: data from the past 3 completed months + current month as a result
Past 30 days: data from the past 30 completed days + current day as a result
Past 7 days: data from the past 7 completed days + current day as a result
Let's say today is April 4th, 2024, and you want to analyze historical data for the past 3 months.
The Date Range will be automatically set to: January 1st, 2024 - April 4th, 2024 as it provides data from January 1st, 2024, up to April 4th, 2024. It encompasses the entire previous three-month period, including data up to the current date.
In need of inspiration or looking to accelerate your ideation process? The Ideas generator Evi Ideas is a feature designed to help you generate experiment ideas using AI.
If you are in need of inspiration or looking to accelerate your ideation process Evi Ideas is here to help. Evi Ideas is a feature designed to help you generate experiment ideas using AI.
Using generative AI CRO Experimentation Expert Agent, continuously improved to provide best practices, UX guidance, and cognitive bias considerations, Ideas Generator, provide relevant and actionable test ideas from an image or Gif.
Here’s how it works:
In your campaign dashboard, click on Create.
On the campaign type selection board, select the Need new experimentation ideas? tile.
Upload a screenshot or a GIF of the page you’d like to optimize.
Provide a bit of context to help Evi Ideas tailor its suggestions to your needs.
e.g.: I would like only ideas that enable me to reduce my bounce rate
Once ideas are generated, click on Create a campaign from this idea.
The tool will auto-fill the first step of the campaign creation flow with the experiment name and hypothesis.
The Editor in AB Tasty is your main workspace for creating and customizing website experiences—no coding required.
With the Visual Editor, you can simply click on elements on your page to modify text, images, styles, and more, all in real time.
For those who prefer more control, the Code Editor lets you directly edit CSS and JavaScript.
Features like responsive mode, navigation mode, and a library of widgets make it easy to tailor your site for any device or scenario.
Whether you’re making quick changes or building complex variations, the editor is designed to be intuitive and accessible for all users.
Curious to learn more? Explore our articles to help you get the most out of your editing experience
Once in edit mode, select any metric card by clicking and dragging it from the left panel to the right-hand layout.
Click “Save configuration” to save your personal dashboard view.
To delete a metric card:
Hover any metric card and click the upper-right corner cross.
Click “Save configuration” to save your personal dashboard view.
To change the order of the cards, simply click and drag any card to your desired position.
Discover our widgets
Elevate your website’s functionality and engagement effortlessly with AB Tasty's widgets.
Release note
Looking for a page full of features to help you work smarter and faster? This is where you’ll always find what’s new with AB Tasty.
Statistical Calculator
Want to achieve statistical reliability quickly? Use our A/B Test Calculator and Minimum Detectable Effect Calculator.
Blog
Explore our articles, e-books, case studies, and webinar replays to maximize your use of AB Tasty.








AB Tasty enables you to create several types of campaign according to the hypothesis you want to test:
You can create a campaign from different locations of the platform.
The main way to create a campaign is from the campaign list page:
Go to the or page.
Hover over the Create button.
Click on the type of campaign you want to create: You will be redirected to the .
To create a Split Test, you must create an A/B test and activate the redirection option in the visual editor.
If you're not sure which type of campaign to choose, you can use our .
You can create a campaign from a specific widget. In this case, the chosen widget will be added by default in the editor. To do so, apply the following steps:
Go to Library > Widgets.
Select the widget from which you want to create a campaign and click Use.
Select the campaign type and enter a name and URL.
Click Go to the editor: The URL of the page you specified will display in the visual editor with the widget already added and ready to be configured.
You can also create a campaign from a widget preset (Presets tab) or from a custom widget (Your widgets tab) by following the same procedure.
You can create a campaign from a specific segment (or trigger). In this case, the segment (or trigger) will be automatically selected in the who section (or how section) of the Targeting step of your campaign. To do so, apply the following step:
Go to Library > Segments (or Triggers).
Select the segment/trigger from which you want to create a campaign and click the + icon at the end of the line.
Select the type of campaign: personalization or test.
From the , select the campaign type and enter a name and URL.
AB Tasty has released a Chrome extension to create a campaign directly from your website page.
To download the Chrome extension, please follow this .
For more information about the AB Tasty Chrome extension, please visit our specific section about the Chrome extension in the
This option is useful for loading logged pages.
If you want to duplicate an existing campaign and create a new one (and potentially modify some elements of the original test setup), you can use the Duplicate option in the campaign list.
Click on the three dots on the right side of the campaign line you want to duplicate.
Click on the first option: Duplicate. The duplication modal opens. From here, you can:
Modify the account where you want to create your new campaign.
Modify the name of your new campaign (otherwise the name will be the same with
For more information about duplication and transformation use cases, please refer to article.
The uplift card shows the uplift generated by your AB Tasty campaigns on a given month. This information can be analyzed from the ROI dashboard which provides a global overview of your CRO activity and enables you to monitor your campaign’s performance over time.
The uplift is the incremental revenue that would have been generated if the visitors who saw the original version had instead seen the variation, it can be related to the profit made on your campaign. On the opposite, if the uplift is negative, you will find it under the Secured gain section of the ROI dashboard. It corresponds to the revenue you have saved by not implementing an underperforming variation on production.
The Uplift card is only available for accounts where at least one transaction tag is implemented.
If you have several transaction tags implemented on your account, you need to choose the one you want to display data for via the drop-down list.
The transaction name coincides with the name assigned to the transaction as it appears in the list of goals to configure and on the reporting. The selection is saved for all the next sessions and displayed by default when you come back to the dashboard. You can still select another transaction name at any time. You can hide the transaction tags you don’t use anymore, for more information, refer to .
Uplift = Total Revenue (variation) - Potential Income (original version) The uplift card on campaign dashboards shows:
The uplift number: the sum of the uplift generated by your tests and personalizations campaigns separately, for a specific account in the current month and on a specific transaction tag you have selected beforehand. This number is based on the currency you have set up in your account settings.
A graph with the uplift evolution over the past months. On hover, you can see the uplift history over the past 6 months. Data is updated on a daily basis and shows the data up to day-1.
The graph is not displayed when no uplift has been generated for at least two months. To see more data, click the uplift number to be redirected to the .
Here are the main reasons why you may not see any uplift on your campaign dashboard:
The uplift calculation is only available on accounts where at least one transaction tag is implemented. To do so, please refer to .
The uplift calculation is made on a daily basis and aggregated every month. If you have just implemented your transaction tag, the uplift metric will be updated as soon as your campaigns will start collecting data.
If you are looking at the uplift when the month has just started, it probably means that your campaigns’ data have not been aggregated yet and taken into account in the uplift calculation.
You have one or several campaigns that have been running for several days and/or months, but you don’t see any uplift generated. It probably means that your campaigns would not make any profit. Depending on the type of campaign, you can consider the following solutions: For test campaigns:
It can mean that the uplift is negative on your running campaigns, your tests have generated secured gain instead.
You may consider reviewing your test hypothesis and change your modifications if necessary.
For personalization campaigns:
You may consider keeping 10% of your visitors on the original version to enable uplift calculation.
The uplift can’t be calculated when no campaigns are live on your account. The uplift metric will be updated as soon as you will launch at least one campaign and that it will start collecting data.
Let’s say your uplift card shows 7.5k for the Transaction affiliation in December 2021.
When clicking the timeframe or “i” icon, you are redirected to the ROI dashboard.
When hovering the graph on December 2021, you can see that the number displayed is equal to the uplift number displayed on the card.
When clicking the transaction tag name, you can switch the transaction tag and display its corresponding uplift.
From the ROI dashboard, to retrieve the uplift value, you must select the exact same transaction tag in case you have several transaction tags implemented. If you select several accounts, this value will be different. For more information on the ROI dashboard, refer to .
Campaign duplication is a way of recreating a new campaign based on a previous one, on the same account or on another account to which you also have access.
Find out more about the duplication use case and what a duplication can do in terms of configuration, please refer to this specific article.
To duplicate a campaign, follow these steps:
Go to the Test or Personalization dashboard and select the campaign you want to duplicate. The duplication process starts from a specific campaign.
To access the duplication feature, click the three dots on the line of the campaign you want to duplicate.
Select the Duplicate option from the list.
This displays a new pop-in.
Choose the destination campaign type: you can either keep the same campaign type (this is what we call an identical duplication) or modify it (this would be a duplication with transformation). Note that A/A tests, Patches, Multipage Patches and Multivariate Tests can only be duplicated in their original campaign types.
Select the content to import to your new campaign. Depending on your previous selection, you may have to select the specific variation/experience/page you want to duplicate (in the case of multiple variations/experience campaigns).
Select the destination account: it can be the same (by default, your current account is pre-selected)as you’re currently using or any other account you have access to. The list only displays those accounts you have access. You can select up to 5 accounts from this list as destination for your duplication.
Optional: Enter a name for your new campaign. By default, your campaign name has the following format: {campaign_original_name_(duplicate)}.
Validate by clicking Duplicate. The new duplicate campaign is displayed in its corresponding dashboard (test or personalization) and is paused by default.
If you want to perform a duplication to more than 5 accounts, you need to repeat this action until you duplicate the campaign to the desired number of accounts (10, 20, or more).
Find out more about the duplication use case and what a duplication can do in terms of configuration, please refer .
Welcome to our interactive demo on "How to Use Our Visual Editor." This hands-on experience will guide you through the features and functionalities of our intuitive editor, helping you create and customize your campaigns with ease. If you prefer a detailed description instead of the demo, feel free to check out our comprehensive article: Visual editor discovery.
A Patch or Multipage Patch consists of modifying:
One or several elements on one page (for example, your homepage, basket page, etc.) or several pages that share the same layout (all your product pages or all your results pages, etc.).
One or several elements on different pages (for example, your homepage, basket page, etc.) or several pages that share a different layout (all your product pages and all your results pages, etc.).
Patching your website means changing a piece of code to correct an error or to push out an important piece of content or information as soon as possible.
The objective of patching is not experimental or personalization, but only to make a very fast change to a page of your site to fix an error or update something urgent. Therefore, you don't have to set up Goals and it does not generate any reporting.
A Multivariate test enables you to test combinations of changes simultaneously on your website. You can change several elements on a page simultaneously (e.g., the color and wording of a CTA) and identify which of the possible combinations performs best according to the goal you wanted to reach (e.g., increasing the number of clicks, the number of pages viewed, decreasing the bounce rate). You can then apply these changes directly to your website. Unlike an A/B test, which involves testing each hypothesis in a different test, a multivariate test allows you to run hypotheses at the same time and to find the best combination of all. The purpose of multivariate tests is to measure the interactive effects between several supposedly independent elements (e.g. page title and visual illustration). A subtest contains variations that will be tested independently across multiple combinations. For example, if your goal is to test a simple CTA, you might want to create three subtests: Color, Shape, Wording, with as many variations of colors, shapes and wordings as necessary. AB Tasty will create all the possible combinations and display them randomly to your traffic.
To learn more about the differences between each type of test, refer to the article. If you don’t know which type of campaign to choose, can help you.
To create a Multivariate test, go to Web Experimentation, click the Create button and select Multivariate Test.
👉 To learn about the different ways to create a campaign, please refer to .
A Multipage Personalization displays a new experience, message, or piece of content on several different pages of your site that don’t share the same layout – for example on the homepage and the basket page. This new experience, message, or piece of content is shown to a specific segment of visitors to your website and you can track its effectiveness in your campaign reportings.
To learn more about the differences between each type of test, refer to the article. If you don’t know which type of campaign to choose, can help you.
To create a multipage personalization, go to Personalization, click the Create button and select Multipage Personalization.
👉 To learn about the different ways to create a campaign, please refer to .
AB Tasty enables you to configure different campaign types designed to meet various optimization and personalization needs. These campaigns can be categorized into two main pillars: experimentation (tests) and personalization.
If you don’t know which type of campaign to choose, our can help you.
A/B testing is an activity that consists of challenging or testing, elements of a website to find out whether an alternative will increase engagement and conversions. A/B testing is also a great way to identify the next innovation worth investing in, or for determining what is minimally viable.
AB Tasty offers several types of testing campaigns with your departure hypothesis and what you want to challenge.
Ally is your virtual assistant – a module that can guide you towards the right type of campaign for your needs. Ally will pose various questions about your objectives, the type of message or version you want to create, the segment you want to target, and so on. This will help you select the best campaign for your specific objectives. It is important to select the right type of campaign for the following reasons:
Reports differ according to the type of campaign, as their purpose is to meet the user’s expectations. In order to create the best campaign insights, you need to choose the right type of campaign to begin with.
Shadow DOM is a key technology used in modern web development to create self-contained components. These components are encapsulated, meaning their structure and styles are isolated from the rest of the webpage. This technology is part of the broader Web Components standard, which also includes Custom Elements and HTML Templates. For non-developers like digital marketers or product managers, understanding Shadow DOM helps explain why some tools or integrations, like AB Tasty, might face challenges when interacting with certain web elements.
Shadow DOM creates a separate mini webpage within a component on a site. This isolated section has its own styles and scripts that don't interfere with the rest of the page. Similarly, external tools or styles on the main page don't affect what's inside the Shadow DOM.
A patch campaign:
is always pushed to all of your audience – you can’t choose a specific segment.
is always pushed to 100% of your traffic.
can’t be analyzed as it does not generate any reporting.
can tell you how many unique visitors have been exposed to the patch (this data is pushed directly to the dashboard).
You can also force your opt-out visitors to see your patch campaigns.
To learn more about the differences between each type of test, refer to the Types of campaigns article. If you don’t know which type of campaign to choose, our virtual assistant Ally can help you.
To create a Patch or Multipage Patch, go to Web Experimentation, click the Create button and select Patch or Multipage Patch.
👉 To learn about the different ways to create a campaign, please refer to How to create a campaign.
The Main Information page is the first step toward your new Patch campaign.
We recommend adding a description to your campaign to add useful information you want to share with your team. For example: “This patch will fix a typo error on product # 447 158”. In the URL field, enter the URL you want to load in the editor.
👉 For more information on how to configure this step, refer to How to set-up Main Information step.
You have two ways to create content for your campaign in AB Tasty:
The visual editor enables you to manage your Patch by adding or removing new variations, creating visual modifications, or adding action tracking (click tracking) to record the performance of the elements you’re about to challenge.
You can’t add trackings because patch campaigns have no reporting and are aimed at following performance.
👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the Visual Editor Guide
The Code Editor enables you to declare your code (JavaScript, CSS) without having to load the Visual Editor. The Code Editor is the best solution for developers who want to save time.
👉 To learn how to use the Code Editor, please read the Code Editor Guide.
By default, a patch is displayed to your whole audience, that’s why you can’t change the WHO section when targeting a patch.
👉 To learn how to configure targeting, please read How to setup a campaign targeting.
The advanced options are not mandatory.
Select a loading method for your campaign.
👉 To learn how to configure Advanced options, please read Campaign flow: Advanced Options.
The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :
- the targeting configuration - the modifications you've made
👉 To learn how to use the QA Assistant, please read QA Mode & QA Assistant.
If you want to launch your A/B Test at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on scheduling.
In AB Tasty, you can display campaigns even if your visitors have not yet given their consent. For patch campaigns, no data is collected but, by default, they are displayed only when the visitor has given their consent. To display patches to all visitors including those who have not yet given their consent, go to Settings > Cookies > Cookie deposit and check the Patch box. For more information, refer to Managing your visitors’ Privacy.
You can create a patch from scratch, for example:
To correct a typographical error
To modify a legal mention
To add a health message
To hide a CTA (e.g.: when experiencing a stock shortage)
To transform a winning test variation into a patch, apply the following steps:
From the dashboard, hover over the test you want to use as a reference for your patch.
Click and Duplicate.
Choose Patch from the first dropdown menu.
Choose the variation you want to push to 100% of your users (the winning one) and validate: Your patch appears in the test dashboard.
Your campaign set-up is imported from the source test but you can add or modify information if needed. Make sure you have a description of your patch campaign.
You can also duplicate the winning variation of a multipage test into a patch. In this case, you must create one patch per page as this type of campaign does not allow you to have several pages.
Shadow Host: The regular webpage element where the Shadow DOM is attached.
Shadow Root: The starting point of the Shadow DOM, holding all the encapsulated content.
Shadow Tree: The internal structure within the Shadow DOM, containing its own elements and styles.
Shadow Boundary: The invisible wall separating the Shadow DOM from the main webpage.
For people working with tools like AB Tasty, understanding Shadow DOM is important because it can:
Prevent Style Conflicts: Styles or scripts in Shadow DOM won’t "leak" onto the main webpage, keeping components visually consistent.
Create Reusable Components: Developers can build pieces of a site that are portable and don’t break when added to different projects.
Introduce Challenges for Tools: Since Shadow DOM hides its content, tools like visual editors or testing platforms may not easily access or modify it, leading to potential workarounds.
While Shadow DOM provides benefits like encapsulation, it can also create some hurdles:
Tool Accessibility: Tools that rely on direct access to webpage content might not work well with Shadow DOM, requiring manual intervention or additional coding.
Performance Considerations: Too many Shadow DOMs can slow down a webpage, especially on complex sites.
Browser Compatibility: Shadow DOM works in most modern browsers, but may face issues in older versions.
If you notice that certain elements on a webpage can’t be modified or styled as expected using your tools, they might be inside a Shadow DOM. Knowing this can help you flag potential issues to developers or adjust your approach when using AB Tasty or similar platforms.
An A/B test enables you to test the performances of a new version of an element on your website (e.g., CTA, header, image, wording). After analyzing the results of your test, you need to decide which version has performed best according to the goal you wanted to reach (e.g., increasing the number of clicks, the number of pages viewed, decreasing the bounce rate). You can then apply these changes directly to your website.
👉 Learn how to configure a A/B Test.
A Multipage Test consists of modifying one element on several pages that don’t share the same layout (e.g. homepage, product pages, and basket page), and measuring if the new user journey variation(s) will be more or less performant than the original.
👉 Learn how to configure a Multipage Test.
Multivariate tests enable you to test combinations of changes simultaneously. You can change several elements on a page simultaneously and identify which of the possible combinations performs best. Unlike an A/B test, which involves testing each hypothesis in a different test, a multivariate test allows you to run hypotheses at the same time and to find the best combination of all. The purpose of multivariate tests is to measure the interactive effects between several supposedly independent elements (e.g. page title and visual illustration).
👉 Learn how to configure a Multivariate Test.
A Patch consists of modifying one or several elements on one page (for example, your homepage, basket page, etc.) or several pages that share the same layout (all your product pages or all your results pages, etc.). Patching your website means changing a piece of code to correct an error or to push out an important piece of content or information as soon as possible.
👉 Learn how to configure a Patch.
A Multipage Patch consists of modifying one or several elements on different pages (for example, your homepage, basket page, etc.) or several pages that share a different layout (all your product pages and all your results pages, etc.).
👉 Learn how to configure a Multipage Patch.
A Split Test consists of redirecting traffic from one or several pages of your website to new versions of these pages that you want to test. Visitor activity on the new pages is measured to evaluate whether they are more or less effective than the original versions of these pages. This type of campaign is similar to a classic A/B test but instead of creating a new variation using AB Tasty’s visual or code editor, the new pages need to be developed on the client side and hosted on your own servers.
👉 Learn how to configure a Split/ Redirection Test.
Personalization is an activity that consists of pushing a specific and relevant message, content, or experience to a specific segment of visitors at the right moment of their user journey on your website.
AB Tasty offers several types of personalization campaigns to address your needs: number and type of pages to personalize, number of alternative experiences for different segments, necessity to prioritize certain messages regarding other ones. The aim of these types of campaigns is mainly to get more conversions on your website, to increase the engagement of your visitors and to enable them to have a powerful, pleasing and long-term experience on your website.
There are 3 types of personalization campaigns available in AB Tasty, that you can configure depending on your target(s) and appropriate page(s).
This type of personalization is relevant if:
You want to display a message to a unique segment E.g., Visitors who have bought a winter coat in the past two months.
You want to display a message on one page only (or the same types of pages) E.g., Displaying a coupon code in a popin on your homepage only.
You can thus display a unique personalized message for a specific segment on a specific page only (or the same type of pages). 👉 Learn how to configure a Simple personalization.
This type of personalization is relevant if:
You want to display a message to a unique segment E.g., Visitors who have bought a winter coat in the past two months.
You want to display a message on several pages (or several types of pages) E.g., A coupon code that will be displayed as a popin on your homepage, as a small banner on your product pages and as a large banner on the cart page.
You can thus display several complementary messages for a specific segment on a user journey on your website. 👉 Learn how to configure a Multipage personalization.
This type of personalization is relevant if:
You want to display several distinct messages for several distinct segments E.g., Visitors who have bought a winter coat in the past two months, visitors who have bought at least once during the past two months and visitors who haven’t bought anything during the past two months.
You want to display a message on one page only (or the same types of pages) E.g., Displaying a coupon code in a popin on your homepage only.
With this advanced type of campaign, you can manage a commercial operation or a global communication by ensuring that a visitor to your website only sees the message they are eligible for (the experience for which they are targeted) or the message which has the highest priority, in the case of overlap, that is to say when a visitor matches more than one target at a time. Thus, it also enables you to display several distinct messages for dedicated segments, and to establish a priority order so that a visitor who matches more than one target and is eligible for more than one message doesn’t see both but only the more relevant one (with the highest priority). 👉 Learn how to configure a Multi-experience personalization.
In Multivariate Tests, you can’t add goals with our standard goals setup step - it is not available for this type of test. Only the transaction goal is available and preselected. This is also why, in the editor, you can't add action trackings or tracking widgets.
The Main Information page is the first step toward your new Multivariate Test campaign.
We recommend establishing a hypothesis of your test according to the following model: If I apply [this change on my webpage] to [this audience], then [it will impact] and enables to enhance [this goal]. And to add it in the hypothesis field.
By default, only one subtest is created, but you can add as many subtests as necessary. For each subtest, enter the URL you want to load in the editor. In most cases, you must enter the same URL for all subtests.
👉 For more information on how to configure this step, refer to How to set-up Main Information step.
You have two ways to create content for your campaign in AB Tasty:
For each subtest, you can add as many variations as you want. For example, if your subtest one is related to the color of a button. In a variation 1, you can test the blue color and in a variation 2, a red color.
👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the Visual Editor Guide
The Code Editor enables you to declare your code (JavaScript, CSS) without having to load the Visual Editor. The Code Editor is the best solution for developers who want to save time. To learn how to use the Code Editor, please read the Code Editor Guide.
👉 To learn how to use the Code Editor, please read the Code Editor Guide.
Be careful when entering the targeted pages (in the Where section) of your test to ensure that it will display correctly on the pages you want to target (e.g. Product pages). To trigger the test only for visitors using a specific device, use the Device criterion in the triggers section. When the Who, How and Where sections have the same configuration for each sub-test, you can use the Replicate targeting option.
👉 To learn how to configure targeting, please read How to setup a campaign targeting.
All users must be tracked. Each percentage of the targeted traffic is assigned to a subtest.
👉 To learn how to configure Traffic allocation, please read Traffic allocation.
The advanced options are not mandatory.
Enable the third party tool(s) you have connected to AB Tasty to send your test data to your tool.
Select a loading method for your campaign.
👉 To learn how to configure Advanced options, please read Campaign flow: Advanced Options.
The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :
- the targeting configuration - the tracking - the modifications you've made
👉 To learn how to use the QA Assistant, please read QA Mode & QA Assistant.
If you want to launch your A/B Test at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on scheduling.
Multivariate tests can be used in the following cases:
🖊️ Action / modification
🎯 Goal(s)
Testing the wording and color of a CTA
Increasing the conversions on a CTA
Testing the layout of several elements on a page (coupon code field, CTA, etc.)
Optimizing the shopping cart

The Main Information page is the first step toward your new campaign.
In the Pages section, enter the URLs you want to load in the editor. You need to include at least 2 pages, as you create a cross-page experience for your targeted segment. For each page (different pages with different layouts), you will create a different message in the editor. These URLs are samples used to load the editor, you will be able to configure your target pages in the targeting section.
👉 For more information on how to configure this step, refer to How to set-up Main Information step.
You have two ways to create content for your campaign in AB Tasty:
You must create (a) message(s) for each Page (by switching your page in the header of the editor). Add JS and/or CSS code, use the visual editor or add a widget from the library to create your personalized message. If it is clickable, always put an action tracking on the element you add or modify in order to follow the performance of your campaign (e.g.: cross to close the popin, CTA in the popin etc.). Don’t forget to put these action trackings on each page.
👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the Visual Editor Guide
The Code Editor enables you to declare your code (JavaScript, CSS) without having to load the Visual Editor. The Code Editor is the best solution for developers who want to save time.
👉 To learn how to use the Code Editor, please read the Code Editor Guide.
Once you’ve created your Personalization, you can pre-configure your future reporting to identify easily the metrics that need to be followed as your primary goal (the one which is potentially the most impacted by your Personalization).
👉 To learn how to configure Goals, please read Campaign flow: Goals step.
WHO section: this is the most important section, where you have to choose the right segment as a function of the message you have created in the editor.
As you personalize the experience of one segment on several pages, your segment should be the same for all the Pages you have configured; you can use the Replicate targeting option to easily reuse the same segment in all pages.
WHERE section: you need to declare the right URLs for each Page of your campaign on which your messages will be visible. The URLs used for the editor step remain samples of the page types you configure in this step. You can switch between Pages by using the dropdown menu.
A visitor doesn't need to see pages in a specific order. For example, they can enter the website from a product page and see Page 2 of the personalization campaign (e.g.: coupon code displayed in a banner). Then, they can go to the homepage and see Page 1 (e.g.: coupon code displayed in a popin).
HOW section: this step is optional. You can add specific session-based triggers, such as a required number of viewed pages before displaying a message, the landing page of the session and so on.
👉 To learn how to configure targeting, please read How to setup a campaign targeting.
By default, Personalization's traffic allocation is set to 100% of your visitors on the modified journey. But we strongly recommend lowering it at 90% or 80% to maintain a minor control and giving you a view of the gain of the campaign. Never change allocation while the campaign is live!
For Multipage Personalization, you have the possibility to change traffic allocation from a subtest to another switching thanks to the dropdown. Be careful as it might not be recommended in most scenario.
👉 To learn how to configure Traffic allocation, please read Traffic allocation.
The advanced options are not mandatory.
Enable the third party tool(s) you have connected to AB Tasty to send your test data to your tool.
Select a loading method for your campaign.
Activate Sequential testing to detect if your experiment will not be successful at all based on the results of your primary goal (if it is based on a Conversion/Transaction Rate).
👉 To learn how to configure Advanced options, please read Campaign flow: Advanced Options.
The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :
- the targeting configuration - the tracking - the modifications you've made
👉 To learn how to use the QA Assistant, please read QA Mode & QA Assistant.
If you want to launch campaign Test at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on scheduling.
Multipage personalizations can be used in the following cases:
💬 Message
🎯 Goal(s)
Displaying a specific discount for your VIP visitors with a popin on the landing page, a fixed banner at the top of the product pages and a disclaimer on the cart page.
For VIP visitors, increasing:
- the conversion rate - the average cart
- the number of pages viewed during a session
Displaying a different product hierarchy regarding the appetence of the visitors: the “rock’n roll lovers” segment will see the category “Rock” as the first tab of the navigation bar, and on the Homepage, the carousel will promote the next big Rock star concert.
For the “rock’n roll lovers” segment:
- Increasing conversion rate on “rock” products
- Increasing click tracking on “rock” products
Displaying a newsletter subscription campaign for visitors who are “non-subscribers”.
with a sticky badge on all pages to enable a 1-click subscription and specific information directly on the product pages (special price for subscribers only) to promote the advantages of the subscription.
Boosting newsletter subscription.
Increasing conversion rate for this segment.

Click Save: Your segment/trigger is already added to the targeting step.










You can exclude specific IP addresses from your campaigns. Once excluded, visitors coming from those addresses won't see your campaigns and will not be included in your campaign reporting. For example, you may want to exclude specific bots, probes, technical teams or agencies with whom you are collaborating.
To exclude IP addresses, go to the Settings > Advanced settings > IP exclusions.
You can exclude a single IP address
Or a range of IP addresses
You can also remove previously set exclusions by clicking on the ‘bin’ icon from the exclusion list.
IP exclusions will automatically exclude the specified IP addresses for each new campaign. Campaigns created before the addition or modification of an IP exclusion will not be affected by the modification.
This feature is in the early adoption phase. To benefit from it, please get in touch with your CSM.
Regarding campaign duplication, the AB Tasty matrix provides actions that are specific to the type of campaign you choose: for example, transforming a winning variation into a temporary patch or transforming an AB test into a multipage test. Therefore, choosing the right type of campaign beforehand will help you optimize your website over the long term.
The final screen of the Virtual Assistant displays a recommendation on the type of campaign you should create, with a definition, a tip, and a link to specific tips you can also find in this article.
From the final screen, we recommend clicking the related helper to open it in the right panel (Need help?). You can also click the Create button to open the Main Information Step of your newly created campaign. This way, it will serve as a reference during the configuration process of your campaign. The tips provided in this helper will be very useful as you configure your campaign.
Access your campaigns dashboard
Click on Create + button
Select Ally tile.
Test one or more changes on your website: you need to experiment something new before deciding if you invest in the change or not. It could be small things such as color scheme, wordings, images, or somthing bigger such as your whole navigation, different blocks on a page, delivery methods etc.
Customize your visitor's experience: you want to personalize a block, a color, a page, from a tiny element to a whole experience for a specific audience, and want to monitor your metrics to be sure this action has a positive impact on your website's performance
Temporarily correct a website element: you need to fix an element asap (mis-alignment, legal information, etc.) but you don't need to monitor performance
Collect data on your website: you just need to gather data about your visitor's behaviour
Depending on the volume and complexity of the changes you wish to make, the type of campaign we propose will differ.
One change: it can be a CTA, an image or a banner for example
Several changes: a CTA, an image and a banner at the same time, because you need to check which type of combination will have the greatest impact.
An entire page: you want to change the entire layout of your page
Modifications can be made to a single page (homepage type) or to several pages or on the entire website, on a series of pages sharing the same layout and organization of elements (product pages type).
However, the most important thing to consider is whether the targeted pages have the same or a different structure, depending on the element you wish to modify or add. What counts above all is whether the element to be modified is present in the same place on the page, whether the html is strictly the same around it (e.g.: a header is often identical on all the pages of an e-commerce site, even if the layout is different).
If you're planning to add a banner overlay to your site, assume that all pages have the same layout, since this won't be taken into account when adding the banner.
The audience you're targeting will have an impact on the type of campaign you choose for personalization, as some visitors to your site may belong to several audience segments at the same time (e.g. “VIP” segment and “Parisian” segment), and you may want to prioritize exposure to a particular message.
An A/B Test consists of modifying one element on one page (e.g. homepage, basket page, etc.) or a string of equivalent pages that share the same layout (e.g. all of your product pages, all of your results pages, etc.), and measuring if the new variation(s) will be more or less performing than the original.
To learn more about the differences between each type of test, refer to the Types of campaigns article. If you don’t know which type of campaign to choose, our virtual assistant Ally can help you.
To create an A/B test, go to Web Experimentation, click the Create button and select A/B Test.
👉 To learn about the different ways to create a campaign, please refer to How to create a campaign.
The Main Information page is the first step toward your new A/B Test campaign.
We recommend establishing a hypothesis of your test according to the following model: If I apply [this change on my webpage] to [this audience], then [it will impact] and enables to enhance [this goal]. And to add it in the hypothesis field.
👉 For more information on how to configure this step, refer to .
You have two ways to create content for your campaign in AB Tasty:
With the Visual Editor, you can make simple modifications such as changing the color of a button, replacing an image, changing the wording of an element. If it is clickable, always put an action tracking on the element you modify.
👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the
The Code Editor enables you to declare your code (JavaScript, CSS) without having to load the Visual Editor. The Code Editor is the best solution for developers who want to save time.
👉 To learn how to use the Code Editor, please read the .
As the primary goal enables you to determine which variation takes precedence over the others, you should choose the action tracking related to the element you have modified. Indeed, it is the user behavior that is more likely to be affected by the modification you have made in the editor.
👉 To learn how to configure Goals, please read .
You have to declare WHERE your campaign should be visible on your website (e.g. on every page, on specific pages, on only one page, etc.), for WHOM (e.g. your whole traffic, mobile users only, etc.), and in WHICH conditions (e.g. after a certain number of pages, when it’s cold outside, etc.) it should appear. You can also decide WHEN visitors will see the campaign depending on the recurrence you choose.
Be careful when entering the targeted pages (in the Where section) of your test to ensure that it will display correctly on the pages you want to target (e.g. Product pages).
👉 To learn how to configure targeting, please read .
By default, traffic allocation is set equally for each variation (50/50 for an A/B test, 33/33/33 for an A/B/C, etc.). For statistical reasons, it is recommended to not make uneven traffic allocation.
👉 To learn how to configure Traffic allocation, please read .
The advanced options are not mandatory.
Enable the third party tool(s) you have connected to AB Tasty to send your test data to your tool.
Select a loading method for your campaign.
Activate Sequential testing to detect if your experiment will not be successful at all based on the results of your primary goal (if it is based on a Conversion/Transaction Rate).
👉 To learn how to configure Advanced options, please read .
The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :
- the targeting configuration - the tracking - the modifications you've made
👉 To learn how to use the QA Assistant, please read .
If you want to launch your A/B Test at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on
A/B tests can be used in the following cases:
A Multi-Experience Personalization displays a new experience, message, or piece of content on one or several different pages (homepage, basket page, etc.), for at least 2 specific segments of visitors to your website. This type of campaign lets you prioritize the different experiences you have created:
If a visitor matches multiple segments (overlap), they will see only one experience with the highest priority (that you have put in place in the Main information step).
If a visitor matches only one segment, they will see the experience for which they have been targeted.
If a visitor does not match any of the segments, they won’t be targeted and thus won’t see the campaign.
To learn more about the differences between each type of test, refer to the article. If you don’t know which type of campaign to choose, can help you.
To create a multi-experience personalization, go to Personalization, click the Create button and select Multiexperience Personalization.
👉 To learn about the different ways to create a campaign, please refer to .
First, you need to ask yourself if your campaign may include overlaps. For example, let’s say you plan to create 2 sales popins on your homepage: one to display a coupon code to your VIP visitors, one to display a coupon code for visitors who have purchased within the past month. You need to know which popin you want to display to a visitor who is both a VIP and has purchased within the past month. The most important message will get the “Priority 1”, so that visitors matching both segments (“VIP” and “Last month purchasers”) will see the Priority 1 popin only.
The Main Information page is the first step toward your new campaign.
Choose the right priority for the right message: create each experience based on a specific priority. The most important experience, that is to say the experience that will be seen first, appears at the top (priority 1).
👉 For more information on how to configure this step, refer to .
You have two ways to create content for your campaign in AB Tasty:
Each experience must display a specific message to a specific segment. If it is clickable, always put an action tracking on the element you add in order to follow the performance of your campaign (ex: cross to close the popin, CTA in the popin etc.). Don’t forget to put action trackings on each experience (for each popin for example, with a different name: “Click cross popin VIP” and “Click cross popin NYC”).
👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the
The Code Editor enables you to declare your code (JavaScript, CSS) without having to load the Visual Editor. The Code Editor is the best solution for developers who want to save time.
👉 To learn how to use the Code Editor, please read the .
Once you’ve created your Personalization, you can pre-configure your future reporting to identify easily the metrics that need to be followed as your primary goal (the one which is potentially the most impacted by your Personalization).
👉 To learn how to configure Goals, please read .
WHO section: this is the most important section, where you have to choose the right segment as a function of the message you have created in the editor.
WHERE section: the target page must be the same for all experiences.
HOW section: this step is optional. You can add specific session-based triggers, such as a required number of viewed pages before displaying a message, the landing page of the session and so on.
The segment and/or the trigger must be different for each experience: in our example, you can create a VIP segment for the Priority 1 experience and a Past month purchasers for the Priority 2 experience.
👉 To learn how to configure targeting, please read .
If you allocate 100% of your traffic to the experiences, you won’t be able to know what the increment of each experience (in terms of purchases, for example) is. We recommend leaving 10 to 15% of your traffic on the original version (depending on the amount of traffic on your website). Don’t forget to set up traffic allocation for each experience of your campaign (in our example, for both experiences).
👉 To learn how to configure Traffic allocation, please read .
The advanced options are not mandatory.
Enable the third party tool(s) you have connected to AB Tasty to send your test data to your tool.
Select a loading method for your campaign.
Activate Sequential testing to detect if your experiment will not be successful at all based on the results of your primary goal (if it is based on a Conversion/Transaction Rate).
👉 To learn how to configure Advanced options, please read .
The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :
- the targeting configuration - the tracking - the modifications you've made
👉 To learn how to use the QA Assistant, please read .
If you want to launch your campaign at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on
Multi-experience personalizations can be used in the following cases:
A redirect test (or split test) enables you to test the performance of a new page, created and hosted outside of AB Tasty. This page is used as a variation within an A/B test campaign.
This type of test is useful when modifications involve a significant amount of work (e.g.: a brand-new design).
In this case, 2 URLs are involved:
The source URL, that is to say the one corresponding to the original version. This is the URL from which you want your visitors to be redirected.
The destination URL, that is to say the new page used as a variation. This is the page the visitors will be redirected to when they land on the source URL.
As in a classic A/B test, after analyzing the results of your test, you will see if the destination URL has performed better than your original version depending on the goal you wanted to reach (e.g., increasing the number of clicks, the number of pages viewed, decreasing the bounce rate).
A Split Test is a type of A/B test. To create a Split Test, you must create an A/B test (go to Web Experimentation, click the Create button and select A/B Test) and activate the Redirection option from the visual editor.
👉 To learn about the different ways to create a campaign, please refer to .
The Main Information page is the first step toward your new Split campaign.
We recommend establishing a hypothesis of your test according to the following model: If I apply [this change on my webpage] to [this audience], then [it will impact] and enables to enhance [this goal]. And to add it in the hypothesis field.
In the URL field, enter the URL you want to load in the editor. This URL corresponds to the source URL. It’s important if you want to set up trackings on this page, such as action trackings.
👉 For more information on how to configure this step, refer to .
To run a Split test, you don’t need to create any specific content. The objective of this setup is to use the classic A/B test campaign workflow to activate a redirection of traffic from the former page (the original) to the new one(s) (the variations).
Variation 1 corresponds to the redirect page. To create the redirection, click on Variation 1 in the header navigation and select the redirect option. You can then paste the URL of the page you want to redirect to in the popin.
We recommend ticking the following boxes:
Check the accessibility of the page - This option automatically pauses the test when the redirected URL is no longer online (with an email alert to the admins of the account). Once your landing page is available again, another email will be sent and you will be able to play the test again.
Keep AT Internet referrer in URL - If you use AT internet, this will ensure that you keep the original URL.
Enable redirection - This option allows AB Tasty to perform the redirection. You must select it. If you want to redirect to several pages, you can select the Regular expression option and enter the regular expression in the URL field.
In a redirected variation, you cannot add Variation JavaScript or make changes. Turning an existing variation (with changes) into a redirection variation deletes all the changes. Only action trackings can be added as they are not specific to a single variation but to the whole campaign.
👉 To learn more about the redirection option of the visual editor, please read the
As primary and/or secondary goals, you can choose action trackings which are common to the original variation and to the new page. For example: if your Split Test consists of testing a new landing page layout, your primary goal should be the bounce rate, along with optional secondary goals.
As the URL of the original version of your page is different from its variations, the code will probably be different. If you want to track clicks on the main CTA of both pages, follow these steps:
First, add action tracking to the original page. You can access the original page in the editor – it’s displayed by default in the Original tab in the top banner of the visual editor. As with every tracker, AB Tasty will try to detect the presence of the tracked element in both the original and the variation pages, even if this element is present on only one of the two.
Next, do the same for the variation you want to test. If you return to the Variation tab, you will see the original version of your page – that’s normal; it’s because you’ve used this URL in the Main Information Page. To load the new one, go back to the Main Information Page and paste the new URL in the field named URL to load in the editor, and click save. Then go back to the editor. Your new page will be loaded in the Variation tab.
For the most efficient workflow in setting up an A/B test, list all your metrics and their trackers on a separate sheet or document (for example metric “click rate”, so tracker “click tracking on the element #mainCTA). Then implement all the trackers in the original variation, before finally implementing them all in the variation. Each time, you can copy and paste the tracker names from the list, to ensure none are overlooked and your associated metrics will have the same names. This is necessary to ensure all relevant data is collected under the same KPI in your campaign report.
👉 To learn how to configure Goals, please read .
You have to declare WHERE your campaign should be visible on your website (e.g. on every page, on specific pages, on only one page, etc.), for WHOM (e.g. your whole traffic, mobile users only, etc.), and in WHICH conditions (e.g. after a certain number of pages, when it’s cold outside, etc.) it should appear. You can also decide WHEN visitors will see the campaign depending on the recurrence you choose.
You must target the source URL.
👉 To learn how to configure targeting, please read .
Traffic allocation must be identical for each variation.
👉 To learn how to configure Traffic allocation, please read .
The advanced options are not mandatory.
Enable the third party tool(s) you have connected to AB Tasty to send your test data to your tool.
Select a loading method for your campaign.
Activate Sequential testing to detect if your experiment will not be successful at all based on the results of your primary goal (if it is based on a Conversion/Transaction Rate).
👉 To learn how to configure Advanced options, please read .
The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :
- the targeting configuration - the tracking - the modifications you've made
👉 To learn how to use the QA Assistant, please read .
If you want to launch your A/B Test at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on
If the AB Tasty tag is not implemented on the page which you want your visitors to be redirected to, they will be able to view the page but no data will appear on the reporting of your campaign.
A Multipage test enables you to test a new version of one or several elements across a user’s journey, that is to say on different pages which don’t share the same structure (such as the homepage, the product pages and the basket page). These element(s) may have different layouts depending on page structure. As for A/B tests, after analyzing the results of your test, you need to decide which version has performed best according to the goal you wanted to reach (e.g., increasing the number of clicks, the number of pages viewed, decreasing the bounce rate). You can then apply these changes directly to your website.
To create a multipage test, go to Web Experimentation, click the Create button and select Multipage Test.
👉 To learn about the different ways to create a campaign, please refer to How to create a campaign.
The Main Information page is the first step toward your new Multipage Test campaign.
We recommend establishing a hypothesis of your test according to the following model: If I apply [this change on my webpage] to [this audience], then [it will impact] and enables to enhance [this goal]. And to add it in the hypothesis field.
In the Pages section, enter the URL you want to load in the editor for each page or group of pages. Each page coincides with a part of the user's journey you want to test. You need to include at least 2 pages which must be different (e.g.,: the product pages and the basket page).
👉 For more information on how to configure this step, refer to .
You have two ways to create content for your campaign in AB Tasty:
You must adapt the modification to each page you have configured. Each page has the same number of variations, as you build an entire new user’s journey. If it is clickable, always put an action tracking on the element you add or modify in order to follow the performance of your campaign (e.g.,: cross to close the popin, CTA in the popin etc.). Don’t forget to put these action trackings on each page.
👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the
The Code Editor enables you to declare your code (JavaScript, CSS) without having to load the Visual Editor. The Code Editor is the best solution for developers who want to save time.
👉 To learn how to use the Code Editor, please read the
As the primary goal enables you to determine which variation takes precedence over the others, for Multipage tests, exceptionally, your primary goal should be the result of the user’s journey, regarding the main goal of your test: retention (primary goal should be the number of viewed pages), loyalty (revisit rate) or conversion (transaction rate). You should also choose the action tracking related to the elements you have modified as secondary goals. Indeed, this is the user behavior that is most likely to be affected by the modification you have made in the editor.
👉 To learn how to configure Goals, please read
You have to declare WHERE your campaign should be visible on your website (e.g. on every page, on specific pages, on only one page, etc.), for WHOM (e.g. your whole traffic, mobile users only, etc.), and in WHICH conditions (e.g. after a certain number of pages, when it’s cold outside, etc.) it should appear. You can also decide WHEN visitors will see the campaign depending on the recurrence you choose.
The target pages (Where section)must be different for each page, as they relate to a specific step in the user’s journey. The segment(s) (Who section) must be the same for each page. Don’t forget to configure the targeting for each page. If one or several sections (Who, Where, How) have the same configuration, you can use the .
👉 To learn how to configure targeting, please read .
By default, traffic allocation is set equally for each variation (50/50 for an A/B test, 33/33/33 for an A/B/C, etc.). For statistical reasons, it is recommended to not make uneven traffic allocation.
👉 To learn how to configure Traffic allocation, please read .
The advanced options are not mandatory.
Enable the third party tool(s) you have connected to AB Tasty to send your test data to your tool.
Select a loading method for your campaign.
👉 To learn how to configure Advanced options, please read .
The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :
- the targeting configuration - the tracking - the modifications you've made
👉 To learn how to use the QA Assistant, please read .
If you want to launch your A/B Test at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on
Multipage tests can be used in the following cases:
An A/A test is a type of campaign that enables you to gather insights about your website by tracking events or specific behaviors using the AB Tasty tag.
This is a type of test for which:
The traffic allocation is 0% on the original version and 100% on the variation.
The variation is empty: you don’t create any new content to push, so the campaign is totally transparent for your visitors.
You have set up goals to follow in the reporting.
So, what’s the point of an A/A Test?
Gathering baseline data: All market analytics tools track events differently (technologically and also in the way they calculate certain metrics). Thus, it’s normal to observe differences between the metrics displayed by two different analytics tools. With an A/A Test, you can collect your visitors’ main KPIs using AB Tasty and establish a baseline to analyze your future campaigns more accurately.
Analyzing before and after revamp: If you’re planning a large revamp of an important feature on your website and can’t A/B test the two versions, it’s important to have a record of the previous performance of this feature. For example, let’s say you want to change the structure of your navigation bar. If you launch an A/A Test before the release, you’ll get the exact click rates for each tab. After the revamp, another A/A Test will enable you to collect the new click rates on the new tabs and, after several weeks, you’ll be able to measure the impact of your release on the navigation behavior.
Adding click zones or segment performance:
To learn more about the differences between each type of test, refer to the article. If you don’t know which type of campaign to choose, can help you.
To create an A/A test, go to Web Experimentation, click the Create button and select A/A Test.
👉 To learn about the different ways to create a campaign, please refer to .
The Main Information page is the first step toward your new A/A Test campaign.
👉 For more information on how to configure this step, refer to .
As the A/A test objective is not to change content of your website but to gather data and insights, you can still use the Visual Editor but only to create trackers.
In the Editor, you can add trackers to your campaign, such as click trackings, custom trackers and widget trackers.
👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the
Once you’ve set up your trackers, you can preconfigure your future reporting to easily identify the metrics needed to track your primary goal. The notions of primary and secondary goals are not significant with A/A Tests because the objective here is to recall all the trackers you’ve set-up in the editor.
Once your campaign has started, you can add secondary goals, but action tracker such as clicks or widgets won’t be retroactive in your reporting and will be calculated from the date you added these metrics as goals. All the other goals will be calculated from the date you launched your A/A Test, even if you add them afterward.
By default, A/A Test will embed some goals like:
Transaction Goal
Bounce Rate
Number of pages viewed
Revisit Rate
The Transaction Goal will be set as the Primary Goal if you have a transaction tag implemented. If not the bounce rate will.
👉 To learn how to configure Goals, please read .
You have to declare WHERE your campaign should be visible on your website (e.g. on every page, on specific pages, on only one page, etc.), for WHOM (e.g. your whole traffic, mobile users only, etc.), and in WHICH conditions (e.g. after a certain number of pages, when it’s cold outside, etc.) it should appear. However, you can't change WHEN visitors will see the campaign depending on the recurrence as the A/A test will be instantly trigger.
Be careful when entering the targeted pages (in the Where section) of your test to ensure that it will display correctly on the pages you want to target (e.g. Product pages).
👉 To learn how to configure targeting, please read .
By default, traffic allocation it is locked to 100% of your traffic to the variation.
👉 To learn how to configure Traffic allocation, please read .
The advanced options are not mandatory.
Enable the third party tool(s) you have connected to AB Tasty to send your test data to your tool.
Select a loading method for your campaign.
👉 To learn how to configure Advanced options, please read .
The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :
- the targeting configuration - the tracker you applied 👉 To learn how to use the QA Assistant, please read .
If you want to launch your A/A Test at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on
A Simple Personalization consists of displaying a new experience, message, or content on one page (e.g. homepage, basket page, etc.) or a string of equivalent pages that share the same layout (all your product pages, all your results pages, etc.) for a specific segment of visitors of your website. You can measure the performance of your campaign in the reportings.
To learn more about the differences between each type of test, refer to the Types of campaigns article. If you don’t know which type of campaign to choose, our virtual assistant Ally can help you.
To create a simple personalization, go to Personalization, click the Create button and select Simple Personalization.
👉 To learn about the different ways to create a campaign, please refer to How to create a campaign.
The Main Information page is the first step toward your new campaign.
👉 For more information on how to configure this step, refer to .
You have two ways to create content for your campaign in AB Tasty:
The Visual Editor enables you to create the personalized experience you want to push on your website for a specific segment.
👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the
The Code Editor enables you to declare your code (JavaScript, CSS) without having to load the Visual Editor. The Code Editor is the best solution for developers who want to save time.
👉 To learn how to use the Code Editor, please read the .
Once you’ve created your Personalization, you can pre-configure your future reporting to identify easily the metrics that need to be followed as your primary goal (the one which is potentially the most impacted by your Personalization).
👉 To learn how to configure Goals, please read .
WHO section: this is the most important section, where you have to choose the right segment as a function of the message you have created in the editor.
WHERE section: choose the unique URL (or a saved Page) or the type of pages having the same construction (such as Product pages) on which your message will be visible. The URL used in the editor step remains a sample of the URL(s) you configure in this step.
HOW section: this step is optional. You can add specific session-based triggers, such as a required number of viewed pages before displaying a message, the landing page of the session and so on.
👉 To learn how to configure targeting, please read .
If you allocate 100% of your traffic to your experience, you won’t be able to make a comparison with the original version. We recommend leaving 20 to 30% of your traffic on the original version (depending on the amount of traffic on your website) to be able to control the performance of your experience.
👉 To learn how to configure Traffic allocation, please read .
The advanced options are not mandatory.
Enable the third party tool(s) you have connected to AB Tasty to send your test data to your tool.
Select a loading method for your campaign.
Activate Sequential testing to detect if your experiment will not be successful at all based on the results of your primary goal (if it is based on a Conversion/Transaction Rate).
👉 To learn how to configure Advanced options, please read .
The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :
- the targeting configuration - the tracking - the modifications you've made
👉 To learn how to use the QA Assistant, please read .
If you want to launch your campaign at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on
Simple personalizations can be used in the following cases:
When you configure a campaign, you must define the way your campaign will load on the visitor’s website. Your campaign can be either embedded directly in the tag or downloaded only when required. This option has a direct impact on the tag performance.
To determine how the campaign will load on your visitor’s website, you must select one of these 2 options:
This option is selected by default. The loading of your campaign is deferred, meaning that it will be downloaded afterwards, only when the targeting conditions are met and won’t be embedded in the AB Tasty tag. Once downloaded, the campaign will behave as usual. Therefore, the campaign won’t add weight to the tag, which avoids impacting the loading time of your website and slowing it down. This is particularly useful when you are running several experiments at a time on your account.
When selecting this option, the additional loading time should not exceed a few dozen milliseconds. When using this option, the targeting of every live campaign is still embedded in the tag. The tag will evaluate as fast as possible which campaigns the visitor needs to be exposed to (the campaigns where the visitor matches and respects the triggering conditions, if any), but will only download the deferred campaigns when they need to be applied. For example, if your campaign is targeted for mobile users only, it is not necessary to download it for desktop users.
When selecting this option, your campaign code, including the modifications, targeting, analytics, widgets, and so on, will be embedded directly into the AB Tasty tag. This means that all your visitors, even those who are not targeted by the campaign, will download its content. Selecting this option can drastically increase the size of the tag, and thus have a negative impact on its performance, especially if it is used in many heavy campaigns. We recommend using it only for very specific use cases (for instance when configuring a redirect test) and for a short period of time.
When changing the loading of a campaign, you must refresh the tag.
Let’s say you have configured a campaign displaying a pop-in promoting your latest mobile application and targeting your mobile users only:
If you select the deferred loading (default): The campaign will be downloaded and executed only for targeted visitors (in this case, for visitors on a mobile device). After an initial download from our servers cache, the campaign will be cached for 1 year (if no modifications are made) in the visitor browser for an instant loading each time the visitor sees the campaign.
If you select the instant loading: The campaign will be downloaded for all visitors but executed only for those matching the targeting conditions. It will be cached in the tag for 30 seconds. A heavy campaign can add several KB of data for each visitor that will re-download the campaign when the cache expires (after 30 seconds). This may increase the execution time of the AB Tasty tag.
The Dwell Time Tracking widget is part of the Tracking widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
The Dwell Time Tracking widget enables you to track the time your visitors spend on a page. Visitors who reach a given duration will be grouped under this duration goal.
For example, you can create three separate goals in one single widget.
Let's say: 10 seconds, 60 seconds, and 180 seconds. You will see in the reporting for each goal, how many visitors reached it.
This will give you an idea of the time your visitors spend on a single page, whether it is a content page with a long scroll or a simple task-oriented page (or group of pages, depending on your targeting criteria).
In theory, you should always have a higher number of reached goals for the shortest durations and a lower number of reached goals for the longest durations.
To configure the widget:
Give it a name (for the Goals setup step and the Reporting),
Define a duration (make sure to name it accordingly),
Save. To use more than one goal, add them into the same tracking widget (by clicking "Add a setting") instead of adding another tracking widget. If you added one by mistake or if you would like to remove one inside a tracking widget, just click on the red cross to delete it.
In order for your goal(s) to be displayed in your campaign reports, you need to add them as main or secondary goals. For more on the goal configuration step, refer to the
To avoid creating conflicts within your campaign's reporting data, we recommend adding a single widget in which all your dwell time goals will be defined.
To enable a fair comparison, event tracking widgets are applied to the original version and to the campaign variation(s).
The Element Visible Tracking widget is part of the Tracking widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
The Element Visible Tracking widget enables you to track whether one element (an image, a button, a paragraph, a div, a section, a collapsible div, etc.) has been "visible" in the viewport of the visitor.
There are several possibilities:
the element is visible above the "fold line" at page load,
the element is only visible once the visitor has scrolled to a certain point and suddenly appears in the viewport (triggered when the element starts to be visible and is not fully visible, for example, a large <div> or an image),
the element is hidden and is only displayed after a click (or any other user behavior).
In all of these cases, we collect a hit. Once an element has been made visible in the viewport, reading it and re-displaying it will not count it twice. However, if the visitor reloads the page and the element is visible again, a new hit is sent.
If you have a responsive website, it is probably more convenient to use the Element Visible Tracking widget instead of the Scroll Rate Tracking widget, which will consider a scroll rate the same way for visitors on desktop and on mobile.
Depending on how your website is designed and/or the device you use, you may see an element or not, without this being related to the scroll progression.
You can nevertheless use the Scroll Rate Tracking widget in two different campaigns, each one targeted on a per-visitor device basis.
To configure the widget:
Select the element you want to track,
Give it a name (for the Goals setup step and the Reporting),
Save.
To use more than one goal, add more in the same tracking widget (by clicking "Add a setting") instead of adding another tracking widget. If you added one by mistake or if you would like to remove one inside a tracking widget, just click on the red cross to delete it.
In order for your goal(s) to be displayed in your campaign reports, you need to add them as main or secondary goals. For more on the goal configuration step, refer to the
To enable a fair comparison, event tracking widgets are applied to the original version and to the campaign variation(s).
The campaigns dashboards are available for both Experimentation & Personalization campaigns. The experimentation campaigns dashboard includes all the tests (A/B tests, A/A tests, multivariate tests, multipages tests, tests with dynamic allocation) and patch and multipages patch campaigns created on the website of the account and the personalization campaigns dashboard includes all personalizations campaigns (simple personalizations, multipages personalizations, multiexperiences personalizations) created on the website of the account. By default, the first 12 campaigns are loaded in the list. To show more, click on the other pages at the bottom right of the list.
To access the test and patch dashboard, click Experimentation from the lateral navigation.
To access the personalization dashboard, click Personalization from the lateral navigation.
This guide will walk you through the process of editing Shadow DOM elements using the visual editor. is a powerful feature that allows for encapsulation of DOM and CSS, creating self-contained components. With the latest updates, our visual editor now supports editing these elements, enhancing your ability to personalize and experiment with modern web technologies.
This guide will walk you through the process of editing Shadow DOM elements using the visual editor. is a powerful feature that allows for encapsulation of DOM and CSS, creating self-contained components. With the latest updates, our visual editor now supports editing these elements, enhancing your ability to personalize and experiment with modern web technologies.
Before you begin, ensure that:
You have access to the visual editor with the Shadow DOM feature enabled.
The Virtual Click widget is part of the Special widget category. For more information on the widgets, please refer to .
The Virtual Click widget will help you virtually click on an element on the page to save your visitors the hassle. This click will happen at page load.
It can be used in many different ways, such as clicking to hide a panel, display a pop-in, pre-filter results, accept conditions, tick a checkbox...anything you would like your visitors to do but can't force them to do, or anything you would like to save your visitors from doing.
It can be very convenient once a decision for an evolution has been made, and you would like to implement it as soon as possible without having to wait for the development to be in production.
This guide will walk you through the process of editing iframe elements using the visual editor. are HTML elements that allow you to embed content from another web page within your current page. With the latest updates, our visual editor supports editing these elements, enhancing your ability to manage and customize embedded content.
Before you begin, ensure that:
You have access to the visual editor with iframe editing capabilities enabled.
The Sticky Element widget is part of the Special widget category. For more information on the widgets, please refer to .
The Sticky Element widget helps you keep important elements in the viewport of your visitors. This limits confusion and reminds them of the main expected task for each page.
For example, on product pages, it can be the "Add to Cart" button, on travel websites, the "Book Now" button, on SaaS apps, the "Save" button, and so on.
The Comment feature allows you and all stakeholders to communicate on your campaigns. This will facilitate collaboration with your colleagues (when working on common campaigns) and help you keep track of key information inside AB Tasty.
You can access the Comment feature by clicking on any test or personalization campaign. All comments are managed at campaign level.
The comment menu is located in the upper-right corner of your campaign’s creation flow (except the Visual editor) and in the reporting.
The number of comments posted in your campaign will be displayed next to the comment button. A red icon indicates what there are unread comments. You can list them by clicking on the Comments button.
You can post comments as internal notes or to send a comment to someone and notify them. This can be done by tagging them in your comments using the ‘@’ sign followed by their name. The tagged user will also receive an email notifying them that they have been tagged in a comment post. The email contains a URL link that redirects the user to the step where the comment has been posted.
Comments can also be deleted. While the comment’s content will be deleted, the event will remain in the comment history.
The Snowflake Animation widget is part of the Special widget category. For more information on the widgets, please refer to .
The Snowflake Animation widget enables you to simulate snow falling on any element of the web page with an icon of your choice.
It can be useful to add playfulness to your website during a specific time of year (Christmas, Halloween, Thanksgiving, Valentine's Day, your company anniversary and so on) or to highlight a specific section of the page.
We've updated the Visual Editor with a fresh look that aligns with our company's branding. This includes new colors, fonts, and icons for a more modern and consistent experience.
When you select an element, the Quick-Action Bar appears just below it, offering shortcuts to the most frequently used actions. This allows you to perform common edits without needing to open the full context menu.
The standard actions include:
The Scroll Rate Tracking widget is part of the Tracking widget category. For more information on the widgets, please refer to .
The Scroll Rate Tracking widget enables you to set one or more scroll goals on a web page.
Once the scroll threshold has been reached by a visitor, a goal is recorded in the report. If a user scrolls down, reaches a goal, scrolls back up and scrolls down again, the hit is not sent twice.
If they refresh the page and reach the scroll rate goal, a new hit is sent.
If you have a responsive website, it is probably more convenient to use the Element Visible Tracking widget instead of the Scroll Rate Tracking widget, which will consider a scroll rate the same way for visitors on desktop and on mobile.
The Social Sharing widget is part of the Special widget category. For more information on the widgets, please refer to .
The Social Sharing widget lets you display a sidebar (left, right, top, bottom of the page) on pages where you would like your visitors to share content on social media or via email.
The Search & Replace widget is part of the Special widget category. For more information on the widgets, please refer to .
The Search & Replace widget will help you replace all the occurrences of a word or a group of words on a page.
This is useful, for instance, for A/B testing a change in wording or microcopy, or simply to replace an old product name with a new one, or even the name of the former CEO with the new one.
The impact of this widget on your text is visible in the editor directly.
💬 Message
🥇Priority
Displaying on your Homepage a 20% discount code to Loyal visitors, a 15% discount code to Valuable visitors and a 10% discount code to all other visitors.
Loyal visitors also match the “all visitors” segment. As there is a risk of overlap between the two segments you have configured, you can choose which experience the visitors who match both segments will see. You can set your “20% discount experience” as priority 1 and your “10% discount experience” as priority 2. In this case, users who match both segments will only see the “20% discount experience”.
Displaying a welcome message to new visitors and a welcome back message to returning visitors.
There is no risk of overlap because users are either new or returning. In this case, the priority you choose for your experiences isn’t relevant.

Dwell-Time Tracking
Account Action Tracker







Another solution is to code your trackers directly by adding JavaScript (global code added in the right side panel).









🖊️ Action / modification
🎯 Goal(s)
Challenging the color of a CTA
Limiting anxiety of the CTA and easing the add to basket action.
Changing the order of the labels in the navigation bar
Boosting access to the Christmas shop section.
Hiding blocks in the Homepage
Reducing the bounce rate.
Changing the position of the related articles links in the article pages
Increasing the number of viewed pages per session.
Implementing a pop-up displaying the user’s basket items upon returning to the website

🖊️ Action / modification
🎯 Goal(s)
Changing the color of the ‘Add to cart’ CTA, visible on product pages and list pages (quick buy)
Limiting anxiety of the CTA and easing the add to cart action.
Adding delivery fee information on different pages (every 5 items in the product list, in the product description of the product pages and as a banner in the cart page).
Monitoring the impact of giving more transparent information about delivery fees across the customer’s journey.
Replacing indoor pictures with outside photographs throughout the website.
Finding the best way to shoot your models regarding the appetence of your audience for real life photographs.

💬 Message
🎯 Goal(s)
Displaying a banner to promote the opening of a store in New York for visitors living in NYC only, on desktop and mobile.
Offline impact
Displaying a popin to promote free delivery during valentine’s day for prospects only.
Increasing transaction rate and average cart.
Displaying a popin on exit intent to promote newsletter subscription, using options and fields available on the homepage.
Boosting newsletter subscription.

You can switch between active and archived campaigns from the tab above the campaigns list.
An archive campaign can be unarchived. Archiving a campaign is the best way to clean your campaigns list without having to trash your past ones.
Keyword assigned to the test or patch. By default, when a campaign is created, a tag containing the name of the creator of this campaign is added automatically.
To add a new tag, click on the Plus icon that will appear when you hover over the row, under the tag column.
Click the icon "pen" for direct access to the 7 configuration steps of a campaign:
Main information
Visual editor (for tests) or Targeting (for personalizations)
Targeting (for tests) or Visual editor (for personalizations)
Goals
Traffic allocation
Advanced options
QA
Click on the status button, then select Schedule to schedule a campaign to be played or paused in the future (with or without recurrence).
A badge appears next to the status button on the campaign to indicate that a start and a stop have been scheduled for it. To know more about it, read our Campaign scheduler article.
Click the "See more actions" icon for direct access to the 5 configuration steps of a campaign.
And click on duplicate, archive, add to folder or delete actions on your campaign.
Click on More Actions and select Edit campaign name to modify the name of your campaign.
Click on More actions menu and select Duplicate to duplicate your campaign.
More information is in the campaign duplication article
To archive a campaign, click on More actions menu and select Archive. The campaign will be moved to the archive view.
From the Archived view, the campaign cannot be started or paused. The possible actions are Unarchive by clicking on the status button.
To delete any active or archived campaign, click on More actions menu and select Delete.
Deleting a campaign is an irreversible action.
You can run a search based on the name of the campaign, campaign ID, or URL.
Go to the test dashboard
Click on the Filter button
Select the desired filter from the sections: Type, Status, or Folder The list is updated, and only the tests that match the criteria are displayed
Click Apply to apply the selected filters or select Reset in the menu to return to the default list
By campaign type
You can filter your list of tests based on type: simple personalization, multipage personalization, and multiexperience personalization.
By status: You can filter the list of campaigns based on their status. The different statuses available are:
Live
Live in QA
Paused
Paused in QA
Scheduled
Archived
By folder
You can filter the list of your campaigns based on the folders they have been filed into.
To view the content of a folder, take these steps:
Click on the Filter button,
Select the desired folder from the dropdown: The list is updated and only the tests that match the criteria are displayed,
Click Reset to return to the default list
To create a new folder, click "See more actions" from the campaign row. Then, "Add to Folder" and "Create a folder".
To rename a folder, click on the pencil icon appearing on hover on the folder name.
To delete a folder, click on the bin icon appearing on hover over the folder name. 💡 If the folder contains tests or personalizations, these aren’t deleted along with the folder. They remain available in the main list.
To move a campaign into a folder, click the "See more actions" icon from the campaign row. Then, "Add to folder" and select the desired folder. 💡 When you move a test or personalization into a folder, it remains visible in the main list.
To remove a campaign from a folder, click the "See more actions" icon from the campaign row, then select "Remove from folder."
You can create a view to save the columns you want to display on your dashboard.
Click on the button Organize.
Toggle on-off the names of the columns you’d like to set up as a default view for your profile.
Click on Apply.
The view is set up and will be displayed by default whenever your dashboard is loaded.
Campaigns can be created via the campaigns dashboard.
Click Create
Select the type of test or personalization you want to create
You are redirected to the Main information page
For more information about campaigns creation flow, please refer to this article.

Event: Choose between the following options:
Mousedown: tracked event based on the mouse clicking and releasing
Click: tracked event based on the click only
Submit: tracked event based on a form send
Focus: visitor has set the focus on the targeted element
Blur: visitor has left the targeted element (which had the focus)
Hover: visitor has hovered over the element
Note: In order to maintain good quality and a reasonable amount of data, the hover event is only triggered if the visitor remains at least 500ms above the targeted element.
The selector you’ve chosen is preselected in the change selector field, but you can change it or refine it.
While editing, click on Validate - your tracker will be visible if you click on the Tracker entry on the right-hand bar. You can edit or remove trackers directly from this panel.
Creation order has an impact
The order in which you configure your trackers in the visual editor is important, as they will automatically be added to the Goal step of your campaign (Step 3).
It enables you to pre-define your campaign goals so that none of the configured trackers are forgotten.
The first tracker you configure in the visual editor will be set as a primary goal for your campaign, and all other trackers you configure will be set as secondary goals.
This concern trackers created manually using a CSS selector as well as the widget trackers:
From the Goal step, you will then be able to reorder these automatically set up goals.
Two options are available in the tracker configuration:
Make available for this campaign only: for specific trackers linked to this particular campaign. we are talking about X action trackers.
Make available for all campaigns: for commun trackers you'll need to reuse in other campaigns. If you choose this option, the tracker will be recorded at the account level and you'll retrieve it in your goal management page such as in the goals step in the campaign flow. We are talking about Account action trackers.
For more information about trackers (Account action trackers and X action trackers), please refer to the following article.

Before you begin, ensure that:
You have access to the visual editor with the Shadow DOM feature enabled.
You are familiar with the basic navigation and functionality of the visual editor.
Open the Visual Editor: Navigate to your project and launch the visual editor. Ensure you are working on a campaign that supports Shadow DOM editing.
Edit Shadow DOMs elements including styles, text and HTML
Add Widgets: You can add predefined widgets to elements within the Shadow DOM. Note that custom widgets are not supported.
Modify Styles: Use the CSS Variation Modal to apply styles specifically to Shadow DOM elements.
Declare a container for the Shadow DOM
CSS Overwrite or Merge: Choose whether to overwrite existing styles or merge new styles with existing ones.
The editor supports JavaScript functionality for elements within Shadow DOMs. Use the modal to specify selectors for both the container and the element.
Save Changes: After making your edits, ensure you save your changes within the editor.
Review Modifications: Use the Active Changes panel to review all modifications made to Shadow DOM elements.
Although it is technically possible to add a Shadow DOM inside another Shadow DOM, this approach is not supported by our solution. Additionally, note that this feature does not work with 'closed Shadow DOM
You are familiar with the basic navigation and functionality of the visual editor.
Open the Visual Editor: Navigate to your project and launch the visual editor. Ensure you are working on a campaign that supports Shadow DOM editing.
Edit Shadow DOMs elements including styles, text and HTML
Add Widgets: You can add predefined widgets to elements within the Shadow DOM. Note that custom widgets are not supported.
Modify Styles: Use the CSS Variation Modal to apply styles specifically to Shadow DOM elements.
Declare a container for the Shadow DOM
CSS Overwrite or Merge: Choose whether to overwrite existing styles or merge new styles with existing ones.
The editor supports JavaScript functionality for elements within Shadow DOMs. Use the modal to specify selectors for both the container and the element.
Save Changes: After making your edits, ensure you save your changes within the editor.
Review Modifications: Use the Active Changes panel to review all modifications made to Shadow DOM elements.
Although it is technically possible to add a Shadow DOM inside another Shadow DOM, this approach is not supported by our solution. Additionally, note that this feature does not work with 'closed Shadow DOM
To configure the widget:
select the element you want to click onto at page load,
save.
Be careful: If you need to add more than one virtual click, you will have to add as many widgets as needed.
The destination URL: This URL is the new page being used as a variation/scenario. This is the page the visitors will be redirected to when they land on the source URL.
1. Create a campaign
2. In the step main information, paste your source URL as usual
3. In the editor, select the option "Redirect option" in the menu of your variation.
4. Paste the URL of the destination URL in the field:
In a redirected variation, you cannot add Variation JavaScript or make changes. Turning an existing variation (with changes) into a redirection variation deletes all the changes. Only action trackings can be added as they are not specific to a single variation, but to the whole campaign.
Keep URL parameters: this option enables to keep all the parameters your visitor came with on the original page, before being redirecting to the variation.
Check the accessibility of the page: This option automatically pauses the test when the redirected URL is no longer online (with an email alert to account subscribers to notifications). Once your landing page is available again, another email will be sent and you will be able to run the test again.
Keep AT internet referrer in URL: If you use AT internet, this will ensure that you keep the original URL.
If you want to redirect to several pages, you can select the Regular Expression option and enter the regular expression in the URL field.
Your current regex patterns
The new regex pattern to redirect on
You can test your rule using the test URL field.
For example, if you want to redirect all the current product pages on your website (using “/p/” as the URL pattern) to a new UX layout (using “/product/” as the new URL pattern), you need to enter these two rules in the pattern fields, then you can test with a sample product URL to check whether the new URL is compliant.
See this useful article about avoiding dedicated to redirect campaigns.
Three layouts are available:
top banner
bottom banner (by default)
free placement (which allows you to place the widget where you want in the page)
Layouts are natively responsive.
Layer Position (z-index)
If you have selected the "top banner" or "bottom banner" layout, you can define the position of the widget on the z-axis to manage the widget position: above everything, below everything, or precisely fine-tuned.
As the Banner widget is mainly designed to contain text, you have to fill in the text area. It supports multi-line messages. You can use HTML markup to add ordered or unordered lists. All the other styling aspects should be done through the Style tab. You can also add emojis.
You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.
"The button is a link": you will have to specify a button URL and a button text. The widget will display a button.
"A click on the button closes the widget": you will have to specify a button text. The widget will display a button.
"The whole widget is a link": you will have to specify a URL. The widget will not display a button.
"A click on the whole widget closes the widget": you won't have anything to add. The widget will not display a button.
"None": the widget will not be clickable. If you use a background image that looks like a "big ad", we recommend that you select "The whole widget is a link" and remove the paragraph with the editor once the widget is set.
Toggle the “Add a second link” option to configure a second link/ CTA in your widget, the same way as the first one.
Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.
Background can be set up with an image using the image-fitting policy
4 options are provided:
"Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
"Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
"Fill": the image is resized to fill the background container without keeping the aspect ratio
"None": the image is left unchanged.
Select the Triggering and Recurrence options you want to apply to the Banner widget.


You are familiar with the basic navigation and functionality of the visual editor.
Open the Visual Editor: Navigate to your project and launch the visual editor. Ensure you are working on a campaign that supports iframe editing.
Add Widgets: You can add specific predefined widgets to iframes. Note that custom widgets are not supported.
Use the Element Picker: The Element Picker has been updated to support iframes. It allows you to select iframe elements for editing.
Select the Iframe: Use the input field to select the iframe container you wish to edit.
Modify Styles: Use the CSS Variation Modal to apply styles specifically to iframe elements.
Declare a container for the iframe
CSS Overwrite or Merge: Choose whether to overwrite existing styles or merge new styles with existing ones.
JavaScript Support: The editor supports JavaScript functionality for elements within iframes. Use the modal to specify selectors for both the container and the element.
Save Changes: After making your edits, ensure you save your changes within the editor.
Review Modifications: Use the Active Changes panel to review all modifications made to iframe elements.
Remember that you cannot edit the content of an iframe if it is not on the same domain due to security restrictions.
The "Select the Element to Stick" input allows you to select the link, button, or whole <div> that you want to make "sticky".
The "Foreground" toggler is toggled by default. When toggled, it allows you to change the z-index. value.
The "z-index" number input lets you define the z-index value in order to position your sticky element among other elements already placed on the z-axis.
The "Sticky Position from Top" input number and unit select allow you to define the scroll height before the widget starts to become "sticky".
If the "Add Background Color" check box is ticked, then you can define a "Background color" for the selected element in the color picker.
The Comments button is available is all the sections of the campaign setup. The section from which a comment is added is displayed on the right of the comment panel, as shown in the screenshot below.
Unposted comments are saved so that you can review and post them later.


Select the element of the page on which you want the icons to fall.
Define the position of the widget compared to the layer. You can choose to have your icons fall above or under the layer, or to customize their position.
Enter the number of icons you want to fall on your element or page (up to 200).
Two options are available to configure your widget:
Select an icon among the default icons offered by AB Tasty or
Upload your own image by uploading it from your browser or by entering the image path.
Select the style options (Icon size, Average animation duration, Animation direction, Icon rotation during animation) you want to apply to your widget.
You can choose to stop the animation after a certain amount of time (delay) after the loading of the targeted page. To do this, toggle the “Stop the widget after a delay” toggle and use the scale or the empty field to declare the number of seconds to be reached before stopping the animation.

to highlight a new product,
to highlight specific products (e.g. green products),
etc.
Select the element of the page on which you want to hook the icon.
Two options are available to configure your widget:
Select an icon among the default icons suggested by AB Tasty or
Upload your own image by uploading it from your browser or by entering the image path.
Select the style options (Size, Horizontal & Vertical Alignment, Horizontal & Vertical Symmetry, Rotation) you want to apply to your widget.
AI Copilot: Invoke the AI assistant.
Edit Style: Open the style editor.
Edit Text: Open the text editor.
Add Tracker: Add an action tracker to the element.
More Options (...): Click this to open the full context menu.
The Quick-Action Bar is adaptive. For example, if you select a widget, the style and text edit icons will be replaced by an icon to open the widget's configuration panel. If an element has already been modified, an icon to access the "active changes" panel will appear.
The SmartOutline panel, located on the left side of the editor, displays the complete hierarchical structure (DOM) of your page. It is designed to make element selection more precise and powerful.
Key features include:
Synchronized Selection: Hovering or clicking an element in the SmartOutline panel will highlight and select it in the Visual Editor, and vice-versa.
Precise Targeting: Easily select elements that are difficult to click on, such as nested or overlapping components.
Right-Click Menu: You can now right-click directly on an element within the SmartOutline panel to open the full context menu, saving you time.
Collapsible: You can collapse the panel to maximize your screen space. The collapsed panel can be moved vertically if it obstructs an element you need to see.

Depending on how your website is designed and/or the device you use, you may see an element or not, without this being related to the scroll progression.
You can nevertheless use the Scroll Rate Tracking widget in two different campaigns, each one targeted on a per-visitor device basis, for a fair comparison.
To configure the widget:
Give it a name (for the Goals setup step and the Reporting),
Define a percentage of scroll (make sure to name it accordingly),
Save.
To use more than one goal, add them into the same tracking widget (by clicking on the "Add a setting" button) instead of adding another tracking widget. If you added one by mistake or if you would like to remove one inside a tracking widget, just click the cross to delete it.
In order for your goal(s) to be displayed in your campaign reports, you need to add them as main or secondary goals. For more on the goal configuration step, refer to the metrics guide.
To avoid creating conflicts within your campaign's reporting data, we recommend adding a single widget in which all your scroll goals will be defined.
To enable a fair comparison, event tracking widgets are applied to the original version and to the campaign variation(s).
Pick the layout that suits you best, depending on the design of your web app.
Select the social platform(s) you would like to invite your visitors to share on. The following are available: Facebook, Whatsapp, X, Threads, Telegram, Reddit, LinkedIn, Pinterest and Email.
By default, "Email" is toggled; it will add a button with a "mailto:" link. The email subject will be the meta title of the page and the email body will be the URL of the page. "mailto:" links behave differently depending on whether you have set a default email client for "mailto:" links in your browser settings; and if you have, it differs depending on whether you use: Thunderbird, Outlook, Mail, Gmail, Proton Mail, etc. You can also write your own message to accompany the link. For example, if you have bought a product on a website and want to share it with your friends on Whatsapp, you can write the following message: "Look what I just bought!". Your friends will thus receive on Whatsapp a link to the product page following your message.
The Icons color will be applied to all icons. By default, they are white.\
The Customize icon background color, once toggled, will be applied to all icons. By default, (untoggled), they are based on the color of the social media platform: light blue for Twitter, red for Pinterest, etc.\
Display a drop shadow & drop shadow blur radius. You can decide whether to have a drop shadow and how opaque it will be.\
Margin between icons will add some margin between the buttons (vertical margin or horizontal margin, depending on the layout you picked).\
Button border radius slider will give more or less border radius to the icon buttons.\
Customize container: if you toggle this option, you will discover a list of sub-options (container padding, background color, border thickness (and border color is thickness is >= 1px) & border radius) which will let you design a sidebar to wrap the icons together.\
The Container position on the axis slider will help position the sidebar, in particular if you already have static/sticky elements on your page, to avoid overlapping. By default, it is set to 50, which means centered (vertically or horizontally (@ 50%) depending on the layout you picked).\
To configure the widget:
Type the word(s) you want to replace in the "Search" input.
Type the word(s) you want them to be replaced within the "Replace With" input.
Scope it or leave it. Leave “body” if you want to apply the changes to the whole page or select the element you want your replacement to be scoped to.
Save
Be careful, this widget is case-sensitive, so if the words you want to replace are "Product X", it will not replace:
product X
Product x
product x
You will need to add four widgets to cover all cases.
The global dashboard is the first page displayed when you access your AB Tasty account and allows you to keep track of your C.R.O campaign's performance.
The dashboard keeps track of 10 main indicators:
You can by choosing which card you want to display and its exact place.\
You can change the timeline by choosing between several options, from the past 12 months to the past 7 days.
Please refer to
The single-account view mode is the default mode and displays data for a single account.
The multi-account view mode displays aggregated data of all accounts within an . Multi-account view mode is activated automatically when you select several accounts in your organization.
To select multiple accounts, in the upper right corner of the Dashboard, click on the drop-down menu.
You must be a super admin of your organization to be able to select several accounts.
The dashboard shows real-time and historical tracking of your campaigns' activity.
Campaigns are split by category and type where applicable.
This section shows the total number of campaigns currently running on your AB Tasty account or organization. It is the sum of campaigns with live or live in QA status. It'a "real time" card, meaning that the usage of the date filter can't impact it.
This section provides a 2 steps overview status. First it gives a brief summary of activity by status. Second, clicking on a status reveals more details about the associated campaign types. Additionally, selecting a specific campaign type will redirect you to a filtered campaign list.
If a campaign type does not appear in the list, it means there are no campaigns of that type in the current status.
This section shows the total number of times campaigns have been launched in the past 12 months. It is calculated by the sum of launches that took place, excluding campaigns in QA mode and counting only 1 launch per day per campaign at maximum.
This section shows real-time updates on your scheduled campaigns of your account or organization.
It includes the list of:
All paused campaigns ready to be launched on a future date
All live campaigns planned to be stopped on a future date
All campaigns with recurring scheduled options that didn’t hit the last occurrence
The dot next to the campaign name informs about the current status:
in green the campaign is live
in yellow the campaign is paused
The information area resumes the next action scheduled on the campaign. The color of this area is linked to the type of the action:
in yellow the campaign has been scheduled to be paused
in green the campaign has been scheduled to be played and paused
in blue the campaign has been scheduled with a recurrency
By hovering the information area you'll find the full details about the schedule. By clicking on the pictogram on the right of the line, you're redirected to the campaign flow.
This section shows the list of the 10 most active users on your AB Tasty account or organization with their:
First name
Last name
Number of connexions till the beginning
The last connexion date
As a user, it is possible to declare you first name and last name in the . If these fields are not completed, the email address is automatically displayed for both fields. An active user is a user whose last login time to AB Tasty was in the past 12 months. Users are sorted by number of connections, in descending order.
This section shows two metrics:
All: The total number of unique visitors tracked by the AB Tasty tag, regardless of whether they are assigned to a campaign. This should be equivalent to the MAU (Monthly Active Users) count as we count a visitor once it has accepted the cookies.
Tested: The total number of unique visitors (new) tracked by the AB Tasty tag, and assigned to a campaign.
By hovering the graph, you can access to the monthly details.
The tag size is the size of AB Tasty HTML tag, in kilobytes. Its size should be under 125 Kilobytes for optimal performance. For more information, go to the article.
Your are listed in the Global dashboard as Connected Apps:
You can access the from this section.
Experiment Health Check enhances the reliability and efficiency of experimentation programs. Experiment Health Check automatically monitors your experiments, providing alerts and insights to help you maintain the integrity of your data.
: This alert indicates a discrepancy between expected and observed traffic allocations. It’s crucial to address SRM to maintain the validity of your test results.
: Alerts you to potential statistical anomalies that may arise from improper sequential testing practices.
You can mark all alerts as resolved or check them individually by hovering on the elements or headers.
This card allows you to have a glance at the main information of a Journey Analysis request you have made on the .
In order to have some Insights, you must have activated the EmotionsAI Insights on your accounts and requested at least one Journey Analysis.
The card displays the information of the saved Journey Analysis for which the end date is the closest to today.
You will find there a lot of condensed information to assess the emotional performance of your website :
Estimated Losses on the period
The Top 3 EmotionsAI audiences composing your traffic.
The Top 3 Dissatisfactions by EmotionsAI audiences to manage.
The Top 3 pages where most emotional improvements have to be addressed.
Depending on the Journey Analysis available, you will be able to filter the Journey Mapping and its goals you want to monitor.
The Global Experience dashboard tracks 3 types of data: Real-time, Historical and Specific.
Real-time data metrics are identified by a “Real time” icon and label placed on top of the section. Real-time metrics cannot be filtered by date.
Historical data are identified by a “Filter” icon followed by a date range. Those data are updated every day and can be filtered up to the past 12 months.
The card fetch data on a period specific to the card.
Iframes, or inline frames, are HTML elements that allow embedding one web page within another. They are commonly used to integrate external content like advertisements, videos, or widgets into a webpage. However, as a digital marketer or product manager using AB Tasty, understanding how iframes work is crucial. Iframes can impact user experience and tracking capabilities, often presenting challenges for implementing optimizations and collecting analytics.
An iframe is an HTML element that creates a separate browsing context within a webpage, effectively embedding another HTML document. This embedded content can come from the same domain or a different one, enabling diverse content integration but also introducing complexities for tools that rely on manipulating or tracking page elements.
src: Specifies the URL of the document to embed. This determines what content is displayed inside the iframe.
width and height: Define the iframe’s dimensions, either in pixels or percentages.
sandbox: Adds security restrictions on iframe content, limiting capabilities like script execution or form submission.
allow: Lists features that the iframe is allowed to use, such as autoplay or camera access.
Iframes are widely used by websites to embed external content seamlessly. For example:
Videos: Embedding YouTube or Vimeo videos.
Interactive maps: Displaying Google Maps on a webpage.
Third-Party widgets: Integrating chat systems, social media feeds, or surveys.
Embedded content in target pages: When running experiments or personalizations on a webpage, certain sections of the page may exist inside iframes.
Third-Party tools: Platforms like YouTube or external booking engines often use iframes, meaning those areas might not be directly editable by AB Tasty.
Cross-Domain restrictions: If an iframe points to an external domain, browser security policies might block scripts or interactions within the iframe.
Iframes create isolated environments where the embedded content operates independently of the parent page. While this ensures that scripts and styles from the parent page don’t interfere with the iframe’s content (and vice versa), it also means that tools like AB Tasty may face restrictions:
You may not be able to directly edit or test the content inside the iframe.
Scripts injected by AB Tasty might not work within the iframe due to its isolated context.
Many iframes use the sandbox attribute to restrict actions like running JavaScript or accessing cookies. While this enhances security for the page owner, it limits tracking and modifications by third-party tools.
When iframes load content from a different domain (cross-origin), browsers enforce strict security policies (e.g., CORS). These policies often block access to the iframe's content, making it difficult for tools like AB Tasty to track user behavior or apply visual changes inside the iframe.
Here’s a simple example of embedding a YouTube video using an iframe:
In this case, the embedded video is entirely controlled by YouTube, and tools like AB Tasty cannot directly access or modify the content inside the iframe.
Limited modifications: If your target content is within an iframe, AB Tasty might not be able to modify it directly unless the iframe is hosted on the same domain and does not have restrictive settings.
Tracking challenges: User interactions (e.g., clicks or form submissions) within an iframe may not be captured by default.
Collaborate with developers: Ask developers to avoid using iframes for critical content or ensure that iframes are configured to allow interaction (e.g., same-origin policy, no sandbox restrictions).
Custom tracking solutions: For iframes that must remain, custom solutions may be needed to track user actions, such as implementing event listeners at the iframe level.
Custom tracking solutions: For iframes that must remain, custom solutions may be needed to track user actions, such as implementing event listeners at the iframe level.
The Drawer widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
The Drawer widget allows you to incorporate a dynamic element into your variations. The drawer appears as a tab (referred to as the "Sticky Button") affixed to one edge of the screen, presenting a headline (and optionally an icon) to invite visitors to click on it. If clicked, a panel will unfold from the edge of the screen to present content to the visitor.
Similar to other widgets offered by the platform, extensive configuration options enable you to define what you want to present to your visitors within this experience.
In addition to the typical sizing and layer definition configurations, the layout section allows you to define two positions for the widget. The "Button layout" section describes the positioning of the drawer tab precisely on the site, and consequently, the direction in which the drawer will unfold upon clicking (a tab on the left implies the drawer unfolds to the right, a tab at the top implies a downward unfolding, and so on).
The "Layout" section more conventionally describes the organization of elements presented within the content itself.
The content section provides options to present text elements as well as an image. It is worth noting, however, that the drawer offers the option to work with "Text only" or "Image only" content if the experience requires it.
The content configuration also allows you to define the content of both the tab (Sticky Button) and the drawer itself.
For the Sticky Button, the configuration involves defining the text displayed to the user and optionally an icon if desired.
For the drawer part, the content configuration is relatively similar to that of an Image Popin. You can define the elements you want to display to your visitors and configure them. Thus, it is possible to choose whether the drawer will present a title and text. You can also configure the content of these elements and the image to be displayed.
Finally, still in the content section, it is possible to configure the button or buttons offered to visitors as well as their behavior (closing the widget, redirection, etc.).
Similarly, the style configuration allows adaptation for both the Sticky Button and the drawer itself.
The configuration of the Sticky Button is quite similar to that of a button in other widgets. Colors, borders, and texts can be adjusted to the context of the site where the widget will be deployed.
Note that in the case of the Sticky Button, a position configuration is offered. This allows you to define the position of the tab in relation to the drawer itself: in the middle, at the top, at the bottom, or across the entire length of the drawer.
For the container section, typical widget configurations can be performed: texts, colors, buttons, and borders can be adapted to the context of the site on which the widget will be deployed.
Finally, analogous to other widgets, the condition parameters allow you to define the conditions for appearance, recurrence, and the animation of the widget's appearance on the page.
The Replicate targeting option enables you to copy the targeting configuration of a subtest or a scenario and to paste it into other subtest(s) or scenario(s). It's available on Multipages Tests, Multipages Personalizations and Multiexperiences Personalizations.
The option is available on the top right of the page.
It saves you from having to configure targeting independently for each scenario and each subtest and allows you to save time.
To use the Replicate targeting option, you must configure targeting for at least one subtest/scenario first. It can be any subtest/scenario. To replicate one or several sections of this subtest/scenario to one or several subtests/scenarios, select the sections of the current subtest/scenario you want to copy. It can be the Who, Where, How sections. You can also select all sections if you want to replicate the whole targeting configuration of your current subtest/scenario.
🚩 Heads up
If a section is made of several criteria, you cannot select individual criteria. The entire section will be replicated.
Then, select the subtest(s)/scenario(s) into which you want to copy the selection and click Apply.
The Replicate targeting options is available for the following campaign types:
usually, the Who (segment of visitors) and How (triggering rules) sections are the same for all subtests. Only the targeted pages (Where section) differ. We recommend configuring the Who and How sections in the first subtest, before replicating them directly in all subtests. Then, you can configure the Where section independently for each subtest.
: the targeting configuration must be exactly the same in all subtests. We recommend configuring targeting in the first subtest, and replicating it directly in all subtests.
: usually ,the Where and How sections are the same in all scenarios
Let’s say you plan to display a promotional message on the Homepage, the product pages and cart page for clients who purchased more than 5 times in the past year (20% discount) and for clients who purchased less than 5 times in the past year (15% discount). In this case, your personalization campaign is made up of two scenarios. First, configure targeting for the first scenario as follows: Who: Purchase Frequency > The visitor purchased more than 5 times within 365 days. Where: is > http://yourwebsite.com/homepage | is > http://yourwebsite.com/product | is > http://yourwebsite.com/basket How: Any time Then, click Replicate targeting from the current scenario (1) and select the Where and How sections. Select All scenarios (as you only have two scenarios) and click Apply. Go to scenario 2 and configure the Who section: Purchase Frequency > The visitor purchased less than 5 times within 365 days. Click Save step.
This page will help you understand and fully use the Triggers and create them.
A trigger is a temporary user condition that enables you to display your campaign in a specific context. The trigger enables the campaign to be displayed to the configured audience only when additional conditions are met.
You can create triggers in 2 areas of the platform:
in the targeting step of the campaign creation flow, inside the segment selection dropdown, by clicking on Create new trigger:
from the by clicking on Create trigger
In both cases, the trigger builder opens:
From there, you will find a list of criteria categories that will help you define your trigger. Click the chevron to access specific options for that category.
Drag and drop your criteria from the left panel list to the working area on the right.
Each criterion will present different specificities. Fill in the requested fields depending on the trigger criteria you selected (see below for additional explanations on each criterion), and how you want to target your visitors.
With some criteria, you can add more conditions to your targeting by clicking Add conditions.
You can combine two or more criteria using AND or OR values found inside the trigger builder’s middle column:
AND means your campaign will only be shown to a visitor if ALL of the selected trigger criteria are met (more information in the section below)
OR means your campaign will be shown to a visitor if at least ONE of the selected trigger criteria is met
Don’t forget to name your trigger in the specific name field, found above the configuration space. Click Save to save to retrieve it in your trigger library.
If you need more information about the available criteria to build your triggers (how they exactly work), please refer to our .
The Iframe Click Tracking widget is part of the Tracking widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
The Iframe Click Tracking widget enables you to record clicks in an iframe (an HTML element that lets you display content from another web page - the same website or another one).
For example, YouTube videos are displayed in an iframe when you embed them in your website. It is pretty much the same thing for any web app that lets you embed a part of or the full content of a page. Generally speaking, except for websites that forbid it, any web page can be embedded in an iframe.
To configure the widget:
Give it a name (for the Goals setup step and the Reporting),
Select the <iframe> element you would like to track (use the Select Parent or Select Children option to select the right element if needed),
Save.
To use more than one goal, add them to the same tracking widget (by clicking on the "+" button) instead of adding another tracking widget. If you added one by mistake or if you would like to remove one inside of a tracking widget, just click on the red cross to delete it.
In order for your goal(s) to be displayed in your campaign reports, you need to add them as main or secondary goals. For more on the goal configuration step, refer to the
If you want to track clicks in several iframes on your page, you will need to add one widget per iframe.
To enable a fair comparison, event tracking widgets are applied to the original version and to the campaign variation(s).
The Tooltip widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
The Tooltip widget lets you display a tooltip on one or more elements.
Tooltips are useful in many different situations: as soon as you notice friction points, you can start improving by adding a simple tooltip. Very often, this will quickly relieve users of a painful experience or upgrade a confusing interface.
Select the element which you want to trigger and display a tooltip on.
Select the position which the tooltip is displayed on: left side, right side, top, bottom. Default is top.
Select the most suitable layout depending on the design of your web app or the amount of text you need to provide in your tooltip: "Simple" or "Rich".
Type a Title in the "Title" text area.
If you've selected the "Title & Text" layout in the layout tab, add a text in the "Text" text area.
The Text color will be applied to both Title and Copy. We recommend picking a light color.
The Background color is black by default. We recommend picking the most contrasted background based on your text color. If most of your website has a light background, use a dark color for your tooltip backgrounds. A tooltip must be clear and very readable.
Border color, thickness, and radius settings will help you adapt the tooltip to your website style and make it seamless.
Drop shadow and drop shadow blur radius: you can decide to add a drop shadow and adjust its opacity.
Background can be set up with an image using the image-fitting policy
4 options are provided:
"Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
"Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
"Fill": the image is resized to fill the background container without keeping the aspect ratio
"None": the image is left unchanged.
You can choose whether you want to display your tooltip when clicking or hovering (hover does not work on touch devices).
You can choose to display the tooltip by default at page load. We do not recommend using several tooltips, as this can quickly become overwhelming and stressful for your visitors.
You can choose whether the tooltip will be displayed only once per page or every single time the trigger is triggered.
You can use the Tooltip widget as a pseudo-onboarder and add several in one page. In this case, we recommend triggering each one only once per page. This way, once the visitor has finished clicking in the different "new" areas, they can start really using the website without making the tooltips pop again. If you use tooltips as legends for images, links, etc., we recommend not limiting the trigger to once per page.
This page will help you understand and fully use the Segments and create them.
A segment is a cluster of visitors that share some identical traits, as defined by you, though sessions. Visitors who match these segment criteria are the only ones who will see the campaign on your website. For more information about segments, please refer to the following tutorial.
You can create segments in 2 areas of the platform:
in the of the campaign creation flow, inside the segment selection dropdown, by clicking on Create new segment:
from the by clicking on Create segment:
In both cases, the Segment builder opens:
From there, you will find a list of criteria categories that will help you define your segment. Click the chevron to access specific options for that category.
Drag and drop your criteria from the left panel list to the working area on the right.
Each criterion will present different specificities. Fill in the requested fields depending on the segment criteria you selected (see below for additional explanations on each criterion), and how you want to target your visitors.
With some criteria, you can add more conditions to your targeting by clicking Add conditions.
You can combine two or more criteria using AND or OR values found inside the segment builder’s middle column:
AND means your campaign will only be shown to a visitor if ALL of the selected segment criteria are met (more information in the section below)
OR means your campaign will be shown to a visitor if at least ONE of the selected segment criteria is met
Don’t forget to name your segment in the specific name field, found above the configuration space. Click Save to use the segment in your campaign and save it to your account library. It will now be reusable in other campaigns (see Using a saved segment, below).
Click Cancel to go back to the targeting page without saving. Note: this will erase your current configuration.
If you have created and saved a new segment, it will be automatically available in your segment list.
If you need more information about the available criteria to build your segments (how they exactly work), please refer to our .
Evi Content is an AI-powered tool designed to simplify the process of creating and modifying website experiences using natural language prompts. Evi is primarily designed for users who wish to modify their campaigns but are not familiar with editing code, or wish to improve their text content. This tutorial will guide you through the steps of using this feature effectively.
The Simple Popin widget is part of the Promotional Content widget category. For more information on the widgets, please refer to .
The Simple Pop-in widget lets you display a pop-in containing a text. This widget can be useful if you want to catch your visitor’s attention on a specific piece of information, momentum or important message. It can be used for many different use cases. Maintenance operations, crisis communication, or even for seasonal greetings.
You'll find all useful information about what is personalization prioritization in this .
Using this module means to steps:
Prioritization is possible for all personalization campaign types : (SP), (MPP), (MEP).
Once you’ve created your variation(s), you need to pre-configure your future reporting to easily identify the metric(s) that you want to track as your primary goal and (optional) secondary goals.
A goal is a metric that has been chosen to monitor your experimentations or personalizations and helps you make informed decision-making about your campaign.
The Goals step enables you to select goals from a list of metrics (which can be created and managed in the or in the ).
These trackers are divided into 5 different categories:
When creating a test or a personalization campaign, you need to define the percentage of visitors assigned to the variation(s) (in case of a test) or scenario(s) (in case of a personalization) and to the original version of your website.
To learn about the traffic allocation step of the campaign creation flow, refer to .\
For each individual visitor, we compute what we call a seed, a unique alphanumeric string that will be persistent in time. This seed, also unique for each campaign, will be used to generate a score between 1 and 100 and then the same logic as before applies.
As the seed is computed each time, we do not need to store the result anymore.
The Code Editor is an alternative to the visual editor to quickly and easily make CSS and/or JavaScript-based changes to your campaign. As in the visual editor, you can add, rename, delete a variation or duplicate an existing one.
The Code Editor is available for all types of campaigns, except the A/A test.
When you create a campaign, in the step Main Information, you have the option to load the Code Editor instead of the visual editor. You can also switch to the Code editor from the Visual editor by clicking the "Switch to Code editor" button.
If the tag detects it is on an insecure environment, it will automatically fallback to the old mechanism.
Let's take the example of a 50/50 campaign. If a visitor gets a score of 51, they will be exposed to the variant (a score above 49).
When Even Allocation is active, the platform restricts you from manually setting a variation's traffic allocation to a value exceeding the original allocation.
To know more about this behaviour, read our Even allocation article.
If you decide to change the allocation from 10/10 to 50/50, the allocation will be computed again and their score will now place them in the original. The visitor will switch from one variant to another.
This table shows the different categories of users, representing your entire website traffic. For each category, information on what the users will see is displayed:
🚦 Type of traffic
🍪 Visitor’s cookie campaign information (ABTasty cookie)
💬 Comment
👻 Untracked visitors
campaignId=[campaignId] value=-1
Visitors who see the original version of your website but whose actions will not be taken into account.
🎯 Tracked visitors (% of unique visitors of your campaign)
campaignId=[campaignId]
value/variationId=0 or variationID of the variation
The original version of your website or a new variation/scenario of your website
🏛 Traffic allocated to original
campaignId=[campaignId] value=0
Visitors within the test sample who see the original version of your website.
🆕 Traffic allocated to variations
campaignId=[campaignId]
variationId=[variationID of the variation]
Visitors within the test sample who see a new version of your website (or one of the new versions if there are several variations/scenarios).
It is highly not recommended to change the allocation while a campaign is running. Doing so might severely impact the reliability of your results, even more now with the new system. We strongly advise you to duplicate your campaign and start a fresh new one unless you consider the risk is low (the campaign is still in QA, only a few visitors have seen it until now, etc ..).
For example, let’s say you’ve implemented a ‘risky’ test and want to limit risk-taking. In this case, you can limit the number of visitors tracked and so that 40% of visitors aren’t tracked. That way, you reduce the test sample and limit the visibility of your new version(s). This means that these 40% of untracked visitors will see the original version of your website but won’t receive a cookie in their browser related to the test. Their actions on the website won’t be tracked unless you decide to increase the percentage of tracked visitors. The percentage of visitors that you track depends on the volumetry of your website. For example, if your website has over 10M unique visitors per month, you can choose to track only 20% of the entire traffic (and limit the test sample to 20%). However, if you have around 200k unique visitors per month and decide to track 20% of the traffic, you won’t reach reliability quickly enough to determine whether you can increase the percentage of tracked visitors. For more information, refer to Campaign reporting.
\


























































srcdoc: Allows you to define the HTML content directly within the iframe instead of linking to an external source.
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/xxxxxx"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe> If the subtest/scenario you want to replicate your selection to already have some targeting configured, the former configuration will be overwritten and replaced with the new one.
You can then edit any section of any subtest/scenario to fit your needs. Don’t forget to save the targeting step each time you edit the targeting configuration of a subtest/scenario.


Access to an AB Tasty account with the Evi Content feature enabled
A campaign created in AB Tasty (Test or Personalization)
Basic understanding of AB Tasty's Visual Editor
Open your AB Tasty campaign in the Visual Editor.
Select the element you want to modify on your website.
Click on Make a change in the context menu.
Tips for effective use - Be as specific as possible in your prompts to get the most accurate results. - Start with simple changes and gradually move to more complex modifications as you become familiar with the tool. - Remember that you can always refine your request if the initial result isn't perfect. - Use Evi for creative ideas - it can suggest wording for CTAs or generate multiple design options. For prompt examples, please refer to the article: Prompt Inspiration library for Visual Editor Copilot
When the Evi interface opens, you'll see an input field asking what you want to do with the selected element.
Enter your desired changes using natural language. For example:
"Move this menu 3 pixels to the left."
"Change the button color to blue and increase its size by 20%."
"Change the text color to blue."
Click Go to validate your request.
The Copilot process your request and generate the necessary modifications. The changes are applied on your selected element to preview them in the Visual Editor and related code is generated.
Review the modifications to ensure they match your expectations:
If the changes aren't exactly what you wanted, either click on:
Not exactly what I had in Mind, to refine the request (see Step 4).
Leave Module to modify your page manually.
If the changes aren't exactly what you wanted, you can refine your request:
Not exactly what I had in Mind, to refine the request
Provide more specific instructions or clarify your initial prompt.
When you're satisfied with the changes:
Click I like this, validate modification.
A confirmation message appears, and the modifications are added to your campaign variation.
Close the Copilot.
After accepting Evi Content's changes, you can still make manual adjustments using the standard editing options.
For more advanced customization, access the Code Section to directly edit the CSS or JavaScript. Click on Active Changes and hover on the change you want to edit, Click on Menu and Edit:
When you select a large section of your webpage (such as an entire page section, header, or complex container), Evi Content may fail to process your request or return an error indicating that the context limit has been reached.
Why this happens: Evi Content analyzes all elements within your selection to understand the structure and apply modifications. When too many elements are included, the amount of information exceeds Evi Content's processing capacity.
Refine your selection - Click on a more specific element within the area you want to modify, rather than selecting the entire container.
Target individual elements - Instead of selecting a full section, select the specific button, text block, or image you want to change.
Work incrementally - If you need to modify multiple elements in a large area, make changes one element at a time.
Example of how to do selection : Instead of selecting the entire header section, Select the specific navigation menu, logo, or CTA button you want to modify
Widget dimensions based on content option
By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about modals dimensions. If you upload a very large image as a background, your pop-in will adapt accordingly based on the text dimensions. Long text = Long pop-in.
If you untoggle the toggler, you will be able to define both the width and the height of the pop-in. These can be configured (independently) in several dimensional units:
px (pixels)
% (percentage)
em (element, which actually means that it is based on the size of the text of the element: if your font size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh) If you're digging the dimensional units in CSS, we recommend reading , which is a good starting point.
Preserve ratio (automatic height)
By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set any height, it takes what the modal needs and can even reach 100% of the available height in the viewport.
If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll in it to read everything.
Known issue: the widget configuration form not overlapping the website
In the past, we've chosen to make the widget configuration form not overlapping the website, especially if you want to position a widget in a corner or on the left side. Therefore, the global website width is "squeezed" in the editor. Now, once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width. We understand that defining the pop-in size without seeing the full rendering of the page is tricky. When you dimension your pop-in it will adapt to all windows widths by showing/hiding the widget form or let the "Widget dimensions based on content" toggle toggled.
Layer Position (z-index)
Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget’s position: above everything, below everything, or precisely fine-tuned.
Please read the dedicated section on the z-index for more information.
You will be able to decide whether to display a title.
The maximum length is 255 characters.
As the "Simple pop-in" widget is mainly designed to contain text, you have to fill the text area in.
The text area supports multi-lines messages. You can use HTML markup to add ordered or unordered lists. All the other styling aspects should be done through the "Style" tab.
You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.
If you pick:
"The button is a link": you will have to specify a button URL and a button text. The widget will display a button.
"A click on the button closes the widget": you will have to specify a button text. The widget will display a button.
"The whole widget is a link": you will have to specify a URL. The widget will not display a button.
"A click on the whole widget closes the widget": you won't have anything to add. The widget will not display a button.
"None": the widget will not be clickable.
If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.
Select the style options (Text, Buttons, Container, Border, Close Button) you want to apply to your widget and customize the pop-in.
Background can be set up with an image using the image-fitting policy
4 options are provided:
"Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
"Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
"Fill": the image is resized to fill the background container without keeping the aspect ratio
"None": the image is left unchanged.
In the "Text" collapsible group, in the "Style" tab, defining the alignment will impact both message and button.
Select the Triggering and Recurrence options you want to apply to the Promotional Banner widget.

Note that it is not recommended to prioritize the latter as it already includes a subtests prioritization in itself.
Before prioritizing your personalization campaigns, you can identify potential conflicts between your campaigns to find out which ones should be prioritized and which priority to apply to each campaign. A conflict happens when two or more campaigns either:
target the same saved page(s) OR the “all pages” option,
AND Target the same segment, or all visitors,
AND are live at the same time.
To identify potential conflicts between your personalization campaigns, you can use the 2 available filters. AB Tasty compares campaigns according to the segment and saved Page(s):
By default, any segment is included in the all visitors segment and any saved Page is included in the all pages option.
All visitors is a segment in itself but it also means that no particular segment has been selected, so it matches any segment as well as the all visitors segment.
All pages means “all the pages of the website”, including all the saved Pages, so it matches any saved Page as well as the all pages option.
This filter is based on a specific campaign, which serves as a reference, that you must select from the dropdown list. It enables you to display the campaigns that share the same targeting configuration:
the same segment OR all visitors (because this segment contains all other segments) AND
the same saved Page(s) OR the “all pages” option (because this option contains all the saved Pages)
This filter works for all campaigns, and not one specifically. You must select at least one segment and/or one saved Page from the dropdown lists. This means you can either select:
one or several segments and no saved Page,
one or several saved Pages and no segment,
one or several saved Pages and one or several segments.
Using the filters enables you to identify campaigns which may be in conflict because they target the same segment and/or saved Page(s). However, it doesn’t take into account the trigger and layout.
For example, when using the Segment and saved Page filter, you notice that 2 campaigns are displayed on the home page and both target new visitors. However, one has no specific trigger and the other is triggered on exit intent. In this case, the conflict you have identified with the filter does not necessarily affect the user’s experience on the website. It is up to you to decide whether or not you want to prioritize them (or one of them).
After identifying conflicts between your campaigns, you can start prioritizing them, that is to say applying a priority order to your campaigns. The prioritization screen displays two columns:
No priority applied section (left column)
Priority levels section (right column)
Prioritized campaigns are displayed on the right column, in various prioritization level sections. They are split between prioritization levels and constitute the prioritization rule. For more information on these concepts, please refer to Prioritizing personalization campaigns. If a visitor matches the targeting of several prioritized campaigns on a specific page of the website, they will only see the one(s) with the highest priority. To make your changes visible in production, you must publish them by clicking the Save and apply button.
To prioritize a campaign, drag and drop it from the left column to the desired priority level. The no priority applied section (left column) displays the campaigns that have no priority level. That is to say that they will be displayed according to their configured targeting conditions (segment, page, trigger). By default, personalization campaigns are not prioritized.
The priority section (right column) displays campaigns to which a priority has been applied. There is a maximum of 10 priorities: 1 is the highest and 10 the lowest. On a same page, visitors matching the targeting of several prioritized campaigns will only see the one(s) with the highest priority. The first 2 levels are mandatory (priority 1 and 2). For example, if you place one or more campaigns in priority 1, you must have at least one campaign in priority 2. Other priority levels can be empty. You can place several campaigns within the same priority level (12 campaigns maximum per priority level). This means that they will be displayed to all visitors matching the targeting of these campaigns. However, we recommend placing campaigns that target the same page(s) in different priorities.
Once you have placed your campaigns in different priority levels, you can save the prioritization rule by clicking the Save and apply button. The tag is updated automatically and your changes are deployed in production. If you leave without saving, the prioritization rule won’t be saved and won’t be applied to your website.
Generally speaking your prioritization rule must be updated (click the Save and apply button) in the following cases:
when you move one or more campaigns from the non-prioritized column (left) to the priority column (right);
when you move one or more campaigns to another priority level;
when you move one or more campaigns from the priority column (right) to the non-prioritized column (left);
before you change the timeframe, because your changes will not be kept if you return to the original timeframe;
before you apply filters (filter by campaign or filter by segment and saved Page), because your changes will not be kept when you return to the original view.
To deactivate the prioritization rule, you can either move all your prioritized campaigns back to the left column (that is to say remove them from the priority column) or pause all your prioritized campaigns. To make these changes active, click Save and apply.
For more information about personalization prioritization please refer to the following articles:
Prioritized personalization campaigns (SP, MPP and MEP) will fall under the priority ranks you give them. These priority ranks, called p-values, will determine if a visitor will see one campaign or another on the same targeting.
Up to 10 priority ranks can be set up.
When a prioritized MPP campaign has been seen by the visitor, thus historicized in the cookie, the tag will check this campaign but will not check the lesser priority (aka higher p-value) of other MPPs. The prioritized SP will still be checked by the tag according to their priority.
This ensures that the visitor sees the whole journey of the historicized MPP and does not prevent other prioritized campaigns to be applied except lesser priority MPPs.
Between two historized MPPs we check the priority between them. So if an MPP p-value 1 and a MPP p-value 2 are historized, only the first will be displayed in case of targeting overlap.
Campaigns that are not prioritized will not be altered by the prioritized campaigns. They will be displayed according to their basic targeting setup (segment, URLs, trigger, frequency…).
Action Trackers: all the trackers you’ve set up in the Visual Editor
Page trackers: the pageviews you’ve recorded in your account
Custom trackers: the action trackers and other trackers you’ve set up by code in the editor or the global code of the account
Browsing metrics: includes bounce rate, exit rate, pages per session, and revisit rate
Transactions: includes the transaction indicators you’ve set up on your account
The number next to the category indicates the number of metrics currently available in the category.
At this stage, your mission is to build your campaign's reporting by selecting the metrics most relevant to your analysis and decision-making. First of all, you need to choose the metric that should be most impacted by your campaign, and which will become your primary goal. You can also choose other metrics to track as secondary goals.
Properly setting up your goals and tracking them is essential for the success of your campaigns.
Metrics can be retroactive or non-retroactive. Retroactive metrics are generated after the campaign starts, and the data is automatically populated. Non-retroactive metrics need to be set up - in the Visual editor or in the Trackers page - before launching the campaign. Retroactive metrics: page trackings, browsing indicators, transactions Non retroactive metrics: action trackers, widget trackers, custom trackers.
The Goals step in the campaign flow is available for the following campaign types:
Experiments: AB tests, Multipages tests, AA tests
Personalizations: all types
The Goals step is the step #3 of the experimentation campaigns and the step #4 of the personalization campaigns.
When you land on the Goals steps, your selection on the right is already filled with the trackers you have previously set-up in the editor.
In this exemple, you can see that "Clic CTA" is pre-selected as the Primary goal, and the "Click CTA 2" is your secondary goal. This order respects the exact order of your editors's trackers. Meaning that the first you've set-up in the editor becomes the primary goal. Of course you'll be able to change it in the goal step.
This auto-fill feature saves you time by ensuring that you don't forget to select the trackers you've previously configured in the editor. In any case, the most important action is to have previously set-up these trackers, as trackers in general are not retroactive metrics.
The selected metrics as primary and secondary goals will appear in your campaign reports.
You can add up to 50 secondary goal in addition to your primary goal.
Don't forget to click on "Save" once your configuration is done.
Once your goals have been saved and your campaign has started, you can no longer modify or remove the primary goal of your campaign.
You can access the Trackers page by clicking on the Manage Tracking indicators button. The Goal management page allows you to manage all your tracking indicators in bulk.
In this page, you will be able to edit a tracker, delete it or just hide it from the list.
When you open the code editor in a campaign, you discover this screen, with the following information/actions:
One variation is created by default:
You can rename this variation to be easier to read in the report (ex: “Blue CTA variation” instead of “variation1”)
There are three tabs to enter the code: one for the CSS code of the variation, one for the JavaScript code of the variation and one for JavaScript code of the whole campaign.
The possibility to create new variations by clicking the "New variation" button;
The possibility to duplicate the current variation;
The possibility to remove a variation (when you have two or more variations);
The code editor enables you to make your changes at two levels:
The variation level (with tabs CSS and JavaScript)
The campaign level (with tab JavaScript)
At the variation level, it corresponds to the first two tabs:
CSS - variation
JavaScript - variation
These pieces of code will be executed on your webpage to create or generate a variation of your original version (the variation). Each added variation will have its CSS code and its JavaScript code.
You can also add Javascript code at the campaign level, in the third tab:
This code will be executed on all variations, including the original. This is the equivalent of the campaign code in the Visual editor.
The main usage of this campaign-based code is relative to trackers. The different trackers (click tracking, for example) must be fired on all the variations of your campaign to be able to measure the impact of your variation(s) including the original.
Click: when the visitor left-clicks on the element.
Mousedown: when the visitor moves over the element with the mouse while holding the left-hand button down (e.g. drag and drop, text selection, scrolling).
Submit: when the visitor submits a form to the server after filling it in. The submit event type needs to be set on the <form> element, not on the button. The selector needs to point to the <form> element.
This is a sample of the code we generate with the method click on the element #tracked_element:
All the modifications you implement in the code editor are also visible in the visual editor when you switch views. At the same time, all the JavaScript and CSS code you add directly into the visual editor will also be visible in the code editor.
The modifications you implement in the visual editor which are not related to JavaScript or CSS, such as editing style, editing HTML, adding an image, or adding widgets, will not be visible in the code editor.
The last editor you used will open by default the next time you load the editor, whether it is the same campaign or a different one.
JavaScript code to execute
Triggering another widget
The action button appears as a tab, referred to as a Sticky Button. It will appear to one edge of the screen, presenting a headline, and optionally an icon, to invite visitors to click on it. The widget will be placed at the left edge of the screen by default.
When the Free placement is selected via the layout tab, the sticky button will be replaced by a standard button. The user can then define where the button must be placed.
To add a link to the action button, select the Link option and enter the URL you want to link to.
To add JavaScript code to the action button, select the JavaScript option and enter the code you want to execute.
To trigger another widget when the action button is clicked, select the Trigger another widget option and select the widget you want to trigger.
Add another widget to your variation that you want to trigger when the action button is clicked.
In the widget you want to trigger, Go to the Conditions tab and in the Triggering section, choose At click on an element in the Display widget selection.
Select the element that will trigger the widget by clicking on the Select element button and choose the action button.
In the case below, we have configured an Image Pop-in widget to be triggered when the action button is clicked.
The action button also has a specific hovering style customization.
To customize the button, go to the Style tab and go to the Button’s hover section. You will then be able to change the hovering style of the button.
Select the Triggering and Recurrence options you want to apply to the Action Button widget.






























AB Tasty offers different statuses to enable you to have a better overview of what’s going on your website/applications:
This status is displayed during the campaign creation phase. Once the campaign goes live, you can’t go back to the draft status. While in draft, the campaign remains hidden from visitors.
To create a campaign, you must at least have the Creator role.
This status is displayed when you enable at least one parameter from the QA step of your campaign and open the QA Assistant to perform the QA of your campaign. During this step, you can check that you are targeted to your campaign, that the changes applied to your campaign are correctly setup and that tracking and transactions work properly. To perform the QA of a campaign, you must at least have the Creator role.
After you have performed the QA of your campaign, you can decide that it is ready to be launched but may be waiting for any conditions, such as the end of another campaign or a specific date. When the campaign has this status, it is not visible to your visitors until it is launched. To put your campaign in “ready to launch”, you must at least have the Creator role.
You can decide to apply the Live status to make your campaign active on your website and visible to your targeted segment of visitors.
To be able to launch a campaign, you must at least have the User role.
You can apply the Paused status when you want to stop your live campaign. It won’t be visible anymore to your visitors.
To be able to pause your campaign, you must at least have the Creator role (if your campaign has a status other than “Live”), or a User role (if your campaign is “Live”).
When your campaign has collected enough data and is ready to be analyzed, you can apply the “analysis” status. The campaign won’t be visible anymore to your visitors.
To apply this status to your campaign, you must at least have the User role.
This status reflects that you took a learning from your campaign, that you don’t plan to put live again, and you’re ready to move next. To be able to end a campaign, you must at least have the User role.
If you want to remove the campaign from the campaign list, but still keep it accessible for future reference, this is the appropriate status. Archived campaigns are not visible to visitors.
To archive a campaign, you must at least have the Creator role.
campaign scheduler enables you to automatically play and pause a campaign at a specific date and time according to your needs.
Using the campaign scheduler also enables you to save time, especially when you want to set up a recurring campaign.
Scheduling a campaign may impact the campaign readiness if you select recurring slots. Depending on the recurrence you configure, 2 business cycles may coincide with more than 2 weeks.
You can schedule a campaign to be played and/or paused on a future date from the two following areas of the platform:
The test and personalization dashboard: click the status button and the dropdown list displays the Schedule option.
In the sidebar of the campaign creation flow: click the (schedule) icon.
You can either choose to play and/or pause your campaign once, on a specific date, with , or to schedule a start and/or end date for your campaign. You can also stop a scheduled campaign.
Once set up, the scheduled campaign will be easily identified on the dashboard thanks to a schedule icon next to the status button.
You can filter your campaigns dashboard on scheduled campaigns from the “All status” filter dropdown.
You can edit your scheduler parameters on any campaign.
For recurring campaigns, the schedule icon remains even when the campaign is scheduled to pause during the recurrence.
Scheduling campaigns to live or pause status between 23:55 and midnight is not possible in order to account for potential technical delays.
Not preventing it would cause, when scheduling on the edge of 2 days, campaigns to be played or paused the next day it was originally scheduled.
To plan a campaign with no recurrence, select Doesn’t repeat the drop-down list.
You can either plan a start date with no end date, an end date with no start date (for instance if your campaign is already live), or a start date (the date your campaign will be launched) as well as an end date (the date your campaign will be paused). To do so:
Enable the desired toggle(s).
Pick a date from the calendar or enter one manually.
Select a time (hour and minutes).
Select the time zone from the drop-down list. By default, programming will be based on the time zone configured in your account.
If the scheduled campaign contains a , make sure the end date of your widget matches your campaign programming. (e.g., if a campaign will be live from 1 PM to 2 PM, the countdown widget must end at 2 PM as well).
When scheduling a recurring campaign, you need to define intermittent slots to be repeated in the future as frequently as needed.
By default, campaign recurrence is inactive and set as Doesn’t repeat. To schedule a recurring campaign, you must select a predefined recurrence among the following:
Every day: the campaign will be played every day (from Monday to Sunday).
Every weekday: the campaign will be played every day from Monday to Friday.
Every weekend: the campaign will be played every Saturday and Sunday.
Or, create a custom recurrence that lets you choose which days you want your campaign to be played and/or paused.
Pick a start date from the calendar or enter one manually. This coincides with the date on which your campaign will be launched for the first time.
Select the time range (hour and minutes) during which your campaign will be live, or select All day.
Select the date and time you want your campaign to be paused (Ends on), or the number of times after which you want it to be paused (Ends after x time(s)), or select Never ends if you don’t want your campaign to be paused.
Select the time zone from the drop-down list, you can also search by typing the name.
Stopping a scheduled campaign may be useful when you want to disable the schedule configuration without changing the current campaign’s status. To do so:
From the dashboard, click the status button of your campaign and select the Play or Pause options, depending on the action you want to perform: The Schedule pop-in appears.
Click the Stop schedule button: The campaign keeps its current status (live or paused) but the scheduler is deactivated.
It may also be useful when you want to disable the scheduler mode and change the current campaign’s status:
From the dashboard, click the status button of your campaign and select the Play or Pause options, depending on the action you want to perform: The Stop schedule or Play schedule pop-in appears. If the campaign is currently live:
Click Stop schedule & Pause:
The campaign will be paused and the scheduler deactivated. If the campaign is currently paused:
Click Stop schedule & Play.
The campaign will be played and the scheduler deactivated.
You can subscribe to email alerts and be notified when a scheduled campaign is automatically launched or paused. To do so go to the and active the subscription.
Let’s say you have created a marketing campaign (personalization campaign) to promote happy hour discounts on your website, available only for users purchasing between 17:00 and 19:00 every Thursday for one month. When scheduling your campaign, proceed as follows:
Select the custom recurrence
Select Thursday (T).
Pick the date of the first Thursday you want your campaign to start as well as the corresponding time range (e.g., 4 February 2021 from 17:00 to 19:00).
Select the date you want your campaign to end (End date) or select Ends after 4 times. In this case, your campaign will be live every Thursday from 17:00 to 19:00 starting on February 4th, 2021, repeating 4 times. Your campaign will be paused on February 25th, 2021 at 7:01.
Activating the QA mode on a scheduled campaign means that it will be automatically launched or paused with the QA mode restriction.
For better usage of the QA mode and the scheduler, we recommend following this step:
QA your campaign with the QA mode and targeting criteria. You can also use the QA Assistant for this.
Once all your verifications are checked, remove the QA mode and pause the campaign
Reset the data from the reporting if needed
Then schedule your campaign for play and/or pause dates in the future.
The Spotlight widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
With Spotlight, you can provide new and engaging navigation options by highlighting selected products or product categories, as determined by you.
Spotlight is seamlessly integrated into your website as a banner, similar to our other widgets. The banner consists of customizable badges known as "Highlights," which allow you to feature an image, a title, and a redirect address.
The layout configuration for spotlight is similar to the banner one.
We offer three different layouts:
top banner
bottom banner (by default)
free placement (which allows you to place the widget wherever you want in the page flow)
Layouts are natively responsive.
Layer Position (z-index)
Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget position: above everything, below everything, or precisely fine-tuned.
The "Content" tab in the Spotlight widget settings allows you to define and manage the various Highlights that compose the widget. Each highlight represents a badge that contains an image, a title, a redirect link, and a tracking name. This tab provides an intuitive interface for configuring and organizing your Highlights according to your preferences.
Each highlight consists of specific elements that contribute to its appearance and functionality.
Thumbnail: The image you upload will be displayed within the Highlight. It's important to note that depending on the style configuration, the image may be cropped to fit the designated area. To ensure optimal display, we recommend using images with appropriate dimensions and aspect ratios.
Title: The title is positioned below the highlight and provides additional context for the Highlight. Keep in mind that the size of the text is limited by the size of the Highlight itself. Therefore, it is advisable to use concise and clear titles that effectively convey the intended message within the available space.
Link: The redirect link determines the page or destination where visitors will be directed when they click on the Highlight. By defining the appropriate redirect link, you can guide visitors to relevant product pages, category sections, promotional offers, or any other desired destination on your website.
With these configuration options, you can fine-tune the content of each Highlight within the Spotlight widget.
To add a new Highlight, simply click the "Add a setting" button. This action creates a new panel where you can input the necessary details for the Highlight as described above.
To reorder the Highlights, the interface provides dedicated buttons for easy rearrangement.
For added convenience, highlights control panels can also be moved directly into their graphics container. Simply click on a panel and drag it above or below another panel to directly reorganize the widget's highlights.
If you find that an extra Highlight has been added, or you want to remove a previously configured Highlight from the widget, simply click on the cross icon located within the configuration panel of the respective Highlight. This action will instantly remove the Highlight from the widget, ensuring that it is no longer displayed to your website visitors.
The "Style" tab in the Spotlight widget settings allows you to customize the visual appearance of both the widget banner and the individual Highlights.
For elements shared with the widget banner, the style configurations remain the same. You can define the following:
Container: Adjust the margin, background color, and other properties related to the overall container of the widget.
Border: Specify the border width, color, and other attributes for the widget container.
Within the "Style" tab, a dedicated section is provided to style the individual Highlights.
Here, you can configure the following aspects:
Highlight Size: Define the size of the Highlights using viewport width (vw) as the unit, representing a percentage of the screen width
Highlight Spacing: Set the spacing between the Highlights, also using viewport width (vw) as the unit
Border Thickness : Customize the width of the outer border surrounding each Highlight
Border Color : Customize the color of the outer border surrounding each Highlight
Note: Please note that for the last three alignment strategies (Space Evenly, Space Around, and Space Between), which are based on adjusting the spacing between the Highlights, selecting any of these strategies will override the specific spacing value defined for the Highlights. In these cases, the widget will automatically calculate and distribute the available space based on the selected alignment strategy. This ensures consistent and optimal spacing between the Highlights, as per the chosen alignment option.
Select the Triggering and Recurrence options you want to apply to the Spotlight widget.
We are supporting in the . This fully replaces the use of the “wait until” mode in an easy way for developers.
This criterion is using a instead of a simple DOM element query.
If this sounds too technical for you, don’t worry! This only impacts the backend behavior of our tag and won’t change the way you are using this criterion.
You can keep using it as usual and the behavior will be the same.
We added an option where you can decide if this criterion can change or not (default) over time. This can be useful if you know your element won’t be there at first but will appear after a while.
This is technically the switch between the “at page loads” option and the “wait until” mode but at the criterion level.
Keep in mind that if your goal is to make this validation works on a SPA, you better get interested in the [Automatic reload of the framework] option which would cover this use case.
While some data layers are available on page load (Google Tag Manager and Tag Commander do, for example), it is not always the case, particularly if you are using your own in-house data layer.
To handle each of the possible situations, you now have three options:
Check availability at page load
Check availability at regular intervals
It is a direct copy of the “wait until” mode but it is limited in its impact. Choose your looping interval between three values (100/500/1000 milliseconds) and the loop will stop after 10 iterations.
Use an event.
From the data layer or anywhere else, you can throw an event to our tag to validate the entirety or a part of a targeting. By setting up a hand-shake between your data layer and our tag, you will make sure to let our tag check its value only at the most appropriate moment.
Read more .
Every targeting coming from AB Tasty actions will be handled on our side. This includes Action Tracking targeting, but also transaction-based, segment-based or item-based targeting.
When one of these actions will be performed, our tag will reevaluate the corresponding targetings, if any.
You can still build up your own “wait until” mode. To do so, simply create a code targeting, set up a setInternal or setTimeout function in it and let it loop as long as you need!
Keep in mind that you might degrade your website performance if your loop isn’t appropriately designed.
Based on our observations and knowledge, we’ve considered there wasn’t a need for an alternative for the cookie targeting. A cookie shouldn’t change during the navigation and in the event it does, there are multiple ways to cover this situation, starting with a code targeting or by firing an event.
If you still have campaigns running with the “Ajax” mode, we recommend pausing or duplicating them. When duplicating these campaigns, if you still want to verify the targeting at regular intervals, you will need to use one of the methods explained above, as an alternative.
You can find the list of campaigns using this mode in the Performance Center.
Note that campaigns shouldn’t be running for more than one year, as this truly impacts the performance of your tag. From the beginning of July, we will completely remove this part in our tag to speed up its overall performance, and your campaigns containing “Ajax” mode will be automatically paused.
However, all of your new campaigns, including the duplicated one, won’t have this setting available.
The iframe widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
The iframe widget lets you embed any embeddable iframe.
An iframe is an HTML element that lets you display content from another web page (the same site or another site). It is similar to a link, but you don’t have to leave the page you are browsing to view the content. It creates a "frame" that encapsulates the remote page.
For example, YouTube videos are displayed in an iframe when you embed them into your website. It is pretty much the same thing for any web app which lets you embed part or all the content of a page. Generally speaking, except in cases where websites forbid it, any web page can be embedded into an iframe.
Here is a short list of what can be embedded: Videos (YouTube, Vimeo, TikTok, etc.), Images (Giphy, Facebook, 500px, etc.), Forms (Google Form, Typeform, SurveyMonkey, etc.), Maps (Google Maps, Mapbox, OpenStreetMap, etc.), Calendar/Agendas (Google Calendar, Calendly, etc.), Articles (Wikipedia, Imdb, etc.), Sound (Soundcloud, Bandcamp, etc.) and so forth.
There are two different layouts:
modal (pop-in)
free placement (which allows you to place the widget wherever you want in the page flow)
If the "free placement" layout is selected, you won't see the two following blocks (Dimensions & Layer).
Widget dimensions based on content
By default, the "Widget dimensions based on content" toggler is toggled. It saves you from having to worry about modal dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).
If you untoggle the toggler, you will be able to define both the width and the height of the pop-in. Last but not least, they can be configured (independently) in several dimensional units:
px (pixels)
% (percentage)
em (element, which actually means that it is based on the size of the text of the element: if your font size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another.
If you're digging the dimensional units in CSS, we strongly recommend reading this W3C article.
Preserve ratio (automatic height)
By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set a height, it takes what the modal needs and can even reach 100% of the available height in the viewport.
If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll down to read everything.
Known issue: the widget configuration form not overlapping the website
Once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width.
Layer Position (z-index)
Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget’s position: above everything, below everything, or precisely fine-tuned.
Please read the dedicated article on the matter: z-index article.
As you can see, there is not much in the Content tab for this widget. The only required input is the URL of any embeddable web page.
For example, in Chrome, If you see this in the widget rendering:
It means that the web page you are trying to embed is blocking its native embeddability. Any other web page should work.
Some web apps provide copy-and-paste-ready HTML snippets. Most of the time, you will need to delete the extra HTML and just keep the value of the src="" attribute; which is the iframe URL in short.
Here is an example with the Google Form provided embed code:
What you need to paste in the input:
Here is another example for Sketchab 3D models. The embeddable code is as follows:
What you need to paste in the input:
This is an example of a YouTube video (although we recommend using the Video Pop-in widget instead).
Here is what you need to paste:
Select the style options (Container, Border, Close button) you want to apply to your widget and customize it.
Background can be set up with an image using the image-fitting policy
4 options are provided:
"Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
"Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
"Fill": the image is resized to fill the background container without keeping the aspect ratio
"None": the image is left unchanged.
Select the Triggering and Recurrence options you want to apply to your widget.
The Scratch card widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
The Scratch Card widget enables you to display a pop-in containing an image (that may include some text) that the user can scratch using their mouse (or trackpad) to discover a special offer.
This feature can be leveraged to:
Reward customer loyalty with a discount or free delivery
Unveil coupons to your visitors
Add interactive & fun widgets to delight your customers
Unveil a new line of products
Create contests to drive revisits to the website
The Scratch Card widget is displayed as a modal (pop-in) that appears on top of the main screen. In the layout section, select where you want your image to be placed in relation to the text and select where you want your modal to be placed on the screen (9 available options).
For the "image on the left" and "image on the right" options, determine the width percentage of the image compared to the entire pop-in: between 20% and 80% of the available width.
By default, the "Widget dimensions based on content" toggle is ON, meaning that if you upload a large image, your modal will adapt accordingly based on the image (and text) ratio (length).
When the toggle is OFF, you can define the width and height of the modal independently using the following dimensional units:
By default, the height of the modal is set to "Preserve ratio (automatic height)". This way, you don't have to set a height; it takes what the modal needs and can even reach 100% of the available height in the viewport.
When the toggle is OFF, you can define a height. If the content is longer than the defined modal height, it will be scrollable.
Select the step you want to preview:
Before scratching
After scratching
Before scratching/ After scratching
Select the desired image by uploading it via your browser or by entering the image path.
Display title (optional): enter a title for your image, to be displayed above your message.
Message: enter a message, for example, to give the user instructions.
For the after scratching step, you must select the widget link type among the following options:
If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.
Select the style options (Container, Border, Close button and Underlay) you want to apply to your widget.
From here, you can configure the size and layout of your modal.
Background can be set up with an image using the image-fitting policy
4 options are provided:
"Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
"Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
"Fill": the image is resized to fill the background container without keeping the aspect ratio
"None": the image is left unchanged.
Select the Triggering and Recurrence options you want to apply to your widget.
The Custom code widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
The Custom Code widget gives you the flexibility to create any type of content by using HTML, CSS, and JavaScript, combined with the native widget options, such as layout, style, and condition settings. The Custom Code widget combines control of a standard widget with the flexibility of custom code.
You can use this widget to write your own code while still taking advantage of the existing native options in AB Tasty widgets. By default, the widget includes pre-written code (HTML, CSS, and JS) that generates a basic pop-in with a title, text, and two buttons, which you can easily customize or replace with your own code.
Full Customization: Tailor the widget precisely to your needs. Whether it's a simple pop-in or a complex interactive element like a carousel, form, or dynamic feature, you have the freedom to create it with custom code.
Utility Functions: Take advantage of built-in utility functions (such as UTILS.setValidationRecurrence(), UTILS.hideWidget(), etc.) to simplify tasks like tracking user interactions, managing closing behavior, and handling validation. These utilities streamline the creation of interactive experiences while maintaining consistency within the platform.
Collaboration-Friendly: The widget supports collaboration between tech and non-tech users, allowing both to work together on the same widget efficiently.
Below are the configuration options for the Custom code Widget.
The available layouts for the widget are:
• Modal
• Top banner
• Bottom banner
• Free placement: This option lets you position the widget relative to an existing element on the page (e.g., <div>, <p>, <h2>, <section>).
If you choose the modal layout, you can position it on the page by selecting a spot on the grid. You can also specify whether the widget’s width should adjust automatically based on its content or set a fixed width.
For modal or top/bottom banner layouts, you’ll have the option to select a z-index value for the widget. By default, widgets with these layouts are added to the DOM at the same level as the <body> element, meaning they inherit the same z-index value.
However, you can choose a different z-index from the available options:
The content tab includes the following areas:
- HTML
- CSS
- JavaScript
This section allows you to customize your widget’s content. The example shows a pop-in with a title, text, and two buttons, but you can add any HTML code you want. As you edit, you can preview your changes in real time directly within the editor interface.
This section lets you customize the style of your widget (e.g., colors, fonts, spacing, etc.). The default styles are linked to the basic pop-in, but if you modify the default HTML, you’ll need to adjust the CSS accordingly.
The widget container is created with a unique CSS class customcodewidget_container_{{UNIQUE_ID}}. This allows you to target styles specifically for the widget by building your CSS selectors based on this class (as shown in the example).
You can also customize your widget’s style using the Style tab. However, any code in the CSS box will take precedence, as it applies an overlay of custom code.
This section allows you to customize your widget’s behavior. The code entered here will run when the widget is about to appear on the page, but it can't be previewed in the editor. You'll need to thoroughly QA the widget to test and view this JavaScript code.
You can use built-in variables:
contentElement: Refers to the HTML part of your widget.
UTILS: Offers useful functions, such as hiding the widget after a certain time.
Placeholders like {{UNIQUE_ID}} and {{TEST_ID}} make your widget adaptable:
{{UNIQUE_ID}}: A unique identifier for your widget.
{{TEST_ID}}: The current campaign ID.
These placeholders ensure your widget functions correctly, even when multiple widgets are on the same page.
You can also customize your widget's behavior in the Conditions tab, but any code in the JavaScript box will take precedence, as it applies an overlay of custom code.
For more customization options, go to the .
The Main Information page is the first step toward all new campaigns.
In this page, you'll have to choose:
The type of your campaign
The name of your campaign
The hypothesis of your campaign
One URL as a sample of the page you want to optimize
The type of editor you want to use (visual editor/ code editor)
The method to load the visual editor
This page has 2 status:
The draft status, before you click "Save" for the first time. At this point, you can quit without saving, and you won't create any new campaign at all.
The saved status, after you click "Save"
Generally you'll land on this page after having clicked on "Create" campaign on .
At the top of the page, the dropdown pre-selects the type of campaign you've chosen via the dropdown in the campaigns dashboard. At this stage, you can still change your mind and select a different type of test, as the step status is draft.
Write a clear hypothesis for your A/B test to define its objective. A well-written hypothesis helps your team distinguish between versions in the Visual Editor. You can use the Hypothesis Helper to help formulate your hypothesis.
The Evi Hypothesize helps you write the perfect hypothesis. It provides an automatic checklist that tracks all essential hypothesis elements as you enter your text. Your hypothesis is considered well-formulated when all checklist items are complete.
You can also interact with the AB Tasty's AI through a CTA as soon as you started typing a bit of your hypothesis. Click on Go Further with AI to receive insights about what is missing in your hypothesis. You can also directly apply one of the hypothesis suggested by clicking on the Use this button.
Note that, as soon as you changed your hypothesis, you can reload the AB Tasty's AI to receive the updated insights and suggestions.
The Sample URL is the exact page, or a sample of the pages that share the same layout, that you want to test/ personalize/ patch/ track.
In your campaign, this URL will be used:
To load the Editor of your choice (Visual or Code)
As a pre-filled targeted URL in the targeting step
This won’t necessarily be the final targeted page of your campaign. See the for more information.
Don’t use URL parameters in the sample URL field, otherwise, you won't be able to save the step.
By default, when you load a page that requires authentication (e.g. a client account page) in the URL field, or a conversion funnel page, the page displayed in the editor will be empty or will show an error because it often requires session information (e.g. products to be displayed in the cart page).
To work around this issue, you need to inject the source code of the page within the Main Information step of the creation flow.
There are two ways to do this:
Using the Load Editor with embedded source code option manually, available here in the Main Information page
Or using the Apply HTML option within the AB Tasty Chrome extension (see this )
The first method with source code consists of pasting the page’s source code directly into AB Tasty. To do this:
Go to the URL that you want to load in the editor
Right-click on the page, and select Inspect
In the Elements tab of the console, go to the first line of code: the <html> tag
Right-click on it, then select Copy → outerHTML. You will get the entire source code of the page with all the scripts and information needed
The URL field needs to remain filled with your URL - this is mandatory to save and go to the next step.
At this point, you can select one of two ways to create your A/B Test variation(s):
Using the Visual Editor (and WYSIWYG features, widgets, and the possibility to add some JS and CSS code)
Using the Code Editor to fully implement your campaign with code
Either way, you’ll be able to come back to the Main Information page to switch the editor, or to change from the Code Editor to the Visual Editor, and vice versa.
Once your choices and setup are completed, you can click Save & Go to the Next Step.
Once you click Save, your A/B Test will be generated (with a unique ID) and will appear in the Tests dashboard. When you come back to the Main Information Page, everything will be editable, except for the type of test (the dropdown menu will no longer be available). At this point, if you need to change the type of campaign, you’ll have to start from scratch or transform your current A/B Test to another type of test directly on the dashboard, using the
The duplicate campaign option is available on both the , which list every campaign created on your account. To learn how to perform a duplication, please refer to the following .
This option allows you to duplicate an existing campaign, which means copying its entire configuration into a new campaign, either by keeping the same type (identical duplication) or by transforming it into a new type of campaign (duplication with transformation). This prevents you from having to configure every step of a new campaign from scratch and saves you time when setting up a new campaign.
Elevate your website’s functionality and engagement effortlessly with AB Tasty's widgets.
Widgets are ready-to-use, customizable building blocks that help you quickly add new features, messages, or interactive elements to your website—without needing to code. Whether you want to highlight a special offer, collect feedback, track user behavior, or simply make your site more engaging, widgets make it easy.
From banners and pop-ins to progress bars, surveys, and social proof notifications, each widget is designed to be easily customized to your needs. With just a few clicks, create impactful campaigns without coding.
Curious about what each widget can do, or looking for inspiration? Explore our articles to discover all the possibilities and learn how to get the most out of widgets in AB Tasty!
👉 👉
This article explains how to configure a campaign with a widget that displays content in multiple languages. Use this process to ensure your widget content is localized for each audience.
The Image Pop-in widget is part of the Promotional Content widget category. For more information on the widgets, please refer to .
The Image Pop-in widget lets you display a pop-in containing an image.
This widget can be useful if you want to catch your visitor’s attention on a specific offer, give more details on a specific option, item, or accessory by clicking on a button/link on a product page, or before leaving a page/website in order to retain your visitor. It can also be used for special events.
This page will help you understand and fully use the Targeting Frequency in the Targeting step of each campaign.
When a page loads, the AB Tasty Tag verifies the targeting conditions that you configured inside this targeting step. The 'When' section adds new timing conditions on top of what you previously configured (URL of the page, specific page elements, triggers, and segments). The Frequency condition is set on the unique visitor level (cookie). They will be affected to the campaign only if they meet ALL the targeting conditions.
By default, the visitor will be affected "anytime" if they meet the other conditions (segments/pages/triggers aka who/where/how).
A Minimum Detectable Effect (MDE) is the minimum uplift you should reach in a given timeline to consider the results of a campaign as statistically significant.
MDE is important in the implementation of an A/B test because it directly influences how long the test needs to run and how large a sample size is required.
The MDE can be calculated using open-source tools, but you can also base it on data calculated directly by AB Tasty.
You can either choose to rely on data AB Tasty collected on your previous experiments (that have been live and collected data), or enter data you want to let AB Tasty calculate it manually.
const selector = '#tracked_element';
document.addEventListener('click', ({ target }) => {
if (target.matches(selector) || target.closest(selector)) {
ABTastyEvent('', null, 804214);
}
}, { capture: true });Tracker Name: The tracker name field allows you to assign a specific name to track clicks on the individual Highlights. Tracking the clicks enables you to set them as campaign objectives or goals. By assigning custom tracker names, you can easily reference and identify these clicks within the page of goals or campaign tracking.
Border Radius: Adjust the border radius to alter the shape of the Highlight, ranging from rounded to square
Inner Border width: Specify the width of the inner border, which forms the graphical area between the outer border and the Highlight image
Inner Border color: Specify the color of the inner border
Text Styling: Configure the text color, font, style, and size within each Highlight
Alignment: Choose from six alignment strategies:
Left Aligned: Aligns the Highlights to the left, maintaining their order
Center Aligned: Aligns the Highlights at the center, preserving their order
Right Aligned: Aligns the Highlights to the right, retaining their order
Space Evenly: Equally distributes the available space within the banner among the Highlights
Space Around: Allocates equal space on the left and right of each Highlight, maintaining a balanced distribution
Space Between: Distributes the available space evenly between the Highlights, with the outermost Highlights touching the edges of the widget







Paste this code into the dedicated window within the Main Information step
Click SaveThe page will load in the editor and you can apply your desired changes.






That’s obviously an illustrative dummy example. We have already added, ages ago, counter-measures to make sure that our tag won’t loop for impossible criteria to happen. Unfortunately, there are scenarios where we can’t make sure of this, even legit scenarios where the tag will be looping for seconds before validating your criteria.
This is where the logic of building a universal and unique solution arrives at a dead-end. Although we understand this mode was easy and convenient to use, we had to split it into multiple alternatives to make sure we keep offering you the same abilities without sacrificing your website performance.
For months, we’ve gathered feedback and analyzed our data to understand how you are using this tool. Then, we’ve designed, one after another, alternatives to allow you to do the exact same thing, but differently (and more efficiently).

























Yes (until paused date is reached)
User
Live
Yes
User
Paused
No
Creator
Analysis
No
User
Ended
No
User
Archived
No
Creator
Status
Visible to your targeted segment of visitors
Minimum role to activate the status
Draft
No
Creator
In QA
No, only visible to IP, cookie or URL enabled in the QA step
Creator
Ready
No
Creator
Schedule (to play)
No (until live date is reached)
User








Schedule (to pause)
Whichever is the highest of vw or vh
Unit
Description
px
Pixels
%
Percentage
em
Element, meaning that it is based on the size of the text of the element.
For example, if your font-size is 18 px, then 1 em = 18 px
vw (% of viewport width)
1/100th of the window's (or viewport) width
vh (% of viewport height)
1/100th of the window's (or viewport) height
vmin (% of viewport minimum size)
Whichever is the smallest of vw or vh
Unit
Description
The button is a link
On clicking the button, the user is redirected to another page.
You must enter the label of the button and the URL of the page you want the visitor to be redirected to.
A click on the button closes the widget
On clicking the button, the widget closes.
You must enter the label of the button.
The whole widget is a link
On clicking on any area of the widget, the user is redirected to another page.
You must enter the URL of the page you want the visitor to be redirected to.
A click on the whole widget closes the widget
On clicking any area of the widget, it closes.
None
There is no button, and nothing happens when clicking on the widget.


vmax (% of viewport maximum size)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)






<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdiYVa8YaIRq69na0g-s8GJQBBDKK3T7luWb4xYH5B2yYEytw/viewform?embedded=true" width="640" height="601" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>https://docs.google.com/forms/d/e/1FAIpQLSdiYVa8YaIRq69na0g-s8GJQBBDKK3T7luWb4xYH5B2yYEytw/viewform?embedded=true<div class="sketchfab-embed-wrapper">
<iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/ec283d217efe4ef39f0e19ae3b3396a1/embed?autostart=1&preload=1&ui_controls=1&ui_infos=1&ui_inspector=1&ui_stop=1&ui_watermark=1&ui_watermark_link=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
<a href="https://sketchfab.com/3d-models/lego-geralt-of-rivia-ec283d217efe4ef39f0e19ae3b3396a1?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Lego Geralt of Rivia</a>
by <a href="https://sketchfab.com/sir_luizo?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">sir_luizo</a>
on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
</p>
</div>https://sketchfab.com/models/ec283d217efe4ef39f0e19ae3b3396a1/embed?autostart=1&preload=1&ui_controls=1&ui_infos=1&ui_inspector=1&ui_stop=1&ui_watermark=1&ui_watermark_link=1<iframe width="560" height="315" src="https://www.youtube.com/embed/C71YkqN0pEA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>https://www.youtube.com/embed/C71YkqN0pEAClick Save.
Click Save.



The table below lists all existing types of campaigns and displays the duplications that are possible for each.
The column on the left is the original campaign that will be duplicated or duplicated with transformation. The header line displays the new campaign that will be created by the duplication/transformation.
duplication is possible
duplication with transformation is possible
duplication with transformation is not possible
Sometimes it’s possible to duplicate with transformation A into B, but not B into A
The column on the left represents your initial/ reference existing campaign.
Read the available possibilities for transformation on the line. For example, if I pick an AB Test as my reference campaign, I can read on the first line:
AB Test is duplicable into an other AB Test
AB Test is transformable into:
a Multipages test
a Simple Personalization
a Multipages Personalization
a patch
AB Test is not transformable into:
a Multivariate test
a Multi-experiences Personalization
a Multipages patch
You can either duplicate your campaign to the same account or another account. Below you’ll find a list of what is duplicated from the original campaign to the duplicated one. Any elements not duplicated will need to be manually configured after the duplication, in the campaign workflow.
Content
Is this content duplicated? Yes ✅ No ❌ Depends 🚧
Main information:
Hypothesis/description of the campaign
Sample URL
✅
Editor:
Modifications (visual editor changes, widgets, JS, CSS)
Variations / Pages / Subtests / Experiences
✅
Goals: Available in all types of campaigns except patches.
Duplication in the same account: all duplicated
Duplication in another account: only Action Trackings are duplicated
🚧
Targeting – Who section:
Duplicated for every use case except patch duplication (test to patch or Personalization to patch)
🚧
Targeting – Where section
✅
Targeting – How section
✅
In this section, we will present every possible use case in more detail.
From an AB test you can create the following types of campaigns:
An AB test
This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).
A Multipages test
The duplicated Multipages test will integrate the original AB test as its first page. You need to set up at least a second page (which is automatically generated during the duplication). This second page will remain empty as long as you don’t configure it.
A simple Personalization
This use case can be used to personalize your website using a successful variation, for a specific user' segment. The duplicated personalization will be based on the variation of your AB test chosen from the duplication pop-in. This is useful if you want to allocate 100% of the traffic to a winning variation on a specific segment without any risk of corrupting your test data and to make sure every single targeted user sees the new version of your website that generated the best results during a test. To discover your test campaign result on specific segments, you can use filters in the reporting.
A Multipages Personalization
This use case aims at creating a personalized workflow based on a successful variation, for a specific user' segment. The duplicated Personalization will be based on the variation of your AB Test chosen from the pop-in (as in the previous use case). But here you will need to configure at least a second page to complete your Multipages Personalization.
A patch
This use case can be used to patch your website using a successful variation, waiting for a definitive release of the modification on your side.
From a Multipages test you can create the following types of campaigns:
A Multipages test
This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).
An AB test
This will reduce the scope of your original test. The duplicated test will be based on a specific page chosen from the pop-in during the duplication process. You will be able to add variations and make all the necessary changes afterward in the campaign editing workflow. This can be useful to transform a complicated Multipages test into a simple AB test (i.e: to reduce the test’s scope or to simplify analysis).
A Multipages personalization
This use case can be used to personalize your website using a successful variation, for a specific user' segment. The duplicated personalization will be based on the variation of your AB test chosen from the duplication pop-in. This is useful if you want to allocate 100% of the traffic to a winning variation on a specific segment without any risk of corrupting your test data and to make sure every single targeted user sees the new version of your website that generated the best results during a test. To discover your test campaign result on specific segments, you can use filters in the reporting.
A patch
This use case can be used to patch your website using a successful variation, waiting for a definitive release of the modification on your side.
This will reduce the scope of your original test. The duplicated patch will be based on a specific page chosen from the pop-in during the duplication process. This can be useful to transform a complicated Multipages test into a simple patch.
A Multipages patch
This use case can be used to patch your website using a successful variation, waiting for a definitive release of the modification on your side.
With a Multipages patch, you will be able to keep the whole scope of your original Multipages test.
From a Multivariate test you can create the following type of campaign:
A Multivariate test
This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).
From a simple Personalization campaign you can create the following types of campaigns:
An AB test
This is useful when you want to do another round of testing on a Personalization that you have already put into production (i.e. to challenge your message, according to a new context on your website or a new audience). The duplicated test will enable you to test your personPersonalizationlization with the original version of your website and other variations if needed. The test will have one unique variation natively, but you will be able to add more inside the campaign workflow. Your configuration will be imported into the variation (campaign information, goals, targeting set-up).
A simple personalization
This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).
A Multipages personalization
This will create a personalized workflow based on a first-page Personalization. The duplicated Personalization will integrate the original Personalization as the first page. You will need to set up at least the second page, which is generated by default but remains empty as long as you don’t set it up
A patch
Normally a Personalization is displayed to a specific segment of your traffic. But sometimes you can create simple Personalization and target all your traffic. In this case it's better to transform it into a patch if you don't need to follow-up data. This way, it will be easier to organize your work into the campaign dashboards. The new patch will be 100% equivalent to the original Personalization, except the fact that it's impossible to target patches on a specific segment, so the original segment in the simple Personalization will be removed from the new campaign.
From a Multipages personalization campaign you can create the following types of campaigns:
A simple personalization
This can be used to keep only one page from your existing Multipages personalization. The duplicated personalization will be based on the page chosen from the duplication pop-in. Every setting from this page will be imported to your new campaign (modifications, goals, traffic allocation, and targeting set-up).
A Multipages personalization
This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).
An Multipages test
This is useful when you want to do another round of testing on a Personalization that you have already put into production (i.e. to challenge your message, according to a new context on your website or a new audience). The duplicated test will enable you to test your personPersonalizationlization with the original version of your website and other variations if needed. The test will have one unique variation natively, but you will be able to add more inside the campaign workflow. Your configuration will be imported into the variation (campaign information, goals, targeting set-up).
From a Multi-experiences Personalization campaign you can create the following type of campaign:
A Multi-experiences Personalization
This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).
A Simple Personalization
This can be used to keep only one experience from your existing Multi-experiences Personalization. The duplicated Personalization will be based on the experience chosen from the duplication pop-in. Every setting from this page will be imported to your new campaign (modifications, goals, traffic allocation, and targeting set-up).
From a patch campaign you can create the following type of campaign:
A patch
This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.)
From a Multipages patch campaign you can create the following type of campaign:
A Multipages patch
This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).
From an AA Test campaign you can create the following type of campaign:
An AA Test
This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).\
Progress Bar widget: Show your visitors how close they are to the goal you want them to reach. It can be a cart amount, a scroll rate, a remaining duration, or any other countable variable.
Banner widget: Make your visitors aware of an offer or an important message by displaying a banner with text and a button.
Countdown widget: Display a countdown or text and include a button. Urge your visitor to make a decision by offering a simple task to complete.
Image pop-in widget: Capture your visitor's attention with a modal containing an image, text, and a button.
Capture your visitor's attention with a modal containing text, a button, and a background image.
Capture your visitor's attention with a modal containing a video, text, and a button.
Embed an iframe on your website. It can include a form, a map, a survey, an agenda, a spreadsheet, a gif, a flipbook, a 3D model, another web page, etc.
Help your visitors understand the action behind a button or the meaning of a feature by displaying a tooltip.
Display a card that your visitors can scratch to discover a special offer.
: Offer your visitors a new way of browsing by highlighting the products you want!
Display a sliding popin opened by a fixed action button.
Element Visible Tracking widget: Track your visitor’s scroll progression on a page based on elements made visible on the visitor's screen (viewport).
Dwell Time Tracking widget: Track the time your visitors spend on a page by creating a duration goal.
Scroll Rate Tracking widget: Track if your visitors have reached a pre-defined scroll percentage on a page.
Iframe Click Tracking widget: Track clicks in an iframe. Track clicks on Facebook like buttons, Google Adsense ads, YouTube videos, or any other iframe. Clicks must not be consecutive in order to be counted. This means that in order to count a second click, the user must click elsewhere before clicking on the iframe. This preserves reporting results to be distorted with repetitive clicks and spam.
Before-After Image widget: Display a before and after image to present or compare products.
Search & Replace widget: A/B test your copy and keep the best-performing wording by automatically replacing one string with another.
Sticky Element widget: Stick an element at the top or the bottom of the page or element to make it clickable at any moment.
Virtual Click widget: Keep your visitors from clicking on a specific element by automatically clicking on it. Useful to pre-filter result pages, hide some modals or banners, or redirect.
Attach an icon of your choice to some elements of your page to celebrate or promote your content.
Capture your visitor's attention with an animated effect on the page. Use the snowflake or upload your own image.
Invite your visitors to easily share your pages on social media by displaying a customizable list of sharing buttons.
Social proof widget: Display the number of views or purchases for a product or a page over a defined period of time.
NPS widget: Collect your visitors scoring with a numeric scale, email address and feedbacks by displaying a "Net Promoter Score" satisfaction survey. Bonus: reuse results to create audience segments on which to target future personalization campaigns
CSAT widget: Collect your visitors feeling about a specific experience, email address and feedbacks by displaying a "Customer Satisfaction" satisfaction survey. Bonus: reuse results to create audience segments on which to target future personalization campaigns
Custom Widget: Custom widgets are reusable code snippets (JavaScript, CSS, HTML) tailored by your team for needs that standard widgets don't cover, like unique designs or trackers. They allow non-technical users to customize via editor forms. Examples include custom pop-ins and product carousels. These widgets are owned and managed by you, not AB Tasty.
Custom Code Widget: The Custom Code Widget in AB Tasty allows direct injection of HTML, CSS, and JavaScript into campaigns. It's ideal for unique customizations when full control is needed, but without requiring widget reusability. Utilize built-in utilities and real-time previews. Best suited for advanced users
Create a new campaign.
If you need more information about campaign creation, read our dedicated article.
In the Main information page > Options panel, toggle on the Campaign localization option
In the Sample URL to load in the editor field, enter the URL of a page in one of your chosen languages.
Example : "https://mywebsite.com"
Choose the target languages:
Open the drop-down menu.
Select all languages you want to support in your campaign.
Click on Save & Go to the next step to access the editor.
The Preview localization button (language flag) appears at the top of the editor.
Add and configure a widget
Insert a widget into the page.
Configure the widget content in the primary language
.
Open the Localization interface
In the Editor action bar, click on the Translations button.
In the translation windows, enter the translated content for each selected language.
Click on Save changes.
The widget content is now available in all selected languages.
On the top of the editor, click on the Preview button (Flag).
Select the language you want to preview. A confirmation box opens.
Click OK to open the preview. Your widget appears in the selected target language.
Review each translation to ensure accuracy.
If you spot an issue,
In the Editor action bar, click on the Translations button.
Fix the target text.
Click on Save changes.
In the targeting phase, in the Page(s) block, enter the URLs for every page and language you want to target.
Example:
Enter condition "is https://mywebsite.com" for your source website
Enter condition "is https://mywebsite.com/fr" for French version of your website
Enter condition "is https://mywebsite.com/se" for swedish version of your website
This ensures the localized widget displays on the correct pages for each language.
Your campaign now includes a widget that displays localized content based on the visitor’s language.
We have five different layouts: four with text (image on the right, image on the left, image below, image above) and one without text (image only). By default, the "image only" layout contains a button, but you can remove it.
For the "image on the left" and "image on the right", you can choose the image over text ratio. By sliding the cursor on the axis, you can configure the image to take up 20% to 80% of the available width.
Widget dimensions based on content
By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about the modal’s dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).
Other options:
If you untoggle the toggler, you will be able to define both the width and the height of the pop-in.
These can be configured (independently) in several dimensional units:
px (pixels)
% (percentage)
em (element, which actually means that it is based on the size of the text in the element: if your font size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)
Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another.
If you're digging the dimensional units in CSS, we strongly recommend reading this W3C article.
Preserve ratio (automatic height)
By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set a height, it takes what the modal needs and can even reach 100% of the available height in the viewport.
If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll down to read everything.
Known issue: the widget configuration form not overlapping the website
Once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is resized to the available viewport/window's width.
Layer Position (z-index)
Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget’s position: above everything, below everything, or precisely fine-tuned.
For more information, please read the dedicated article on z-index.
As this widget is an image pop-in, the first thing you will be asked to do is add an image. By clicking "Select an asset from the Assets Library", you can either select an existing asset or upload an image from your computer.
For the first four layouts (image on the right, image on the left, image below, image above), you can choose whether to display a title. Maximum length is 255 characters.
For the first four layouts (image on the right, image on the left, image below, image above), the message is mandatory. You must fill in the text area.
If you don't want to display a text, there are two options: use the "image only" layout or type a message in the text area, save the widget, and hide the element in the editor.
The text area supports multi-line messages. You can use HTML markup to add ordered or unordered lists. All the other styling aspects should be configured through the "Style" tab.
You can add also emojis. Click here to learn how.
You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.
"The button is a link": you will have to specify a button URL and a button text. The widget will display a button.
"A click on the button closes the widget": you will have to specify a button text. The widget will display a button.
"The whole widget is a link": you will have to specify a URL. The widget will not display a button.
"A click on the whole widget closes the widget": you won't have anything to add. The widget will not display a button.
"None": the widget will not be clickable.
If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.
Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.
Background can be set up with an image using the image-fitting policy
4 options are provided:
"Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
"Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
"Fill": the image is resized to fill the background container without keeping the aspect ratio
"None": the image is left unchanged.
In the "Text" collapsible group, in the "Style" tab, defining the alignment will impact both message and button.
If you apply a large border radius to the pop-in, it will impact the image and will round the two corners affected by the setting.
If you want to round the two remaining "square" corners of the image, you will have to do so in the editor (select Element, Edit Style, Border tab, and enter the same border radius value).
To display a round pop-in, use one of two options:
1) Set your widget up, save it, open variation menus in the editor, click on "Add CSS" and add:
.ab_widget_container_popin-image_content {border-radius: 50% !important;}
2) Select the "image only" layout, upload a "round image" with transparent background, and use a transparent background color in the "Container" group in the "Style" tab.
Select the Triggering and Recurrence options you want to apply to the Image pop-in widget.

Open the When will the campaign be displayed section and select one of the following Frequency options: &#xNAN;- Anytime (default option): for the visitor to be targeted each time they land on the page and respect other targeting conditions. &#xNAN;- Once: for the visitor to be targeted only once if they land on the page and respect the other targeting conditions. &#xNAN;- Once per session: for the visitor to be targeted only once per session if they land on the page and respect the other targeting conditions. &#xNAN;- At regular intervals: for the visitor to be targeted at specific regular interval. Intervals should then be configured (see below)
Click Save step.
ATTENTION
The Targeting Frequency option is a targeting condition allowing you to add a temporal condition of targeting upon unique visitors. The frequency is based on the ABTasty cookie value. Learn more about it in our developer documentation. In this sense : - It differs from the widgets recurrence setup as it is not a display condition but a targeting acceptance condition affecting individually unique visitors. - It also differs from the Scheduler as the Frequency options are only a targeting condition not affecting the campaign status (live/pause), the latter impacting all visitors without discrimination.
Focus on the Regular Intervals configuration:
This option allows you to target your visitors on a specified timeframe. It's really useful to be able to promptly send specific messages to your visitors, and have confidence around the visibility of this message.
To configure the regular intervals of the campaign's targeting, follow the steps below:
Open the When will the campaign be displayed block and select the At regular intervals option in the "The targeted segment will see the test" list.
Determine the regular intervals of the campaign's targeting using the Day, Week, or Session option, combined with the numerical selector.
Click Save step.\
Other example, if you want to display a message targeting all your URLs (or a wide ‘contains’) and having as frequency option ‘every 2 sessions’, the message will not only appear once on one page during the ongoing session as you may expect. Instead, the user will be affected on every targeted page ('Where' section) during the ongoing session.
The same goes for 'every x days' and 'every x weeks' conditions. If you want to display the modifications made only one time per session, please use the frequency options 'Once per session'. Meaning that if I choose each 3 days, I will see the campaign on the day 1 whatever the session or the number of time I see the campaign during the day, same on the day 4, then on the day 7 etc…
First day starts at 0.00am the given day depending on the recurrence set up by the customer
Last day ends at 23.59pm the given day depending on the recurrence set up by the customer
We use the ABTasty cookie (campaign’s timestamp of the last time the visitor has seen the campaign and session count) to manage the interval with the tag and our API ( See documentation) :
1 - QA day and week intervals:
You can edit the cookie to QA the frequency by replacing the timestamp of the last time the visitor saw the campaign (using this website or another), saving the cookie, refresh the page and QA again.
The tag will compare the timestamp of the last time the visitor has seen the campaign and the current time locally on your browser, thus you cannot QA the future so you need to QA it backward from your local time to test past timestamps according to your frequency scenario.
2 - QA session interval:
For every x session frequency, you can play with the first part of the cookie and the ns attribute : the tag and API do a count there.
Example :
If I am at my 1st session as a unique visitor with this uid, ns=1
During this session I see the campaign which has a recurrence of every 3 sessions.
If I want to QA the frequency at the second session after seeing the campaign the first time to be sure I am not affected to it, I will change the ns count by ns=1+1 session) so ns=2
If I want to QA the frequency at the 4th session after seeing the campaign the first time to be sure I am affected to it 3 days after, I will change the ns count by ns=1+3 sessions) so ns=4

When clicking “AB Tasty based data”, you can search for an experiment that has the exact same configuration as the A/B Test you want to launch.
For example:
Targeting
URL Sample
Primary Goal
You can select several already existing targeting such as:
Saved Page
Segment(s)
Trigger(s)
Note that if you select a Saved page, the URL sample won’t be selectable anymore.
URL Sample is designed to be a "is". Meaning that MDE calculation will compute all the URL containing this Sample. So if you enter https://www.abtasty.com, all URLs containing this sample whether or not they include other parameters will be computed in the research. (https://www.abtasty.com?test=1, https://www.abtasty.com?test=2, https://www.abtasty.com?test=3, etc.) The Primary goal, has to be an already existing goal (already selected in a campaign that had collected data), otherwise, AB Tasty will not have any data to compare with.
AB Tasty will then search for all experiments which have been live over the past months with the configuration you selected, and will calculate the MDE based on data collected.
The results are accessible directly through the Reporting menu:
There are three possible results here:
Among all the experiments that have been running, we have found a match (A/B test with the same configuration) with enough data to calculate a proper MDE. In this case, you will see a graph with the results. (See an example below)
We have found an experiment with the same configuration, but not enough data. We advise you to either create an A/A Test to start collecting data, try another configuration, or manually calculate it using the “Manual calculator” option.
We haven’t found any experiment with the same configuration. You can still create an A/A Test to start collecting data, try another configuration or manually calculate it using the “Manual calculator” option.
The value indicated by the curve is the growth you should reach if you want your test to be statistically significant in the given timeline. Considering that, you might ask yourself if you can reach 6.75% growth in 35 days. If it’s not the case, your experiment might not be worth launching.
After analyzing your MDE results, you can create a campaign from the configuration you chose to base the calculation, or you can try another configuration.
You can also link the MDE to a specific campaign.
You can still manually calculate the MDE of your future experiments by providing data you can have in your third party tools.
You must indicate the following data:
Total number of visitors of 14 days
The reference Conversion rate on your primary goal
The number of variations you want for your future A/B test
The calculation results are displayed as a graph. Its structure is the same as the AB Tasty Based data calculation.
The value indicated by the curve is the growth you should reach if you want your test to be statistically significant in the given timeline. Considering that, you might ask yourself if you can reach 6.75% growth in 35 days. If it’s not the case, your experiment might not be worth launching.
After analyzing your MDE results, you can either create a campaign or try another configuration and start the process again.
As a CRO manager, I want to build a test on a specific page of my website, but I’m afraid of the time the statistical significance can take to be reached. Therefore, using the MDE with the AB Tasty based data will help me understand if I should (or shouldn’t) launch my experiment on that perimeter.

To compare a product (before using the product and after)
To test a new way of displaying images on your product pages
To showcase an offer (“Drag to discover your bonus”)
The Before-After image widget has two available layouts:
This option enables you to display the widget as a window that appears on top of the main screen. In the layout section, select where you want your modal to be placed on the screen (9 available options).
This option enables you to position the widget in a specific place in relation to an existing HTML element:
Click Select element.
On the page, select the element on which you want to hook the widget.
Select the appropriate option to position the widget Before, At the Start, At the End, or After the element.
Before
Fix the widget before a specific element of the page
After
Fix the widget after a specific element of the page
At the Start
Place the widget in the HTML code, at the start of the element definition
At the end
Place the widget in the HTML code, at the end of the element definition
Option
Usage
Select the first image
Select the desired image by uploading it from your browser or by entering the image path. You must add two images.
Select the second image
Option
Usage
Display a title
Enter a title common to both your images that will be displayed above the first image (depending on the chosen configuration) and above your message (if any).
Display a message
Enter a message common to both your images that will be displayed above the first image (depending on the chosen configuration).
Display image captions
Enter a caption for both your imported images. This caption will be displayed below each image.
You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.
"The button is a link": you will need to specify a button URL and a button text. The widget will display a button.
"A click on the button closes the widget": you will need to specify a button text. The widget will display a button.
"The whole widget is a link": you will need to specify a URL. The widget will not display a button.
"A click on the whole widget closes the widget": you won't need to add anything. The widget will not display a button.
"None": the widget will not be clickable. If you use a background image which looks like a "big ad", we recommend selecting "The whole widget is a link" and removing the paragraph with the editor once the widget is set.
If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.
Select the style options (Container, Border, Close button) you want to apply to your widget.
From here, you can configure the size and layout of your modal.
Select the Triggering and Recurrence options you want to apply to your widget.





The Mutually Exclusive Experiment (M2E) feature allows you to run multiple experiments simultaneously on the same audience and with the same primary goal—without introducing UX conflicts or data bias.
➡️ To learn more about the benefits and potential pitfalls of this feature, see read our blog article: Mutually Exclusive Experiments: Preventing the Interaction Effect
To create a group:
Go to the Campaigns dashboard
Click the three dots next to the campaign.
Two options are possible: Add to exclusion group or Manage exclusion group, depending on whether the campaign is already part of a group.
If the exclusion group is not locked, you can add additional tests:
Go to the Campaigns dashboard
Click the three dots next to the campaign.
Two options are possible: Add to exclusion group or Manage exclusion group, depending on whether the campaign is already part of a group.
In the Campaigns dashboard, go to the Exclusion group tab to view and manage your groups. The number in parentheses indicates how many exclusion groups exist.
Click Manage next to a group to view or edit it, depending on its status.
An exclusion group remains unlocked until at least one of its campaigns is live. While unlocked, you can:
Add or remove tests
Activate QA mode (by enabling IP address, URL or cookie targeting) without locking the group
Once any campaign in the group is live, the group becomes locked.
By clicking on the manage button, you can still:
View its configuration
Delete the group if all tests are paused
You cannot:
Modify the configuration
Relaunch paused campaigns from a locked group that has been deleted (you must duplicate them first)
To delete a group:
All campaigns in the group must be paused
If the group was unlocked, deleting it has no impact on campaign configuration
If the group was locked, paused campaigns cannot be relaunched to avoid allocation issue— the platform will invite you to duplicate the campaign instead.
In the Reports tab, a message appears under the number of visitors to indicate the test was part of an exclusion group. Keep in mind that traffic volumes may differ from standalone experiments.
When multiple campaigns are mutually exclusive, the way traffic is allocated depends on their targeting and page coverage.
This diagram can be described in one sentence: if your targeted page isn’t the same for all campaigns of the group, part of the traffic landing on your website won’t be assigned to the desired campaign if visitors are bouncing.
On the Homepage, 33% of the traffic is allocated to campaign 1, and 66% to the 2 others. It doesn’t mean that 66% of the traffic will be assigned to the other campaigns, as among these visitors, some may not enter the targeting of the other campaigns.
As a User I need to launch several tests at the same time on the same page. Those campaigns shouldn’t enter into UX conflict as they are acting on different elements but my primary goal is the same for all campaigns.
In order to avoid any data biases I’d prefer making them mutually exclusive and do a proper analysis at the end.
As a User I need to test different parts of my page and I’m afraid of UX conflict between those parts. Thus, to avoid any bad user experience I would better use the Mutually Exclusive Experiments feature and be more confident during the QA.
As a User, I need to launch several tests at the same time on my website and all of them have the same primary goal. One campaign applies on the Home page and the other on the Product page. I know that I’ll have way more traffic on the HP than on the PP. Thus, I can use the Custom Allocation functionality of the Exclusion group to assign more traffic to my PP campaign than my HP campaign.
AB Tasty has developed a Chrome extension that enables you to :
Instantly access key information about the AB Tasty setup on the current page, including tag version, active campaigns, and visitor data.
Jump directly into the AB Tasty Visual Editor from any website. No need to navigate through dashboards – go straight to editing.
Enable debug mode to troubleshoot configurations, inspect variations, and manage cookies with ease.
Test responsive setups even on domains with restrictive security settings. Force configurations to preview mobile experiences in secure environments.
Whether you're QAing, optimizing, or debugging, this extension simplifies your workflow and gives you full control over your AB Tasty experience – right from your browser.
The add-on enables you to carry out the following operations (click on it to know more):
Load the exact page you need, with forced HTML injection—even for tricky sites.
Reset user attribution instantly for accurate QA.
Easily activate or deactivate debug settings to test campaign behavior.
Useful for demos or quick tests on sites that don’t have the tag installed.
The AB Tasty add-on is available in the Chrome web store at the following address:
Click Add to Chrome.
Click Add extension to confirm installation. Once installation is complete, the add-on icon is displayed in the top right-hand corner of your browser or stored in your extension menu (last extension icon).
On the top right end corner of your browser, click on the AB Tasty extension icon.
If you are not connected to your account, this window appears on a click.
Click on Login to AB Tasty and follow the login instructions as usual.
Once connected, the extension displays:
Account name
Tag version
Number of live campaigns and total number of campaigns on the account
A block to allow you to directly charge the editor on your web page
This option can only be used on a campaign previously created in the account. Read article to know more.
.
Navigate to the URL you wish to load into your campaign editor.
Open the extension.
Click on the Campaign selection field.
The source code is injected into the editor and the editor opens with the page loaded in a new tab.
When opening the editor, this kind of text "?abtasty_editor=1468354" is appended at the end of the URL, which can be problematic for certain websites that are set up to prevent anything being added to their URLs. If this is the case for your website, the editor won't be usable with the regular option. That is why you have the possibility to force open the editor.
Repeat steps 1 to 4 from "" process.
Check Force open Editor Option.
Click on Load editor.
You can delete AB Tasty cookies (ABTasty and ABTastySession cookies) from the current page.
This enables you to delete information regarding the version of the test that a visitor sees.
To do this, follow these steps:
Go to the desired web page
Open the extension.
Click on Clear ABTasty Cookies. /
When done, the button displays “Cookies cleared”.
This feature can be useful when running a test through the QA process: You can make sure to be shown a different variation from the one previously shown.
Debug Mode provides a detailed view of how the platform operates on your website. It’s especially useful for identifying issues when a campaign isn’t behaving as expected.
When Debug Mode is enabled, the extension:
Creates a cookie in your browser storage
Automatically refreshes the page
When Debug Mode is disabled, the extension removes the cookie.
To launch campaign or track your account information on your website, you need to set-it up:
Navigate to your website.
Open the extension. The set-up mode opens.
To retrieve your AB Tasty identifier:
Open a new browsing tab.
Access the
In the Implement the AB Tasty tag section, copy your AB Tasty account identifier.
The extension is automatically refreshed and starts displaying information.
By clicking on the extension Icon, you can access the following information for the accountID related to the domains:
Tag version
Tag Weight
Last update of the tag
Number of live campaigns on the page
Total number of campaigns on the account
An Action Tracker enables you to track visitors who have clicked on a specific element of your website during their visit.
There are 2 types of Action Trackers:
Account Action Trackers (AAT): Action Trackers available at an account level (available for all your future campaigns)
Campaign (exclusive) Action Trackers (XAT): Action Trackers available at a campaign level only (the one where you've set-up the XAT)
Once configured, an AAT is displayed in the Action Tracker list for every campaign, unless hidden.
To create an Action Tracker:
Go to the Visual Editor.
Click on the element you want to track (and by doing so, create an Action Tracker on) and click “Add a tracker”.
From the modal, choose a Name, an event, a CSS selector, XAT or AAT and a context for your tracker. You can find out more on this topic in the guide on the .
Important: You can’t use the same name for 2 different AATs on the same account. You won’t be able to save unless you change the name. Also, an AAT can never be modified (context aside) after being saved. You will need to delete it and create a new one. XATs can be modified and even switched for AAT (if changed, you won’t be able to change it back).
The context is where you put any kind of information that will help remember why you set up that Action Tracker later, without the need to come back to the Visual Editor.
Once creation is done in the visual editor,
Any campaign Action tracker will appear :
In the goal set up page only for the campaign you created it in only
In the list of goals in the goal management page of the account
Any Account Action tracker will appear :
The selectors used in the original and in the variation must be unique.
You must ensure that the selector you use in the original version for your tracker matches the target element in variation 1 and does not apply to any other element in the variation.
If the selector in the original matches another element in the variation, clicks on Variation 1 will also be collected under that goal and will skew the data and analysis.
From the Goals step of a campaign, you will see a list of action trackers that you can select for your campaign. XATs will be on top of the list, AATs following next. You can also look for specific ATs by using the search bar on top of the list.
In this list will only appear the XATs created for this campaign (not hidden) and the AATs (not hidden). You won’t see XATs created for other campaigns on the same account.
The orange flag means that the Action Tracker is an AAT. You will find next to it a ! icon. Clicking on it will prompt a information modal with:
The name of the AAT as a title
The Test ID: this indicates the ID of the campaign in which the AAT has been created (this is useful if you want to go back to the Visual Editor of the initial campaign. The AAT will only appear in the Visual Editor of the campaign you initially set it up)
The Creation Date: the date on which the AAT has been created.
ID/Class/Element: the CSS selector used to set up the ATT.
When you know which Action Tracker you want to select, you can drag and drop it in the right goal section (primary goal or secondary goal) and the trackers selected out here will record data and display stats in the report of the campaign. Make sure you select relevent AAT’s so you don’t analyze the wrong stats that will appear in your reports. To know more about the selection of a goal, please refer to
Above the search tool, you can find a link to the goals management page. If you want to know the basics on goals management, please head to .
We’ll talk more about the specificities of the Action Trackers here. You will see the AATs in orange with the same flag already mentioned, accompanied by the icon with the same information explained above, in the Select an Action Tracker section.
XATs can be edited here but AATs can’t. But you will find a link to the original Visual Editor where the AAT has been set up in the edit modal. It can help remember what exactly this AAT is tracking.
As most trackers, ATs can be hidden (with the eye icon) and deleted (on certain conditions).
Deleting an XAT is different to most other goal types since it’s only linked to the campaign you are managing. From the Goals management page of the Settings, you can delete an AAT if it’s not used in any campaign without losing any data. If you delete while it’s used in any campaign (not archived), you will be prompted with a different modal telling you where it’s used and that if you go through with the AT deletion, you will delete the related data.
You can also delete an AT from the Visual Editor (VE). XATs follow the same rules as other trackers. For more information, please refer to .
For AATs, it’s different. You will only see the AAT in the campaign it was set up in. So you could use an AAT in campaign 2 but if it was set up in campaign 1, you will only see it in campaign 1’s VE, not in campaign 2’s VE. It follows the same rule as in goals management. A confirmation modal if the AAT is not used anywhere. A warning message if the AAT is used at least in one not archived campaign.
If a campaign only has XAT or AAT that are only used in this campaign, it can be deleted without issue. But, you can’t delete a campaign where an AAT has been created if that AAT is used in any other campaign, not archived.
All your AATs are bundled inside the Tag. So the data will be gathered from the beginning of the campaign no matter if you select it or not, for all your campaigns (after the creation of the AAT). It means that if you add an AAT to the list of goals of the campaign 20 days after you launched it, you will still have the data of the 20 days of life of your campaign.
On certain websites, to join a loyalty program or confirm a newsletter subscription, visitors are asked to click a confirm button on a specific page. You can then choose this click tracking to create a new “subscriber” or “VIP member” segment.
The Countdown widget is part of the Promotional Content widget category. For more information on the widgets, please refer to .
The Countdown widget lets you display a countdown clock to create expectation, urgency, or near-scarcity.
This widget is useful for yearly recurring events such as Christmas, Thanksgiving, Halloween, Fashion Week, Black Friday, Valentine's Day, etc., as well as for your own events: product release, new feature, new collection, anniversary, special offer, live event, webinar, etc. and many other use cases.
The Video Pop-in widget is part of the Promotional Content widget category. For more information on the widgets, please refer to .
The Video Pop-in widget lets you display a pop-in containing a video. This video can be hosted on: YouTube, Vimeo, Dailymotion, Facebook or TikTok. It can also be an .mp4 file (works with .ogg and .webm too) hosted on your server. This widget can be used if you want to catch your visitor’s attention concerning specific content, if you want to display videos in a dynamic way or if you want to display a full-screen interstitial.




Targeting – Options section
✅
Traffic allocation:
The percentage of traffic is adapted depending on the specific case:
When identical duplication or from the same type of campaign: traffic allocation stays the same
From Personalization to test: traffic allocation is 50%
From test to Personalization: traffic allocation is 100%
✅
QA – parameters
❌
Advanced options:
Third-party integrations
Tag performance optimization method
✅
Other:
Scheduler options (end date, start date, recurrences, etc.)
Saved pages: when duplicating to another account
❌






To exclude a test campaign from another and create a group, select the option Add to exclusion group.
A modal appears. You are already located in the group creation option.
Give the group a clear name (for example, Homepage tests or Cart improvements) to help track included campaigns.
Open the dropdown menu to select the other campaigns to include.
The list is limited to 12 results by default, but you can use the search bar to find specific experiments.
Select all the campaigns you want to include in the group.
Click Validate selection to add the selected campaigns to the group.
Traffic will be split across all campaigns in the group.
To define traffic manually, toggle on Custom allocation. This is useful if some campaigns run on deeper pages with lower traffic.
Click Save to confirm the configuration.
To exclude a test campaign from another and create a group, select the option Add to exclusion group.
A modal appears.
Select Add to existing group tab.
In the drop down list, select an available group (unlocked).
Click Save
The test will be added to the group and its traffic allocation adjusted accordingly.
Force the display to the campaign thanks to the QAA
Same targeting on the same page
Traffic is evenly distributed across all campaigns of the group. As your targeting conditions are the same, the exact same numbers of visitors will be assigned to each campaign.
Different targeting on the same page
Traffic is split evenly accross the group campaigns, but final traffic assignments vary by campaign targeting rules of the group.
Same targeting on different pages
As your Exclusion group contains several campaigns, when landing on one of the targeted page, your visitors, even if corresponding to the targeted audience, might be allocated to another campaign. Thus, if bouncing, they will never reach their allocated campaign and the number of visitors being assigned to the reporting will never be the same.
Different targeting on different pages
Use separate campaigns instead—M2E adds no value in this case




Access tag and campaign information See tag version, weight, and live campaign status for any site you're on.
A button to clear AB Tasty cookies.
Either select the campaign in the dropdown list;
or use the search to find it; the search works on the campaign name and id.
Click on Load editor.
Paste your identifier in the extension.
Click on Inject. Once injected, a confirmation appears.









In the goal set up page for all campaigns of your account
In the list of goals in the goal management page of the account
You can select the display of the digits (remaining days, hours, minutes and seconds):
In a block: each digit is displayed in a separate block
In a text: the digits are included in the text
We have four different layouts:
modal (pop-in)
top banner
bottom banner
free placement (which allows you to place the widget wherever you want in the page flow)
You can add an image in the modal layout only.
Widget dimensions based on content By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about pop-in dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length). If you untoggle the toggler, you will be able to define both the width and the height of the pop-in. These can be configured (independently) in several dimensional units:
px (pixels)
% (percentage)
em (element, which means that it is based on the size of the text of the element: if your font size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)
Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another. If you're digging the dimensional units in CSS, we recommend reading this W3C article.
Preserve ratio (automatic height)
By default, the height toggler of the modal is toggled and set to "preserve ratio (automatic height)". This way, you don't have to set a height, it takes what the modal needs and can even reach 100% of the available height in the viewport.
If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll down to read everything.
Known issue: the widget configuration form not overlapping the website
In the past, we've chosen to make the widget configuration form not overlap the website, especially for positioning a widget in a corner or on the left side. Therefore, the overall website width is "squeezed" in the editor. Now, once you've finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width. We understand that defining the pop-in size without seeing the full-page rendering is tricky. When you dimension your pop-in, it will adapt to all window widths by showing/hiding the widget form or leaving the "Widget dimensions based on content" toggle toggled.
Layer Position (z-index)
Suppose you've selected "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget position: above everything, below everything, or precisely fine-tuned.
As this widget is a countdown, the first thing you will be asked to do is define an end date and time. You cannot use a past date/time.
By default, in order to show you a running countdown clock, we define the default end date/time based on the moment you create the countdown, incremented by 1 day, 1 hour and 2 minutes. So you should see 01 days, 01 hours, 01 minutes, 59 seconds, 58, 57, etc., counting down.
For precision in date and in time management, you have to consider time zones and daylight saving times. In the "Time Zone Settings'' collapsible group, there are two main options to manage time zones with your countdown widget:
"Follow the sun" option
This option is useful and should be toggled ON in the following situation:
Your ecommerce website is based in France but your clients buy from all over the world. You want to end your countdown at midnight exactly for every time zone because this is the exact moment the Black Friday sale will officially start.
So in this case, the countdown will end at 12am in Tokyo, 12am in Mumbai, 12am in Paris, 12am in Rio de Janeiro, all on the same day. It will take 24 hours to end all over the globe.
As a website visitor, depending on where you see the countdown widget from (depending on your time zone), you will not see the same remaining time.
This option is not useful and should remain OFF in the following situations:
Beginning of a big international event: Apple keynote, Olympic Games Opening Ceremony, elections results, etc.
For example, if you decide to end the countdown at 2pm in Paris, it will end at 2pm in Paris and at this exact moment in the whole world, whatever the local time is – so 8pm in Singapore, 8am in New York, 5am in San Francisco, etc.
As the user who sets up the countdown widget, you must define a time zone in the "Time zone to base end time on" dropdown. You can override (for the purpose/scope of this widget only) the time zone defined in your account settings.
Daylight Saving Time (DST)
If one of your visitors lives in a place where winter/summer daylight saving time is applied, you won't have to worry about this 1-hour delta if you schedule your countdown widget six months ahead.
Known issue for DST:
For spring or fall time switches in countries that do apply Daylight Saving Time (DST), there are two moments each year (dates vary depending on the country) when, in spring you go from 2am to 3am and in fall from 2am to 1am (or from 3am to 2am, depending on your location). These two hours don't really "exist". We cannot guarantee that this widget will work if you schedule its end at that precise moment.
This feature is only available if you use the modal or the banners (top and bottom) layouts.
You can click the button and then select an image from the Asset Libraru or upload a new one.
AB Tasty supports the following formats: jpg, png, gif, svg, webp & avif and the maximum width is 2MB.
The message is mandatory, you have to fill the text area in.
The text area supports multi-line messages, and you can add HTML markup if needed. We recommend setting all the styling aspects through the Style tab.
You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.
If you pick:
"The button is a link": you will have to specify a button URL and a button text. The widget will display a button.
"A click on the button closes the widget": you will have to specify a button text. The widget will display a button.
"The whole widget is a link": you will have to specify a URL. The widget will not display a button.
"A click on the whole widget closes the widget": you won't have anything to add. The widget will not display a button.
"None": the widget will not be clickable.
If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.
By default, the legend of the countdown is days, hours, minutes, and seconds for each 2-digit block, respectively. But you can customize it to adapt it to a specific language.
Important: the width of all the 2-digit blocks adapts to the largest block.
When the countdown ends
You have five different options:
Hide the whole widget: once the countdown has ended, the whole widget is removed. Nothing is shown any longer.
Hide the countdown and display a text: once the countdown has ended, the widget remains displayed but contains only text. You can define the text you want.
Display the countdown (00:00) and a text: once the countdown has ended, the widget remains and contains the ended countdown and text. You can define the text you want to show.
Hide the countdown, display a text and a button: once the countdown has ended, the widget remains displayed but there is only a text and a button in it. You can define the text, the button text and the URL you want.
Display the countdown (00:00), a text and a button: once the countdown has ended, the widget remains and contains the ended countdown, a text and a button. You can define the text, the button text and the URL you want.
Important
For the widgets with the modal layout and which include an image, it is no longer displayed once the countdown has ended.
If you add a button after the countdown has ended, we strongly advise you to offer an alternative for the visitors who just missed the opportunity. This can be a coupon code, a subscription to a newsletter to receive notifications, or a link to the event itself (live, webinar, etc.). Avoid "back to home page" links at all costs.
Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.
Background can be set up with an image using the image-fitting policy
4 options are provided:
"Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
"Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
"Fill": the image is resized to fill the background container without keeping the aspect ratio
"None": the image is left unchanged.
Select the Triggering and Recurrence options you want to apply to the Promotional Banner widget.


There are five different layouts: four with text (video on the right, video on the left, video below, video above) and one without text (video only). By default, the "video only" layout contains a button, but you can remove it.
For the "video on the left" and "video on the right" layouts, you can decide on the video over text ratio. By sliding the cursor along the axis, you can configure the video to take up 20% to 80% of the available width inside the widget container.
Widget dimensions based on content
By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about modal dimensions. Your pop-in will adapt accordingly based on the video (and text) dimensions.
If you untoggle this toggler, you will be able to define both the width and height of the pop-in. These can be configured (independently) in several dimensional units:
px (pixels)
% (percentage)
em (element, which actually means that it is based on the size of the text of the element: if your font size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)
If you're digging the dimensional units in CSS, we strongly recommend reading this W3C article.
Preserve ratio (automatic height)
If you don't want to manage the height of the pop-in, you can keep this toggler toggled by default and the height of the pop-in will adapt according to the video dimensions and the video over text ratio.
Known issue: the widget configuration form not overlapping the website
In the past, we've chosen to make the widget configuration form not overlap the website for cases where a widget is to be positioned in a corner or on the left side. Once you've finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width.
Layer Position (z-index)
Suppose you've selected the "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget’s position: above everything, below everything, or precisely fine-tuned.
As this widget is a video pop-in, the first thing you will be asked to do is paste the video URL.
The widget supports video URLs from:
YouTube
Vimeo
Dailymotion
TikTok
And any MP4 file path
and will adapt its player but will also display advanced parameters for each case (except for Facebook and TikTok - no advanced parameters).
YouTube The advanced parameters will be:
Autoplay (toggled by default)
Mute (toggled by default)
Loop (toggled by default)
Start x seconds from the beginning (default is 0 sec.)
End x seconds before the end (default is 0 sec.)
Display controls (untoggled by default) - If controls are displayed, you will have two options available for the player color: YouTube red (default) or white.
Authorize full screen (untoggled by default)
Enable keyboard shortcuts (untoggled by default)
Display subtitles (untoggled by default) - We cannot detect if the video contains subtitles. Toggling it on for a video without subtitles will have no impact.
Vimeo
The advanced parameters will be:
Autoplay (toggled by default)
Mute (toggled by default)
Loop (toggled by default)
Start x seconds from the beginning (default is 0 sec.)
Player color (#57B8C7 is set by default)
Dailymotion
The advanced parameters will be:
Autoplay (toggled by default)
Mute (toggled by default)
Show Dailymotion Logo (untoggled by default)
Player color (#57B8C7 is set by default) - You can override the default Dailymotion player color only if the administrators of the Dailymotion channel haven’t defined it. In this case, you cannot override it. We cannot detect whether the player color is already set so we will always display the color picker, but a color change will have no impact.
MP4 file
If your videos are hosted on your server and you don't want them to be hosted on broadcasting platforms, you may be interested in providing the direct URL to the file. In this case, the widget will display a default HTML5 video player (renderings may differ from one browser to another). The widget also supports .OGG and .WEBM files.
The advanced parameters will be:
Autoplay (toggled by default)
Mute (toggled by default)
Loop (toggled by default)
Display controls (untoggled by default)\
For the first four layouts (video on the right, video on the left, video below, video above), you will be able to decide whether to display a title. Maximum length is 255 characters.
For the first four layouts (video on the right, video on the left, video below, video above), the message is mandatory. The text area must be filled in.
If you don't want to display a text, there are two options: use the "video only" layout or type a message in the text area, save the widget, and hide the element in the editor.
The text area supports multi-line messages. You can use HTML markup to add ordered or unordered lists, then create selectors such as <span>text</span> for specific styling. All the other styling aspects should be carried out through the "Style" tab section.
You can now decide whether your widget will contain a clickable button (to close or redirect) or no link at all.
If you pick:
"The button is a link": you will need to specify a button URL and a button text. The widget will display a button.
"A click on the button closes the widget": you will need to specify a button text. The widget will display a button.
"None": the widget will not be clickable.
Unlike the Simple Pop-in and Image Pop-in widgets, the Video Pop-in widget includes a video but cannot be entirely clickable.
If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.
Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.
Background can be set up with an image using the image-fitting policy
4 options are provided:
"Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
"Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
"Fill": the image is resized to fill the background container without keeping the aspect ratio
"None": the image is left unchanged.
In the "Text" collapsible group, in the "Style" tab, defining the alignment will impact both message and button.
Rounded Corners
If you use very rounded corners (and very little padding), it will "crop" the video's corners.
Select the Triggering and Recurrence options you want to apply to the Video Pop-in widget.







Campaign duration relates to the number of days a campaign has been running since the first time it was launched.
These are the 3 rules used to calculate duration:
Paused timeframes are excluded, and play timeframes are included in the calculation;
the QA mode is not a status in itself, meaning that when the campaign is Live in QA, the timeframe is included in the calculation;
resetting data in the reporting erases the whole duration and resets the count to 0.
Campaign duration can be accessed from the two following sections of AB Tasty:
The test and personalization dashboard, in the duration column .
The reporting of a campaign, inside the activity card.
Duration calculation is available only on campaigns launched after October 2020. If you wonder how long your test should run to be reliable, check out our
From the test and personalization dashboards, the duration column displays the number of days a campaign has been running. When hovering on the duration, a tooltip shows the following information:
The creation date: date and hour the campaign was created.
The last played date: date and hour the campaign was played for the last time.
The last paused date : date and hour the campaign was paused for the last time.
The campaign duration is also displayed in the activity card of the reporting of each campaign.
You can reset the campaign data you have collected so far by clicking the three dots on the top bar> Clear data. Once the data is cleared, the duration is reset to zero and calculation starts again from the date you cleared the data (if the campaign is live or in QA) or from the next time you play your campaign (if it is paused).
Data is also collected from the time you enable a QA parameter in your campaign. We recommend clearing the data after finishing the QA of your campaign in order to start your campaign fresh, with data from your targeted visitors only.
Let’s say it is the 16th of February 2021. Here is an example of campaign history:
→ The campaign was Live on the 2nd (1 day), on the 8th (1 day) and on the 15th of February (1 day from the current date). In total, the campaign has been live and active for 3 days.
Let’s say it is the 16th of February 2021. Here is an example of campaign history:
→ The campaign was Live on the 2nd (1 day) and on the 15th of February (1 day from the current date). But on the 8th, the data was cleared, so calculation was reset. Since that date, the campaign has been live and active for 1 day.
Let’s say it is the 16th of February 2021. Here is an example of campaign history:
→ The campaign was Live on the 2nd (1 day) and from the 8th to the 14th of February. In total, the campaign had been live and active for 8 days but since it is paused, calculation is stopped.
Learn to use the WYSIWYG/Contextual Editor for real-time webpage edits without coding skills. It simplifies A/B testing, personalizations, and UI modifications.
The WYSIWYG/Contextual Editor (What You See Is What You Get) enables you to play with your webpage and make changes on the fly by clicking on the different elements.
The contextual editor enables you to virtually write new lines of code, especially CSS (to modify UI parameters such as the margins, colors, etc.) without any coding knowledge, just by clicking on elements and selecting the modification you want to apply from a list.
For a complete discovery about the visual editor, please refer to this article.
To use the visual editor, you need:
to be on the campaign flow of an AB Test, a Personalization or a patch
to have pasted a sample URL in the step 1 of the flow Main Information
to click on the element you want to edit/ remove etc. to make the contextual editor appear:
The element appears as a title of the block (in this example, “h1”), so every change you make here will affect the title you selected.
In this specific article, we are going to review all the possible modifications you can perform with the visual editor.
In the Edit section, you can edit the following:
Style: all the CSS attributes (colors, borders, z-index, margins etc.)
Text
HTML: direct modification in the HTML can be dangerous. See more details in the following ).
Element attributes
Depending on the element you’ve selected, some options may not be available in the list. For example, Edit Text won’t appear if you have selected an image - tag <img> - and Edit Link won’t be available if the selected element is not a <a> tag. Each tag will trigger only those editing options compatible with its type.
The configuration pop-in offers you the option to edit the style the text, color, border, layout, and position of your selected element.
⭐️ Tip 1: Pay attention to the element you’re working on. Sometimes you have selected an element whose CSS configuration has inherited a higher parent in the code. To make your changes visible, you must select the correct element at the beginning, and use the select parent or children element option.
⭐️ Tip 2: If you want to change the overall look of an element (background color, font color and size, border style and color, etc.), do it all at once before clicking on Save Changes to embed all the modifications relative to the button in one single line of modification.
Click on Active Changes in the right-hand panel to retrieve all your modifications and access your history.
All customizable options in the Edit Style pop-in are in English, even if your language choice in the platform is not. We’ve kept the CSS English vocabulary to optimize the understanding of each parameter.
While editing, click on save, and your modifications will be directly visible in the editor.
For more information about CSS parameters and how they work regarding each type of tag, please refer to a CSS guide such as .
The original text will appear in a modal. You can directly edit it and make standard CSS changes in this modal, too.
When you finish editing, click on save, and your modifications will be visible in the editor.
The Edit HTML option in the editor enables you to edit the HTML of a selected element on your page in a code console.
When selecting the element you want to edit, you can refine your selection by using the Select Parent or Select Child options.
In the code console, the HTML content for the selected element is displayed.
You can modify it as desired: Add, remove or edit HTML content.
Your web page may be based on an HTML template that loads dynamic information. Using this option will replace the former HTML with the one you have edited for each page that matches both the targeting and the selector for your modification.
For example, if you edit the product information (title, size, color, etc.) of a product page, the edited HTML will be replaced for every product page that has the same targeting and selector.
As a result, many different products will have the same title, size, and color (depending on what you edited) when they shouldn’t.
Moreover, JavaScript events that may have been added to the element(s) you edited for your product may have disappeared, as the element(s) they were attached to have been modified, replaced by the new HTML content.
We recommend using the Edit HTML option in the following cases:
For static pages such as homepages, or static parts of your website such as the navigation or the footer.
For the smallest HTML parts, as you can avoid side effects (such as overwriting templates or deleting JavaScript events) and any negative impacts on the tag weight.
For campaigns that target a small part of your traffic, such as one language or one device, to avoid showing your visitors content that isn’t adapted to them.
There are less sensitive options, which can be used in the following use cases:
To add new HTML to your page 👉 Use the Add Image, Add Text or Add HTML options in the Visual Editor.
To remove existing HTML from your page 👉 Use the Hide Element, Hide the content of the element options in the Visual Editor.
To edit existing HTML on your page 👉 Use the Edit Style, Edit Text, Edit Link, Edit Attributes, Replace Image options in the Visual Editor.
In terms of performance, it is preferable to make edits through other options rather than solely relying on the Edit HTML option to make edits (regarding tag weight and your website's rendering) to protect your website’s functionalities and guarantee templates with correct content.
This option will enable you to modify element attributes (detected in the HTML code), delete some attributes (by clicking on the cross), or add new ones.
To learn more about attributes, please refer to a CSS guide such as
While editing, click on Save Changes, then your modifications will be visible in the editor.
The Add option will enable you to enrich your HTML by adding an element that didn’t exist on the original page.
In the Add section, you can add the following:
an image
a block of text
some HTML
a link
You can add an image by uploading your file directly from your . We support .jpg, .png, .svg, .webp and .avif files.
You can either:
select an asset from you library
upload a new item to your library, by URL or by droping your image directly in the area from your computer.
You can add a text element by filling it directly in the following pop-in.
While editing, click on Save Changes, then your modifications will be visible in the editor.
You can add an HTML snippet directly in the following pop-in. AB Tasty creates a parent tag with its own parameter “ID” to help you. This is a good way to add a pre-coded element to your page. You can also declare the selector in which the new tag will be embedded.
While editing, click on Save, then your modifications will be visible in the editor.
You can add a link directly to one element you want to make clickable. Enter the URL in the field and activate the Open a New Tab option if desired.
While editing, click on Save Changes.
This option lets you customize the CSS and/or the JS you want to execute in your variation/page/experience. This is an alternative to WYSIWYG modifications, particularly for more advanced campaigns.
It can be useful to refine a change you’ve made with the WYSIWYG editor, or help you to more deeply customize the widgets.
To help you to use the JS code console, you can access this Code Modal shortcuts .
For more information about different types of JavaScript files, please refer to the following .
There are three sub-options in the Hide option:
Hide the element
This hides the whole element (content + element), meaning that the element that follows in the HTML will automatically replace the hidden element(s) (for example, a tab in a navigation bar, an item in a list, etc.)
Hide the content of the element
This only hides the content of the element, leaving an empty space instead of replacing it with the element that follows.
Hide same class elements
This option is useful if you want to hide a specific element that appears on the page several times.
This option lets you play with a drag and drop functionality to reorder elements that share the same CSS parameters and are all embedded in a master parent element.
For example, reordering items in a list or tabs in a navigation bar.
Select one element of a list, click on Reorder elements: a small popin appears (you can move it on the page). Drag your element at its new placement in the list, click on Validate, then your modifications will be visible in the editor. Otherwise click Cancel to go back without saving.
To use this option, first you need to cut or copy an element to add it to your clipboard.
You can paste it where you want, so select the element before or after which you wish to paste the clipboard element. You need to select if you want to paste the element before, at the end, or after the place where you want to paste it.
In this article, we'll take a look at the different operators for building URL patterns and how you can manipulate and mix them to recreate URL pattern rules that meet your needs.
URL patterns are rules that allow you to create groups of URLs that share these rules. They're mandatory to declare your campaigns' targeting, create specific segments or triggers and of course create saved pages and map your website.
For example, if I want to create an URL pattern "all product pages", I will identify what's in common in all the product pages of my website to build the rule. Here it could be contains /product/
The URL template needs to be as inclusive as possible, to make sure that 100% of the product pages on my website match the rule, in our example. But at the same time, the URL model must also be exclusive, to ensure that pages that aren't product pages don't match the rule.
To build these rules, we offer 8 operators that should enable you to create all the URL patterns you need to map your website.
This is the list of operators available to build your URL patterns:
Inclusion(s) only in your URL pattern
If you include one or several specific URL(s) entirely, all the other URLs which don't match the rule will automatically be excluded from the URL pattern rule. To be accepted to the rule, an URL will have to match at least one of them.
Exemple: URL Pattern "checkout"
Includes the following conditions:
is www.mywebsite.com/basket OR www.mywebsite.com/delivery OR www.mywebsite.com/payment OR www.mywebsite.com/thankyou
This URL pattern will accept all the pages of the checkout without any exception, whatever some parameters are added in the URL, and won't accept any other page of the website.
You can decide whether you want all conditions to be met, or at least one. This is the difference between the some and all options.
In our exemple, with entire URL, the some option should be chosen.
You can combine inclusive operator(s) (is, is exactly, contains, is regular expression) with exclusive operator(s) (is not, is not exactly, does not contain, is not regular expression).
In this case, to be accepted in the pattern rule, a website’s URL has to match:
All the exclusion rules
Some (at least one) of the inclusion rules
Exemple: URL Pattern "All pages except checkout"
Includes the following conditions:
contains
AND
is not www.mywebsite.com/basket AND www.mywebsite.com/delivery AND www.mywebsite.com/payment AND www.mywebsite.com/thankyou
Here are some examples of configuration, depending on the pages of your website you want to target:
All and Some operators enable you to combine several conditions within a set-up in the targeting step such as a segmentation or a triggering criterion. They appear in a drop-down list when two or more conditions are added. In most cases, both All and Some operators are available.
The Social proof widget is part of the Dynamic Content widget category. For more information on the widgets, please refer to .
The Social Proof widget enables you to display a message for your visitors, specifying the number of views or purchases for a specific product page for a defined duration.
Social Proof is a social psychology principle that describes the fact that individuals are highly influenced by the behaviors and opinions of others. In the case of a newspaper article, the more views it has, the more people will be tempted to read it because it has already sparked the interest of others. In the case of a commercial product, a large number of views may convince people that the product is popular and therefore make them want to purchase it. A large number of purchases is likely to accelerate the purchase decision of hesitant users, who fear the item will soon be out of stock. They will also view a large number of purchases as proof of the article’s high quality. A low number of views or purchases, on the other hand, is likely to put the visitor off buying.
👉 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:
The NPS (Net Promoter Score) widget is part of the Dynamic Content widget category. For more information on the widgets, please refer to .
The NPS widget enables you to display a satisfaction survey in order to collect feedback from visitors. The NPS, or Net Promoter Score, is a customer satisfaction measuring tool based on a single question.
This functionality enables you to carry out a satisfaction survey via a form displayed on one or more pages or your website. This way, visitors can rate and comment on their experience as users.
Among other things, the NPS widget enables you to quantify promoters (9 - 10), passives (7 - 8) and detractors (0 - 6) on your website, to collect feedback and to measure the impact or your changes.
The Progress Bar widget is part of the Promotional Content widget category. For more information on the widgets, please refer to .
The Progress Bar widget enables you to let your visitors know how close they are to completing a task or to reaching a goal. It can be used in many ways:
On cart pages, a progress bar showing the amount needed to earn a gift, coupon, free shipping, etc.




































Excludes all URLs containing the string. Parameters following the string will also be taken into account.
Example: /product/
is not regular expression
Excludes all URLs matching the regex. You don’t need to escape special characters of your regular expression.
Example: https://www.example.com
/products/(.*)--([0-9]{5})
Operator
Functional: accepts...
is
Includes all URLs matching the string, even if they include parameters.
⚠️ With this operator, the page is targeted no matter which parameters are included in the URL. Therefore, you cannot write any particular parameter in this field.
Example: https://mydomain.com/cart
is exactly
Includes the unique URL matching the exact string. Parameters that are not mentioned in the string are not taken into account.
💡 This field accepts parameters as an option.
Example: https://mydomain.com/cart?news
contains
Includes all URLs containing the string. Parameters following the string will also be taken into account.
Example: /product/
is regular expression
Includes all URLs matching the regex. You don’t need to escape special characters of your regular expression.
Example: https://www.example.com
/products/(.*)--([0-9]{5})
is not
Excludes all URLs matching the string, even if they include parameters.
⚠️ This field doesn’t accept parameters.
Example: https://mydomain.com/cart
is not exactly
Excludes the URL matching the exact string.
💡 This field accepts parameters as an option.
Example: https://mydomain.com/cart
Target the homepage of your website
URL operator
is
URL
http://mydomain.com
Result
The modified page will be seen by your visitors, including those being redirected from partner websites or having clicked on sponsored links. In this case, the URL displayed in their browser is followed by UTM or other tracking parameters. However, AB Tasty recognizes the URL regardless of the parameters linked to it and displays changes to the relevant visitors.
Example of a URL
You will target the http://mydomain.com page, as well as http://www.mydomain.com/?utm_medium=email and even http://www.mydomain.com/?utm_medium=cpc.
Target all category pages of your website
URL operator
Contains
URL string
/category/
Result
The changes are applied to all pages for which the AB Tasty platform has identified the common section of URL.
You must make sure non-desired pages aren't included by mistake because they contain the same section of URL: as a safety precaution, you may use a regular expression.
Example of a URL
You will target the http://mydomain.com/category/page1 page, but also http://mydomain.com/category/page1/article.html.
Target all the product pages of your website.
URL operator
Is regular expression
Full URL
http://www.example.com/products/(.*)--([0-9]{5})
(For example if your URLs match the following format: http://www.example.com/products/product-name--12345, where 12345 coincides with a 5-digit product ID)
Result
A regular expression enables you to use a strict writing rule to define the pages to be targeted. This guarantees that you will include only the pages that need to be, particularly if your pages share a structure and include a set of digits and letters.
Example of a URL
You will target the http://www.example.com/products/shoes-children--96753.html
or http://www.example.com/products/garden-furniture--13082 pages.
Operator
Definition
Example
Some
The set-up matches at least one of the conditions.
In the Geolocation criterion: target visitors located either in France OR in the United States.
All
The set-up matches all the conditions, without exception.
In the Content interest criterion: target visitors interested in BOTH skirt and dress.
does not contain
Pause campaign
03/02/2021
Paused
Play campaign
08/02/2021
Live
Pause campaign
09/02/2021
Paused
Play campaign
15/02/2021
Live
Clear data
08/02/2021
Paused
Play campaign
15/02/2021
Live
Play campaign
08/02/2021
Live
Pause campaign
15/02/2021
Paused
Action
Date
Status
Duration
Create campaign
02/02/2021
Paused
Duration: 3 days
Information on hover
Created: 02/02/2021 (15 days ago)
Last played: 15/02/2021 (1 day ago)
Last paused: 09/02/2021 (8 days ago)
Information in reporting
Launched on: 02/02/2021
Enable IP parameter (QA mode)
02/02/2021
In QA
Play campaign
02/02/2021
Live
Action
Date
Status
Duration
Create campaign
02/02/2021
Paused
Duration: 1 day
Information on hover
Created: 02/02/2021 (15 days ago)
Last played: 15/02/2021 (1 day ago)
Last paused: 03/02/2021 (14 days ago)
Information in reporting
Launched on: 15/02/2021
Play campaign
02/02/2021
Live
Pause campaign
03/02/2021
Paused
Action
Date
Status
Duration
Create campaign
02/02/2021
Paused
Duration: 8 days
Information on hover
Created: 02/02/2021 (15 days ago)
Last played: 8/02/2021 (9 days ago)
Last paused: 15/02/2021 (1 day ago)
Information in reporting
Launched on: 02/02/2021
Play campaign
02/02/2021
Live
Pause campaign
03/02/2021
Paused



In short, this widget can make a huge impact if targeted properly on volume of traffic or volume of purchases.
We offer 4 different layouts:
modal (pop-in)
top banner
bottom banner
free placement (which allows you to place the widget wherever you want in the page flow)
Widget dimensions based on content
By default, the "Widget dimensions based on content" toggler is toggled. It helps you not to worry about modals dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).
But, for many of our users, this default dimensions management was not enough. So we came up with something trickier but more flexible. If you untoggle the toggler, we will be able to define both width and height of the pop-in. And, last but not least, you will able to define them (independently) in several dimensional units:
px (pixels)
% (percentage)
em (element, which actually means that it is based on the size of the text of the element, if your font-size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)
Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another. Some of you may think that being able to define height in vw or width in vh doesn't make sense and that it is a bug or an oblivion on our side's but it is not. It can be useful to do, in some very edgy cases, that is for sure.
We voluntarily did not offer those units: cm, mm, in, pt, pc and ex as, in short, they are not best-practices. We are still open to discussion for implementing rem unit.
If you're digging the dimensional units in CSS, we strongly advise you read this W3C article which is a good starting point.
Preserve ratio (automatic height)
By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set any height, it takes what the modal needs and can even reach 100% of the available height in the viewport.
If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll in it to read everything.
In the past, we've chosen to make the widget configuration form not overlapping the website, especially if you want to position a widget in a corner or on the left side. Therefore the global website width is "squeezed" in the editor. Now, once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width. And results can be surprising...
We understand that defining the pop-in size without seeing the full rendering of the page is tricky. Until now, we haven't found a better solution to help you do that. Make sure, when you dimension your pop-in that it will adapt to all windows widths by showing/hiding the widget form or let the "Widget dimensions based on content" toggle toggled.
Layer Position (z-index)
If you've selected "modal", "top banner" or "bottom banner" layout, you can define the position of the widget on the z axis in order to manage if you want the widget: on top of everything, under everything or precisely fine-tune its position.
Pick between "Number of purchases" or "Number of views". "Number of views" is the default value. Depending on which value you select, it will display the number of times the page has been viewed or the number of times the product has been bought (thanks to the transaction tag).
Depending on your volume of sales of the 'social' pressure level you want to add, you may select a duration value among these: last 3 hours, last 12 hours, last 24 hours, last 3 days or last 7 days. We advise you to start with the longest and increase throughout your experiments to find your best fit.
Customize the default text, position the different variables exactly where you want them to be. This allows you to write a lot of combinations in your own language and adapted to your needs.
!views!: The number of times your visitors have viewed your product page (multiple views per visitor)
!purchaseQty!: The number of purchases your visitors have made on this particular product from any page or section of your website.
!period! : duration value (number of hours or days).
!unit! : duration unit ("hours" or "days"). You can also remove it and replace it using your own words.
Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.
Background can be set up with an image using the image-fitting policy
4 options are provided:
"Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
"Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
"Fill": the image is resized to fill the background container without keeping the aspect ratio
"None": the image is left unchanged.
Contrarily to other widgets, the Social Proof widget has a distinctive "Conditions" tab. Especially for the triggering part.
Depending on if you picked view or purchases in the content tab, you will be able to trigger the display of the widget from a specific number of views or purchases. In both cases, minimum is 0 and maximum is 1,000. By default, the value is 200 for 'views' and 50 for 'purchases'. You can override them.
This volume trigger applies to all the targeted products and start to collect views and purchases as soon as the widget is activated for your account (TDB enablement). Which means that you may have to wait a little to be able to QA the widget in order to have collected data between the moment your widget was enabled and between your campaign is in QA.
Be careful when doing the quality assurance on a campaign with a Social Proof widget. If the trigger level is higher than the actual number of views / purchases. You may not see the widget.
The recurrence is managed the same way as explained here, in the common Conditions tab article.
In order to display the number of purchases, AB Tasty has to retrieve information regarding the corresponding product, which is registered in your data layer, or directly in the source code of your website (DOM).
We recommend using a data layer on your website. A data layer can register and gather information on the product for which you want to determine the number of transactions. For more information, please refer to the Integrating your Data layer into your AB Tasty account article.
Before configuring the widget via the campaign editor, if you want to determine the number of transactions for a product, you need to:
Implement the Item hit and the transaction tag
Define the window.ABTastyProductKey variable
The number of views for a product is collected automatically thanks to AB Tasty’s data collection system (Universal Collect).
The Social Proof widget relies on the URL of the page, including path name (without the gclid parameter (Google Ads' automatic marking)). Anchors are not taken into account by the widget.
The "Ignore URL parameters to differentiate pages" toggler is disabled by default. This option aims to help users define with more precisions if what they call "a product" is a variation of a more generic product or the generic product.
For example, in the tourism industry, many websites have per-hotel or per-flight URLs but however uses URL parameters to make distinctions on room types, nights, options, dates, classes...
myhotel.com/hotel-cancun-123?room=suite-deluxe&checkin=12052021&checkout=19052021
myflight.com/dublin-vilnius-xair?outbound=12052021&return=19052021&class=economy
But it also sometimes happens in fashion or other industries...
mytshirt.com/tshirt-fancy-123?size=xl&color=grey&design=19
mymachinery.com/tiller?wheels=4&absorber=yes&options=security-pack
In order to set this toggler the best way possible, the questions you have to ask yourself are:
1st question: "Are
myhotel.com/hotel-cancun-123
myhotel.com/hotel-cancun-123?room=suite-deluxe&checkin=12052021&checkout=19052021
the same product or two different products?"
If not, let the toggler disabled ; if yes, enable the toggler.
2nd question: "Is myhotel.com/hotel-cancun-123 a real purchasable product (or has it to be set up (options, dates...))?"
If yes, let the toggler disabled ; if no, enable the toggler.
Now, if you want to display the Social Proof widget only on distinctive product variations and not on the generic product pages, you may set your campaign targeting criteria to only URLs containing parameters.
The Item hit enables the collection of information on the product for which you want to collect and display the number of transactions (average cart value, item price, etc.). To make the Social Proof widget work, tid (transaction ID, the id of the transaction), ic (item code, the SKU of the product... in short: a unique identifier) and in (item name) parameters are required. For other parameters, you can implement a default value. Nevertheless, they must respect a given type of data in order to guarantee the calls with the database.
To implement the Item hit, you also need to implement the transaction tag on your website. The transaction tag enables you to save the data related to the transactions carried out on your website (e.g. transaction amounts, payment methods, number of items purchased, etc.).
To implement the transaction tag and the item hit, please refer to the How to implement the Transaction Tag article.
For more information, see the technical documentation.
After implementing the transaction tag and the item hit, you need to define the window.ABTastyProductKey variable with the value of the product (item code) for which you want to collect and display the number of transactions.
Once the variable is defined, the Social Proof widget connects the information of the database with the value defined in the window.ABTastyProductKey variable. If this information matches, it means that the value of the variable and the item code of the Item hit are similar: the widget can display the number of transactions carried out on the product via the widget.
To define the window.ABTastyProductKey variable, apply the following steps:
Copy the following code, paste it in "Add JS" (in the variation menu), replace YOURDATALAYER with your dataLayer name & replace ITEMSKUKEY with the adequate parameter name present in your dataLayer.
The value you define in the window.ABTastyProductKey variable must be the same as the item code (product SKU) located in the Item hit.
We recommend implementing the code directly in the editor of the campaign rather than in the global code of the website, as this code is only necessary for pages using the Social Proof widget.
The social proof widget sends an AT hit “Social proof displayed” when it meets the conditions and is displayed.
However, you need to create a custom tracking and add it during the goals step to make it appear in the report of the campaign
To QA your campaign using social proof widget and the main implementation, please activate the QA mode on your campaign and use the browser console to QA.
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
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. 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.
For more information about custom widgets, refer to the
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
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
Widget
Custom widget
The widget then lets you:
track the evolution potential of customer loyalty,
find out how you are performing compared to other players in your field,
improve the user experience.
We offer 4 different layouts:
modal (pop-in)
top banner
bottom banner
free placement (which allows you to place the widget wherever you want in the page flow)
Widget dimensions based on content
By default, the "Widget dimensions based on content" toggler is toggled. It helps you not to worry about modals dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).
But, for many of our users, this default dimensions management was not enough. So we came up with something trickier but more flexible. If you untoggle the toggler, we will be able to define both width and height of the pop-in. And, last but not least, you will able to define them (independently) in several dimensional units:
px (pixels)
% (percentage)
em (element, which actually means that it is based on the size of the text of the element, if your font-size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)
Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another. Some of you may think that being able to define height in vw or width in vh doesn't make sense and that it is a bug or an oblivion on our side's but it is not. It can be useful to do, in some very edgy cases, that is for sure.
We voluntarily did not offer those units: cm, mm, in, pt, pc and ex as, in short, they are not best-practices. We are still open to discussion for implementing rem unit.
If you're digging the dimensional units in CSS, we strongly advise you read this W3C article which is a good starting point.
Preserve ratio (automatic height)
By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set any height, it takes what the modal needs and can even reach 100% of the available height in the viewport.
If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll in it to read everything.
In the past, we've chosen to make the widget configuration form not overlapping the website, especially if you want to position a widget in a corner or on the left side. Therefore the global website width is "squeezed" in the editor. Now, once you're finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width.
We understand that defining the pop-in size without seeing the full rendering of the page is tricky. Until now, we haven't find a better solution to help you do that. Make sure, when you dimension your pop-in that it will adapt to all windows widths by showing/hiding the widget form or let the "Widget dimensions based on content" toggle toggled.
Layer Position (z-index)
If you've selected "modal", "top banner" or "bottom banner" layout, you can define the position of the widget on the z axis in order to manage if you want the widget: on top of everything, under everything or precisely fine-tune its position.
This is where you will be able to write your own NPS® question.
By default, we offer to use the most common way of asking an NPS® question to the visitors: "How likely are you to recommend us to a friend or family member?".
However, you can write in many other ways, for example:
"What is your experience so far with this product?" (for an already purchased product)
"How is our documentation answering your questions?" (for self-service user documentation)
"Hey, do you think these recommend products are adequate?" (for product recommendation features)
Adapt the question to what you want to know.
A well-targeted campaign properly triggered with the right level of recurrence can give you really good results in quality and volume of feedback.
Pro tip: don't offer anything in exchange of a feedback. Feedback (good and bad) is free. Free is unbiased.
You can decide to display a legend next to min and max scores by toggling this on. By default, it is untoggled. However, it makes it obvious for visitors that 0 is bad and 10 is good. No brainer.
By default, we offer "Very unlikely" as minimum score legend and "Very likely" as maximum score legend. They fit well with the default NPS question. Therefore, if you change the question, there is a good chance that you will need to adapt the legend too.
You can decide to have a "Ask an open-ended question" by toggling this on. By default, it is untoggled.
Most of our users use this option to get more detailed feedback with the score. Invite your users to give you detailed explanations of their bad or good score (and even average). This qualitative feedback will become a real change or growth lever.
Some of our users also use it to collect personal contact information such as phone number, email or client ID. It sure does imply a lot of manual qualification but it can be a quick-win to contact back and turn detractors into promoters.
By default, we offer "Send". Obviously, you can change it to your own needs.
This input only appears if you toggle the "Ask an open-ended question" step.
You can decide to have a "Thank you message" by toggling this on. By default, it is untoggled.
Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.
Refer to the Widget Style options article for more information on all available Style options.
Background can be set up with an image using the image-fitting policy
4 options are provided:
"Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
"Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
"Fill": the image is resized to fill the background container without keeping the aspect ratio
"None": the image is left unchanged.
The styling options will apply the same way to all components (text, button, container) in all steps. For example, if you style the scoring buttons with border-radius, it will be applied to the same way to the "Send" button in the open ended question step.
If you don't toggle open-ended question and thank you message, you will not see a "Preview" group in the Style tab. As there will remain only one step: the score step (which you will view immediately).
As you may have seen in our examples at the beginning of this article, you can customize a lot an NPS widget rendering by adding extra CSS. You can hide some scores (but this will deeply impact the reporting results/reliability), display a background image, re-order components, replace scores with images... All that through the "Add CSS" Feature.
In order to do this the most proper way, don't forget to set your default styling completely off. This will remove all the CSS we apply to the NPS widget. You can do this in the Style tab by toggling "Custom".
Select the Triggering and Recurrence options you want to apply to the Promotional Banner widget.
Once your campaign using the NPS widget is finished and you have collected enough scores and feedback, you can analyze the results in the dedicated NPS report.
"Net Promoter®, NPS®, NPS Prism®, and the NPS-related emoticons are registered trademarks of Bain & Company, Inc., NICE Systems, Inc., and Fred Reichheld. Net Promoter ScoreSM and Net Promoter SystemSM are service marks of Bain & Company, Inc., NICE Systems, Inc., and Fred Reichheld."
Word or character counter for a min. or max. expected number of characters (testimonials, feedback, etc.)
Polls and surveys
Scroll progression on long scroll pages
Progression in the completion of a form
Funnel progression
Display stats more visually
Session duration (in "reverse mode", for example 30 mins. to finalize a booking or a ticket purchase)
All you need is:
A target quantity: the goal (it can be an integer (123) or a decimal (123.45) but cannot be 0 or a negative value) that requires typing/setting manually.
A variable: the current status of your goal (which is going to make the progress bar advance).
There are two ways to fetch the variable:
Select an element on the page which contains the value (preferably in its own <span>, <p>, <div>, etc., and the widget will parse and retrieve its value).
Write your JavaScript code (the sky is the limit! Collect a dataLayer variable, use browser listeners, set a timer, etc.).
The progress bar is only available for the "free placement" layout. It is not available for the modal, banner, or panel layouts.
We offer three different sub-layouts:\
progress bar & text-integrated variable
progress bar, label & variable
progress bar\
Depending on the sub-layout you choose in the layout tab, the content tab differs:
If you select: "progress bar & text-integrated variable"
If you select: "progress bar, label & variable"
If you select: "progress bar only"
One value per element
In order to properly parse the variable, the widget needs to use a single variable. This means that if you select a paragraph that contains two values, for instance, it will not work properly.
This is why you need to be careful when you select the element containing your variable: make sure it only contains one.
All value formats are welcome
You don't have to worry about the format of the value, or about having a colon or a comma as a decimal marker: if you use a very large number (i.e. 142,536,712.34), the widget will understand which is a separator and which is the decimal marker. If your element includes a currency or a special symbol or character, AB Tasty will recognize it.
AB Tasty covers almost all the international ways of writing prices, percentages, and numbers in general.
This is the most important part of setting up your Progress Bar widget.
By default, we have decided to set the variable value to 66.
There are two ways of fetching the variable:
Select the element that contains the variable
Select the element on the page you want the variable to be applied to.
The element containing the variable must not contain several values (see above).
Return variable through custom JavaScript
To use the custom JS option properly, you must call a function called “update” and pass the new value as a parameter to update the widget.
By default, we provide an example of JavaScript code:
This JavaScript code fakes a progress bar that progresses by 10 every 1,000 ms. As the default target quantity is 100, it gives you a quick idea of how the progress bar will react to progress variations.
You can replace it with your own.
Here is another JavaScript code example for retrieving the scroll progression of the visitor on the page:
Run the update() function whenever you need to update the progress bar.
By default, the target quantity is set to 100.
The minimum value is 1 and the maximum is 999,999,999,999.
You can use an integer or a decimal value with a period as a separator, but you cannot use 0 or a negative value.
You can choose whether you want to display the variable as a value or as a percentage.
If you pick a value, it will be the exact value of the variable as your web app or the visitor defined it.
If you pick a percentage, it will be calculated based on the target quantity. For example, if the target quantity is 1,765 and the variable is 419, it will display "23.74%". The widget rounds to the closest 100th.
You can choose whether you want to display the variable as the accumulated value (the variable value) or as the remaining value (subtraction of the target quantity value minus the variable value).
For example, select "remaining" if you are using the Progress Bar widget on a cart page and "accumulated" if you are using it for a character counter or a session duration.
For example:
with "remaining", if the target quantity is 1,765 and the variable is 419, it will display "76.26%".
with "accumulated", if the target quantity is 1,765 and the variable is 419, it will display "23.74%".
The widget rounds to the closest 100th.
Only for "Progress bar & text-integrated variable" sub-layout
Rephrase the default sentence as desired.
You can add extra HTML markup and add some CSS in order to add bold or color to a specific section of text.
As an example, this is the CSS code needed to style the two pieces inside the customized sentence.
The variable must be enclosed in exclamation marks like so: !variable!
If you want to display the variable as a percentage, the variable must be followed by a “%”. If you use it as a value, you should not forget to specify the unit, and currency (before or after the variable, depending on your locale).
Only for "Progress bar, label & variable" sub-layout
You can enter the legend of your progress bar. By default, the label is in bold.
The variable cannot be edited inside the widget form. You can add a symbol next to it in the editor.
For example, inside the:
If you activate this option, you’ll be able to customize the message once the goal is reached: quantity, order amount, etc.
While the toggle is activated, you can fill in a static message such as “Congrats, shipping is now free!” or use dynamic tags to make it more dynamic (e.g.: “Congrats, your order comes to $234, the $9.99 shipping fee is on us!”).
In the style tab, you will be able to define the size, color, borders, background, etc. of each element of the widget. Uncollapse each group and adapt the widget to your website color palette and style.
By default, the widget inherits its style from the font face to your website. However, you can override it with the 1,000 Google Fonts available.
There are progress bar widget styling specifics:
Background can be set up with an image using the image-fitting policy 4 options are provided:
"Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
"Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
"Fill": the image is resized to fill the background container without keeping the aspect ratio
"None": the image is left unchanged.
You can pick a color from your existing palette. Most of the time, we recommend using a variation of your main call-to-action color.
You can pick a color for the background of your progress bar (progress tracking). We recommend using a different color than the background color of the element it is contained in (to create a strong enough contrast). If you pick white on a white background, for instance, it won’t be visible.
The option is toggled by default. This enables you to make the progress bar slightly more accessible. Especially if your progress bar color and progress bar background color is close (not contrasted enough).
You can make the stripes any color you want. To guarantee accessibility and elegance, we recommend using white and lowering the opacity (however no lower than 60%) to make the progress bar color appear.
You can give more or less height to the progress bar. The default height is 8px and the maximum height is 50 px.
You can give more or less rounded corners to your progress bar. The default radius is 4px and the maximum radius is 30 px.
Select the Triggering and Recurrence options you want to apply to this widget.

function setABTastyProductKey() {
if (typeof YOURDATALAYER !== "undefined") { /* Set YOURDATALAYER variable with the correct name */
window.ABTastyProductKey = YOURDATALAYER.ITEMSKUKEY; /* Set YOURDATALAYER.ITEMSKUKEY variable with the correct path. */
} else {
setTimeout(setABTastyProductKey);
}
}
setABTastyProductKey();var counter = 0;
setInterval(function () {
if (counter > 90) {
counter = 0;
} else {
counter += 10;
}
update(counter);
}, 1000);window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
update(scrolled);
}.varSubTot {
color: #66BB66 !important;
fill: #66BB66 !important;
-webkit-text-fill-color: #66BB66 !important;
font-weight: bold;
}
.freeShipping {
font-weight: bold;
}<dd class="abtasty_progress_value"></dd>
element of the variable, you can add a little <span> element containing the unit:
<span>US$</span>











Chances in percent of max value
Chances (in percent) that the maximum discount is offered to the visitor
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









This widget is not available on multi-page campaigns
By default, every single change is automatically saved. To let you control your changes, in the right-hand sidebar, you will find the “Undo” and “Redo” options.
When you click on Active Changes, a new panel is displayed.
This panel lists all the changes that the current variation contains. It does not contain the Trackers that are listed in the "Trackers" panel and whose scope is “trans-variations” (those apply to the whole campaign).
Anti-chronological order
Types & subtypes
Who & when
Edit, change selector, rename, duplicate, hide/display or delete
Batch actions
Create a variation from selection
“No additional information”
Changes are listed in anti-chronological order
In order to be clear and consistent, the latest edited change will always be displayed at the top. All changes are listed in anti-chronological order in the panel.
Every time you edit, rename, duplicate or change the selector of a change, the order is updated, and the last edited change is placed at the top. It does not reorder when you hide/display a change.
By default, when a variation contains no change, a default message is displayed to invite users to add changes, whether they are modifications, widgets, JavaScript or CSS code.
Changes prior to the release of this feature don't have last edit date and user information. Instead we display: “No additional Information.”
In order to better understand each change, even after having renamed every single one of them, it is important to keep track of the nature of a change.
For each change, you will see an icon, reflecting the type of each respective change:
M for Modifications
W for Widgets
JS for JavaScript
CSS for CSS
In some types, you can also have subtypes.
Modifications can be of the following subtypes: Add HTML, Add Image, Add Link, Add Paragraph, Copy & Paste (after), Copy & Paste (before), Copy & Paste (at the end), Cut & Paste (after), Cut & Paste (before), Cut & Paste (at the end), Edit Element Attributes, Edit HTML, Edit Link, Edit on the Fly, Edit Style, Edit Text, Hide Content of the Element, Hide Element, Hide Same Class Elements, Reorder Elements, Replace Background Image, Replace Image, Replace Responsive Image
Widgets have as many subtypes as there are widgets
There can be two types of JavaScript: Variation JavaScript or Element JavaScript. We have a dedicated article that lists .
When you hover over the icon, you will always see the type and subtype of this change. This comes in handy when you rename a change and the new name no longer contains the notion of type or subtype.
As changes are listed in anti-chronological order, we also display the date and time of the latest edition. We do not display the year but the year is taken into account when ordering the changes.
When hovering over the user icon, the email address of the user is displayed in a tooltip. This way, you can always know who the last person was to make a change.
Depending on its type or subtype, each change allows for different actions.
“Edit” is the capacity to reopen the dedicated change modal so you can edit this change's parameters again.
For example, a modification such as “Add Text” can be edited again. The text you added can be edited (changed) by adding, removing words. On the other hand, a modification such as “Reorder Elements” cannot be edited. You will have to delete it and redo it if you want to edit it.
“Change selector” is the capacity to modify the “scope” of the modification.
You can define if, for example, an “Edit Style” (such as padding increase or a decreased line-height) will be affected to a single <div>, to the whole <body> element, or any parent/child element in between.
“Rename” lets users give a more detailed name to a change than the default name. It is very convenient if you have several changes of the same kind without any specific way to differentiate them.
The default name of a change is based on the subtype of the modification, the widget name, the type of JavaScript change (Variation JavaScript or Element JavaScript) or just “CSS”. If the new name is longer than 35 characters, it will be accepted but truncated with an ellipsis when displayed. Names longer than 300 characters will be rejected by the platform.
“Duplicate” only works for widgets. Essentially, it duplicates a whole configured widget in the variation. By default, the duplicated widget has the same name and is appended with (duplicated) at the end.
“Delete” is available for all types and subtypes of changes. When deleting a change, a confirmation prompt pops up in the Active Changes panel and awaits for a confirmation or a cancellation.
“Hide/Display” only applies to the editor level. If a user hides or displays a change, it has no impact on production; it is only here to help you see an element hidden below another one or the space it may take when displayed.
You can select one or more changes to hide/display or delete. Select the changes you want to make by checking the checkboxes when you hover over each change and hide/display them or delete them by clicking on the respective buttons.
If one or more changes cannot be deleted, they will be bordered in red for 3 seconds, and a notification will display informing you about the number of changes that were not deleted. If this happens, it can be related to a momentarily unavailable API route, as we invite you to try again later.
If you alter a nonexistent or removed selector, a warning alerts you that your changes might not work in production. Hover the warning icon to see more details.
One of the most interesting features of this panel is the capacity to create a new variation from a selection of changes.
It is very easy. Select the changes you would like to see in the duplicated variation and click on the “Create Variation from Selection” button on the bottom bar.
The variation is created. The changes are injected into the variation, and you are redirected to the variation.
This feature is not available for campaigns with dynamic allocation that have been put in “play” mode at least once, nor is it available for personalization campaigns.
The CSAT widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
This widget is not available on multi-page campaigns
CSAT stands for “Customer Satisfaction”. This widget allows your visitors to rate, on a scale defined by you, how satisfied/happy they are with your website, services or products. AB Tasty’s default example of a CSAT widget:
The layout tab lets you choose the position of the CSAT widget on the website. There are 4 options:
Modal
Top banner
Bottom banner
Free placement
Top and bottom banner will anchor the widget either to the top or to the bottom of the screen.
Free placement will allow you to choose the HTML element of the page in which you want to place the widget. This requires basic knowledge of HTML and knowledge of how your website is designed.
As a modal, the widget will appear as a pop-up displayed on top of the website. When it is chosen, you are allowed to choose its position on the page:
The layer options allow you to choose the z-index of the widget (whether it is above or below your website’s content, perpendicular to your screen).
For example, this is what Above means:
This is what Under means:
All the contents of a website are usually on the same level as each other (they have the same z-index of 0) The custom option allows you to choose the value of the z-index of the widget. That value can take positive or negative values and whichever element has a higher z-index will appear above elements with a lower z-index, if they happen to overlap on the screen.
The widget dimensions can be set to automatically expand or contract according to the amount of content it has, if you toggle it on.
If toggled off, then it will keep a fixed size that you can set it to keep.
The “Width” section contains 2 boxes:
The value of the width
The unit of the width
Description of each unit and value:
vw (% of viewport width)
The percentage of the window’s width. The value inserted will be the percentage. 100% will occupy the whole width of the window.
px
Stands for pixels. The value will specify the number of pixels the width of the widget will be
The preserve ratio toggled on will set the widget’s height automatically.
Turning it off will provide you with more options to set up the widget’s height:
The content tab allows you to customize the contents displayed in the CSAT widget. There are 3 aspects that you can customize:
The question and emojis
The open-ended questions
The “Thank you” message
The main message and the emojis for representing the rating of satisfaction
AB Tasty has a default one: “How satisfied are you with your experience on AB Tasty?”. This can be customized to be any other version that you prefer, with the restriction being 10,000 characters maximum
The emojis range from a minimum of 2 emojis to a maximum of 5 emojis.
Having 2 emojis only is suitable if you are only looking for a binary rating from your customers (Satisfied/Unsatisfied or Good/Bad). Having 3 and above gives a broader spectrum of ratings and thus a more precise rating from customers, if this is what you are after. The emojis can be the AB Tasty default ones representing different levels of satisfaction:
These emojis can be customized to be any icon you want by choosing to have “Custom Emojis” and uploading a new one for each emotion using the Image Upload option. Or you can paste the link of an icon hosted somewhere external to AB Tasty, by choosing the Image Path option.
The standard text emojis allow you to use the regular emojis that people usually use on phones.
To be able to put emojis in these text boxes, you can simply search for the emojis online, and copy & paste them. It is also possible to simply input raw text, if this is something you want.
You can choose whether you want open-ended questions to the visitors for each type of rating that they give. From the customers’ point of view, they will first have a choice of ratings to give (the emojis). Then, whichever rating they give will cause a different question to be asked to them. First, you have to toggle on that you want open-ended questions.
If toggled on, you will have the following choices:
Each of them can be customized, again with a restriction of 10,000 characters. If toggled off, open-ended questions will not be asked to customers after they submit their rating. The Button text section is simply text that will appear on the button that submits their answers to the open-ended question.
This toggle allows you to display a simple “Thank you” message to the customer after they have completed their rating. An example of a “Thank you” message is already provided. When toggled on, you will have the option to customize the message to your liking, again with a restriction of 10,000 messages.
The style tab allows you to customize the general appearance of the CSAT widget including the:
Emoji colors and spacing
Text alignment in the box, color, font, font size
Margin, padding and background of the whole CSAT widget
Border style of the CSAT widget
The color and opacity of each emoji can be changed as shown in the screenshot above. The “Hex” box is simply the color’s hex code and can easily be found by a simple search online. The percentage box is the percentage opacity of the chosen color (0% meaning fully transparent and 100% being fully opaque) The emoji margin slider is the margin size on the left and right of the emoji, in pixels.
The text alignment options will allow you to horizontally position your text within the widget box. The text color and opacity can be changed as shown in the screenshot above. The “Hex” box is simply the color’s hex code and can easily be found by a simple search online. The percentage box is the percentage opacity of the chosen color (0% meaning fully transparent and 100% being fully opaque) The text font can also be chosen from a variety of different font styles.
One important option to note is the “Inherited from element” option - this means it will inherit the font of the HTML element the widget is found in. For example, if the widget is located in an element which already contains some text, the widget will have the same font as that element. If the widget is in no particular element, then it will inherit the default font set on that webpage.
The text style can be regular, bolded, italicized or underlined and the slider is for the font size.
The margin refers to the space between the widget border and other elements of the page outside it. The padding refers to the space between the widget border and the elements inside the widget. The margin and padding on all 4 sides of the widget can be customized with the following controls:
All the values are in pixels and you can see the values apply after setting the values and clicking on the page. The background color of the widget is also customizable. The color and opacity can be changed the same way:
The “Hex” box is simply the color’s hex code and can easily be found by a simple search online. The percentage box is the percentage opacity of the chosen color (0% meaning fully transparent and 100% being fully opaque) A background image can also be inserted in the CSAT widget by toggling the background image toggle:
There are 3 ways to upload the image:
Drag and drop the image from your computer
Click and open a dialog box to browse your computer and upload the image
Use the “Image Path” option to paste the URL of an image hosted on another website.
The background fitting has 4 options:
Cover - A snippet of the image will appear inside the widget.
Contain - The whole image will fit inside the widget while preserving its aspect ratio
Fill - the image will fill the widget without preserving the aspect ratio
None - No restrictions will apply to the image
There is an option to add a shadow around the border of the widget as well, and can be turned on/off using a simple toggle:
The border thickness dictates the thickness of the widget’s border in pixels. The border color can also be changed. The “Hex” box is simply the color’s hex code and can easily be found by a simple search online. The percentage box is the percentage opacity of the chosen color (0% meaning fully transparent and 100% being fully opaque) The border radius dictates how round the corners of the widget will be. The smaller the radius, the sharper the corner.
An underlay is a transparent and unclickable “cover” that appears in between the widget and the rest of the web page. This makes the widget focused to the user and forces them to notice and use it, or close it completely.
The underlay color can also be changed. The “Hex” box is simply the color’s hex code and can easily be found by a simple search online. The percentage box is the percentage opacity of the chosen color (0% meaning fully transparent and 100% being fully opaque). It is recommended that the opacity is set to a reasonable amount, and never 100% (40% - 60% is a reasonable amount). The “Underlay clickable to hide widget” will simply make clicking anywhere on the screen (except the widget) hide the widget.
You can choose to have a close button for your widget by toggling it on/off. And if you choose to have it, it can be either inside or outside the widget. The close button’s cross size can also be customized.
The cross size is in pixels and dictates the length (and height) of the cross’s container box. The “Hex” box is simply the color’s hex code and can easily be found by a simple search online. The percentage box is the percentage opacity of the chosen color (0% meaning fully transparent and 100% being fully opaque). The box containing the cross can also have its color and opacity changed in the same way.
The close button can also have a customisable border. If the border thickness is set to 0px, then it will simply not exist. Otherwise, after setting the border thickness to a value greater than 0, the following options will appear:
The border radius dictates the sharpness of the corners of the close button’s border. The smaller the radius, the sharper the corners. The “Hex” box is simply the color’s hex code and can easily be found by a simple search online. The percentage box is the percentage opacity of the chosen color (0% meaning fully transparent and 100% being fully opaque).
The Conditions tab allows you to decide 3 aspects of the widget:
Triggering - What causes its appearance and disappearance
Recurrency - How often it should appear to the customer
Animation - The animation with which it appears/disappears
You can choose which event will cause the widget to appear on the screen of the customer. The list of events and what they mean is as follows:
When the page is loaded
When all the contents of the page have finished loading
As soon as possible
As soon as possible
All of the triggering events have a “Delay” option, which allows you to specify how much time after the event happens should the widget be displayed. The auto-hide toggle lets you choose whether to have the widget disappear by itself (toggled on) or not. If toggled on, you will be able to choose how many seconds after submitting the rating should the widget disappear.
The recurrence of 3 events can be customized:
When the widget is displayed
When the widget is displayed again after closure
When the widget is displayed after submitting a rating
All 3 events have the same frequencies listed:
Every time
Every session
Every x days
Every x weeks
The animation refers to the way the widget will appear to the customer. There are 3 animations:
None
Slide
Fade
“None” will make the widget simply appear/disappear. “Slide”, as its name suggests, will cause the widget to slide into view. Choosing slide will give you some options about:
How long the slide will last for
The speeds at which the widget will slide (fast/slow at the start, middle and end)
The direction from which the widget will slide in
“Fade” will have the widget slowly appear into view from completely transparent to full opacity. The options for “Fade” are similar to “Slide”, except that there is no direction to fade from.
To learn more about the Evi Content, refer to the article Using the Evi Content
Animated Hero Section Headline
As a landing page, I want the main headline in the hero section to grab attention when the page loads.
Effect: The headline should fade in over 1 second, starting from 0% opacity to 100%.
Timing: The animation should begin 500 milliseconds after the page is fully loaded.
Style: Add a slight slide-up motion (10 pixels upward) to make the animation more dynamic.
Behavior: No animation replay if the user scrolls back to the top.
Progressive Image Reveal in Article Cards
On my blog homepage, I want the featured images in article cards to appear progressively as users scroll.
Effect: Apply a fade-in effect combined with a zoom from 95% to 100%.
Trigger: The animation should start when at least 50% of the image is visible in the viewport.
Performance: Use CSS-only animations to avoid JavaScript performance issues.
Hover Glow Effect on "Read More" Links
On my articles page, I want the "Read More" links to have a subtle glow effect when hovered over.
Effect: Create a soft outer glow around the text using a light blue color (#4A90E2).
Duration: Smooth transition over 0.3 seconds.
Behavior: The glow should disappear immediately when the user moves the mouse away.
Animated Scroll-to-Top Button
On my blog, I want a scroll-to-top button to animate when the user reaches the bottom of the page.
Effect: The button should slide in from the right and pulse three times to attract attention.
Trigger: Animation starts when the user scrolls past 80% of the page height.
Behavior: The button should smoothly scroll the page back to the top when clicked.
Add a Parallax Background Effect
On my homepage, I want the background image of the hero section to have a parallax scrolling effect.
Effect: The background should move at half the speed of the foreground content when scrolling.
Style: Add a slight blur to the background to increase the focus on the text.
Performance: Ensure the effect does not impact page load speed.
Highlight Section Headings on Scroll
On my long-form article, I want each section heading to animate when it scrolls into view.
Effect: The heading should slide in from the left with a fade-in effect.
Trigger: Animation should start when the heading is 25% visible in the viewport.
Duration: The animation should complete within 0.5 seconds.
Active Form Field Highlighting
On my checkout form, I want the active input fields to visually stand out.
Effect: Change the border color of the active field to green (#28A745) and add a subtle box shadow.
Behavior: The highlight should disappear immediately when the user clicks outside the field.
Style: Keep the animation subtle to avoid distracting the user.
Step Highlight in Progress Bar
On my multi-step registration form, I want the current step to be visually highlighted in the progress bar.
Effect: Change the current step's background color to blue (#007BFF) with a slight pulse animation.
Behavior: Automatically advance the highlight as users complete steps.
Style: Add labels to show the percentage of completion (e.g., "Step 2 of 5 - 40% Complete").
Animated CTA Button Hover Effect
On my pricing page, I want the "Get Started" button to animate when hovered over.
Effect: The button background should gradually shift from light green (#28A745) to darker green (#1C7D31).
Duration: Transition over 0.4 seconds.
Behavior: The button should return to its original color instantly when the user moves the mouse away.
Pulsing "Add to Cart" Button
On my product page, I want the "Add to Cart" button to pulse periodically.
Effect: Scale the button to 1.05x its size and back over 1 second.
Timing: The animation should repeat every 3 seconds.
Visual Feedback for Invalid Fields
On my checkout form, I want to provide instant visual feedback for invalid inputs.
Effect: The border of invalid fields should flash red (#FF0000) three times.
Behavior: Show an error message beneath the field with a red exclamation icon.
Highlight Cart Section on Hover
On my cart page, I want the summary section to visually stand out when hovered over.
Effect: Add a shadow and change the background color to light yellow (#FFF9C4).
Behavior: The highlight should disappear smoothly over 0.2 seconds after hover.
Show a Custom Welcome Message for Logged-In Users
On my homepage, I want to display a personalized welcome message for returning users.
Effect: Replace the default "Welcome to Our Site" with "Welcome back, [First Name]!" dynamically.
Behavior: The message should appear instantly when the page loads.
Fallback: If no name is available, display "Welcome to Our Site!" as the default text.
Change Background Color Based on User Preference
On my profile page, I want the background to reflect the user's theme preference.
Effect: If the user prefers dark mode, set the background to #121212 and the text to #FFFFFF.
Trigger: The change should occur dynamically when the page is loaded.
Fallback: Use the default light theme for users without a preference.
Countdown Timer for Flash Sales
On my homepage, I want to display a countdown timer to create urgency for ongoing flash sales.
Effect: Display a live countdown showing hours, minutes, and seconds dynamically decreasing.
Style: Use bold red text (#FF0000) with a clean font to make it stand out.
Behavior: Reset the timer when the sale ends and replace it with a "Sale Ended" message.
Personalized Call-to-Action for Returning Visitors
On my product page, I want to tailor the call-to-action text for returning visitors.
Effect: Replace "Add to Cart" with "Add Another Item to Your Cart!" if the user has previous purchases.
Trigger: Update the text immediately when the page loads for known users.
Show Recently Viewed Products
On my product pages, I want to display a horizontal carousel of products the user has recently viewed.
Effect: Populate the carousel with the last 5 products the user clicked on.
Behavior: Allow users to scroll through the carousel horizontally.
Fallback: If no history is available, display the top 5 most popular products.
Display Location-Based Promotions
On my homepage, I want to show special offers based on the user’s location.
Effect: Show "Free Shipping to [City]!" dynamically based on the user’s IP address.
Style: Use a banner with bold, localized messaging at the top of the page.
Auto-Scroll to the First Error in Forms
On my contact form, I want the page to automatically scroll to the first invalid input when users submit the form.
Effect: Add a smooth scroll effect to bring the invalid input into view.
Behavior: Highlight the input with a red border and display an error message beneath it.
Add Smart Autofill for Address Fields
On my checkout form, I want address fields to auto-suggest based on user input.
Effect: Show a dropdown of matching addresses dynamically as users type.
Behavior: Populate the remaining fields (city, state, ZIP) automatically when a suggestion is selected.
Add Keyboard Navigation for Menus
On my navigation bar, I want users to navigate menu items using the keyboard.
Effect: Highlight the current menu item with a blue border when using the Tab key.
Behavior: Ensure Enter activates the menu item, and Escape closes any dropdowns.
Improve Readability with Adjustable Font Sizes
On my article pages, I want users to adjust the font size for better readability.
Effect: Add small, medium, and large size buttons that dynamically change the font size.
Behavior: Maintain the chosen size even when users navigate to another page.
Add Real-Time Validation for Email Fields
On my signup form, I want the email field to validate user input as they type.
Effect: Display a green checkmark when the email format is valid, and a red warning icon when invalid.
Behavior: Show the validation feedback immediately without requiring form submission.
Add Loading Indicators to Buttons
On my checkout page, I want the "Place Order" button to display a loading spinner when clicked.
Effect: Replace the button text with a spinner icon and disable the button until the action completes.
Behavior: Revert to the original text once the order is successfully placed or an error occurs.
em
Em is a unit of measurement which indicates size relative to the size of the font. 1em means "equal to the current font size", and 2em means 2 times the current font size
vh (% of viewport height)
Similar to vw - the percentage of the window’s height. The value inserted will be the percentage of the height that you want the width to be equal to.
vmin (% of viewport minimum)
This unit is based on the smaller dimension of the viewport. If the viewport height is smaller than the width, the value of 1 vmin will be equal to 1% of the viewport height. Similarly, if the viewport width is smaller than the height, the value of 1 vmin will be equal to 1% of the viewport width.
vmax (% of viewport maximum)
This unit is based on the larger dimension of the viewport. If the viewport height is larger than the width, the value of 1 vmax will be equal to 1% of viewport height. Similarly, if the viewport width is larger than the height, the value of 1 vmax will be equal to 1% of the viewport width.
Style of the close button (if you want a close button)
At exit intent
When the customer intends to leave the page by switching tabs or closing the tab/browser
After x seconds of activity
The number of seconds after which the customer interacts with the page continuously
At click on element
When the user clicks on an element specified by you
When hovering over an element
When the customer’s mouse moves on an element specified by you
When an element is visible
When an element specified by you appears on the customer’s screen
When scrolling up
When a scroll percentage is reached
Scroll percentage here means how much of the total pages length has been reached by scrolling (E.g: 50% means the customer scrolled halfway down the whole page)
When the visitor has seen x pages
When a tracking is or has been sent
When the visitor rage clicks
When the customer repeatedly and very quickly clicks on the page (out of anger or dissatisfaction)
Custom trigger
Once only





















Enhance your workflow with AI-driven features
Evi, our suite of intelligent tools helps you move faster, make better decisions, and focus on what matters most.

x
x
Variation JavaScript
x
x
x
Widget - $WidgetName
x
x
x
x
Add HTML
x
x
x
x
Add Image
x
x
x
x
Add Link
x
x
x
x
Add Text
x
x
x
x
Copy & Paste (after)
x
x
Copy & Paste (before)
x
x
Copy & Paste (at the end)
x
x
Cut & Paste (after)
x
x
Cut & Paste (before)
x
x
Cut & Paste (at the end)
x
x
Edit Element Attributes
x
x
x
x
Edit HTML
x
x
x
x
Edit Link
x
x
x
x
Edit on the Fly
x
x
x
x
Edit Style
x
x
x
x
Edit Text
x
x
x
x
Hide Content of the Element
x
x
x
Hide Element
x
x
x
Hide Same Class Elements
x
x
x
Reorder Elements
x
x
Replace Background Image
x
x
x
x
Replace Image
x
x
x
x
Replace Responsive Image
x
x
x
x
CSS
x
x
x
Element JavaScript
x
x



This page will help you understand and fully Page Targeting in the Targeting Step.
The Where section is part of the targeting step, along with the choice of the Visitor Segment (Who section), the Triggering conditions (How section) and the Frequency conditions (When section).
Configuring the targeted pages of your website means specifying the page(s) for which the changes made via the visual editor/ code editor will be seen by your visitors. This configuration is made inside the targeting interface, on the same page as the segment configuration, in the “where” section.
The targeted pages set-up applies differently regarding the type of campaign:
AB Tests: it applies to your whole AB Test, meaning the original variation (V0) and all the variations (V1, V2, and V3 for an A/B/C/D test, for example) for a test
Multipages tests and Multipages patches: it applies to the selected sub-test. Use the dropdown to navigate between sub-tests and choose the right pages for each of them
Personalizations: it applies to the selected scenario for the personalization campaigns. Use the dropdown to navigate between scenarios and choose the right pages for each of them
For A/B Tests, Simple Personalizations, and Patches, you’ll have to define one single targeted page rule for your campaign because these types of campaigns have only one “experience” (one type of new content generated with AB Tasty to display).
For Multipage Tests, Multivariate Tests, Multipage Personalizations, and Multi-experience Personalizations, you’ll have to define a targeted pages rule for each “experience” or "sub-test". This rule can be the same or different depending on your needs.
Use different targeted pages for Multipage Tests and Multipage Personalizations. This is the objective of these kinds of campaigns: displaying several different messages (the experiences, to create a relevant and complete user journey) on several different targeted pages.\
Use the same targeted pages for Multivariate tests if you’re testing a combination of several changes on the same page and try to discover the better combination (color of the CTA, small style banner, new product carousel on a product page)\
Use the same targeted pages for Multiexperience Personalizations: this kind of campaign has been designed to help you to launch several messages to different segments in the same campaign and to assure no overlap between messages. To learn more about them, please
BE CAREFUL
Don’t forget to use the dropdown menu on the Targeting page to switch between experiences to set up your targeted pages in every experience.
We also offer a “Replicate” option, which allows you to replicate the full targeting setup or one part of the targeting setup of one experience in another experience, or in all experiences.
For more information refer to this and the .
To target your campaign, you can either:
,
,
,
,
Let's have a closer look on the interface and its possibilities.
When you land on the page, you’ll find the following set-up:
The "is" selected by default\
The URL you’ve used in Step 1 Main Information page to load the Visual Editor which is pre-pasted in the URL field
Additional options:
️BE CAREFUL
The URL field is case sensitive (i.e. a targeting 'contains' 'CHECKOUT' will not affect visitors on a URL like 'https://abtasty.com/checkout/' to the campaign).
The dropdown will present you with several options, in this order:
Inclusive operators: is, is exactly, contains, is regular expression, and is
Exclusive operators: is not, is not exactly, does not contain, is not regular expression, and
Target All URLs: it will target your campaign on all your website pages where the AB Tasty generic tag has been installed.
Caution: If you have several sub-domains for all of the languages or countries you’re addressing, your campaign will be displayed on all of them. Use this option with caution, if you are sure that your campaign should be targeted on 100% of the pages of your domain. For more information about the way you've set-up your account regarding domains, please refer to this .
This is the matrix about the way the operators work:
To learn how to manipulate operators to build the correct pages targeting, please refer to this complete .
From the dropdown, you can access the list of the you’ve previously set up in the . For that, you just have to select the following operator:
Is saved Page
Is not saved Page You can access the page builder by clicking on “Manage Saved Pages”.
Please refer to for more information.
Useful tip: You can see the content of the setup of your saved pages by hovering over them:
You can directly click on the saved page you want to include/exclude by using the dedicated “is saved page” option in the previous dropdown.
You can mix the inclusion of saved pages with the exclusion of saved pages by clicking on “Add Condition”.
You can also mix saved pages with custom URLs.
In any case, the functional rules between inclusions and exclusions are the same for the setup by URLs:
Inclusion(s) only: If you include one or several specific URL(s) and saved pages, all the other URLs will automatically be excluded from the targeting. At least one of them has to match.
Exclusion(s) only: If you exclude one or several specific URL(s) and saved pages, all the other URLs will automatically be included in your targeting configuration.
Combination of inclusions and exclusions: You can combine inclusive rules with exclusive rules. In this case, to be accepted in the targeting, a website’s URL has to match:
Use the CSS selector option if you want to display changes on the pages of your website containing an element linked to a specific ID or class, whose presence cannot be determined by a URL. It is useful for targeting a set of pages that don't share a specific URL structure.
You can choose between the ID of your element, the CSS class, or any other parameters (custom choice in the dropdown). If the element you want to declare exists on the page you’ve loaded in the editor, it will appear while beginning to fill in the field by auto-completion.
Don’t forget to add a ‘.’ for a class or a “#’ for an ID.
This option is compatible with other options in the section, except for the Target All URLs option.
The option "My element appears after page load" is useful if you element is loaded after the page load (dynamic element such as a popin for exanple).
The code-based option enables you to insert JavaScript code to trigger a campaign depending on the presence of a specific JS instruction. This option is compatible with other options in the section, except for the Target All URLs option.
When using this option, you must comply with the following rules:
Do not use a function (){ at the beginning of your code.
The function/condition you code must return a true or false value.
If you plan to use jQuery, you must enable the use of . In this case, go to Account Management → and select Load AB Tasty’s jQuery.
For more information on this option, refer to .
In some instances, you might want to launch a test after a user completes a certain action on your site, for example, after they have clicked a certain button, or after they have spent a certain length of time on a given page. You can condition a test in this way using the JavaScript function ABTastyStartTest. This function takes a single, unique parameter: the ID of the test you would like to launch. It must be called after the AB Tasty tag. The function takes the following form:
Where testID is the ID of the campaign to be launched.
This function must be called as soon as each visitor has completed the action on which the test is performed. Note: the tested page must be the page on which the action takes place (you cannot test modifications on another page). To create a test conditioned on an event, you must:
Create a standard campaign, applying your desired modifications
Click on "More options". Target by Event option appears.
Toggle on “Target by Event”. Note that other targeting options will no longer be available
Set up the rest of your campaign as usual
Launch your campaign
Call the function ABTastyStartTest directly from your application whenever the event occurs.
For example, if you would like test 12345 (set up in advance) to be triggered by a click on a button, you can do this in the following way:
You can use any other method which links this function to an event. For example, you could use jQuery, or a callback function might be used if your site uses AJAX.
ATTENTION!
When you use this function the tag does not check the targeting, including the QA parameters. Take extra care when pushing a campaign that is using an event-based targeting into production.
To target a set of the same types of pages (all product pages or category pages of your website, for instance), you can choose from the two configurations below:
To target all the pages of your website, use one of the two configurations below:
Or
Select the Target all pages option.
The more mature our customer gets on their personalization strategy the more challenged they are on specific needs to orchestrate their campaigns. That is why we build a service to help you prioritize them, and keep a “top of the class” experience for your end users delivering them a personalized experience that will improve your revenues.
Our prioritization service has two main functionalities:
Identify conflicts between two or more campaigns for you to act consequently
Choose a prioritized order to display them consequently on your website
Our prioritization service works like a ranking system that allows you to declare, on a priority scale from 1 to 10, which campaigns should be seen first by your visitors if they are eligible for several of them. It allows you to prevent your visitors from being subjected to multiple campaigns and therefore messages on the same page, thus leading to poor user experience, risk of contradictory messages, and bias in your campaign analysis.
AA Tests: only one scenario and a 100% allocation traffic, no specific rule
CSS selector option
Code option
target by event option checkbox
Excludes all URLs containing the string. Parameters following the string will also be taken into account.
Example: /product/
is not regular expression
Excludes all URLs matching the regex. You don’t need to escape special characters of your regular expression.
Example: https://www.example.com
/products/(.*)--([0-9]{5})
All the exclusion rules
At least one of the inclusion rules
Operator
Functional: accepts...
is
Includes all URLs matching the string, even if they include parameters.
⚠️ With this operator, the page is targeted no matter which parameters are included in the URL. Therefore, you cannot write any particular parameter in this field.
Example: https://mydomain.com/cart
is exactly
Includes the unique URL matching the exact string. Parameters that are not mentioned in the string are not taken into account.
💡 This field accepts parameters as an option.
Example: https://mydomain.com/cart?news
contains
Includes all URLs containing the string. Parameters following the string will also be taken into account.
Example: /product/
is regular expression
Includes all URLs matching the regex. You don’t need to escape special characters of your regular expression.
Example: https://www.example.com
/products/(.*)--([0-9]{5})
is not
Excludes all URLs matching the string, even if they include parameters.
⚠️ This field doesn’t accept parameters.
Example: https://mydomain.com/cart
is not exactly
Excludes the URL matching the exact string.
💡 This field accepts parameters as an option.
Example: https://mydomain.com/cart
URL operator
Contains
Full URL
http://mydomain.com/category/
Result
The changes are applied to all pages for which the AB Tasty platform has identified a common section of URL. You must make sure non-desired pages aren't included by mistake because they contain the same section of URL: as a safety precaution, you may use a regular expression.
Example of a URL
You will target the http://mydomain.com/category/page1 page, but also http://mydomain.com/category/page1/article.html.
URL operator
matches Regular expression
Full URL
http://www.example.com/products/(.*)--([0-9]{5})
(For example if your URLs match the following format: http://www.example.com/products/product-name--12345, where 12345 coincides with a 5-digit product ID)
Result
A regular expression enables you to use a strict writing rule to define the pages to be targeted. This guarantees that you will include only the pages that need to be, particularly if your pages share a structure and include a set of digits and letters.
Refer to the http://rubular.com/ page to test your regular expressions or contact your CSM if you need help writing them.
Example of a URL
You will target the http://www.example.com/products/shoes-children--96753.html
or http://www.example.com/products/garden-furniture--13082 pages.
URL operator
Contains
Full URL
http://mydomain.com
Result
The changes will be applied to all the pages of the website on which the tag is implemented.
Example of a URL
You will target the http://mydomain.com page, as well as http://www.mydomain.com/category/page1/article.html and even http://www.mydomain.com/cart.









does not contain
Prioritization is possible for all personalization campaign types : Simple Personalization (SP), Multi-Page Personalization (MPP), Multi-Experience Personalizations (MEP).
Note that it is not recommended to prioritize the latter as it already includes a subtests prioritization in itself.
Please refer to this article to learn how to use this feature in details.
The answer lies in the way AB Tasty launch and displays the campaigns you create from the platform.
💡 Reminder
Let’s recall how the tag works and how it triggers campaigns. The AB Tasty tag is placed on every page of your website. When a visitor loads a page, the tag checks:
if test or personalization campaigns are targeted on this page
and if so, for each campaign, if their targeting condition makes the visitor "accepted", namely:
if they belong to the user segment chosen in the campaign (for instance "located in NYC”, “on mobile" etc.)
and if they have met the specific trigger rules (for instance “visited at least 5 pages”, “coming from Google” etc.)
The visitors will therefore see all the campaigns (test and personalization) created on your account, depending on their specific navigation and behavior on your website. In other words, your visitor can potentially see an unlimited number of campaigns (depending on what you've launched), with the side effects, visuals, and analytics implied by this overexposure.
To impose safeguards, and to indicate what should be triggered without any constraints and what should be constrained, our new prioritization service will help you identify those conflicts, and choose which campaign to display in a conflictual situation.
As we saw during our brief introduction, it is important to identify potential conflicts first. As more and more campaigns are being configured to tailor your website to your different audiences, it can be difficult to identify those conflicts without a dedicated tool. Before launching your personalization campaigns, you can now identify those conflicts between campaigns to find out which ones should be prioritized first and which priority level should apply to each campaign compared to one another.
A conflict happens when two or more campaigns either:
Target the same saved page(s) OR the “all pages” option,
Target the same segment (configured or “all visitors” one)
Moreover, those campaigns should be both live for the conflict to appear.
If you launch 10 separate personalizations on your homepage, targeting 10 segments of your audience to deliver a fully personalized experience, you run the risk of some of your visitors seeing more than one at a time, simply because it's not always possible to ensure that the segments are fully independent of each other.
Let’s take a simple example to understand that properly. Imagine the two following segments:
Segment 1: VIP cookie holders
Segment 2: Geolocated in NYC
VIP AND New York visitors are part of both segments, and will likely see both campaigns targeting VIPs, and those targeting New Yorkers.
Configuring and displaying too many messages can lead to user confusion. Personalization must remain compatible with the UX requirement of simplification and an intuitive understanding of your interface. The best messages being the clearest and most readable, your personalization campaigns can create a lot of "noise" with overlaps, deteriorating your strategy and website performance: this is what we want to avoid.
A basic example to illustrate that is the overlap of two campaigns which should originally display two different kinds of information for two different audiences. If you choose to use our widget pop-in, a same user that fits into two different segments could be targeted, and then sees two different modals that are triggered at the same time and overload the interface like intrusive pop-ups.
This case, although rarer, occurs when the 2 messages that are triggered (for example a modal on one side and a banner on the other), display promotional messages or messages related to the benefits you want your audience segments to enjoy. If a user is part of several audience segments at the same time (for instance “appetite for vintage” and “loyalty card holder”), they risk being exposed to 2 special offers that are not necessarily compatible when checking out, and lead to bad user experience affecting your revenue stream.
As you can see, prioritizing campaigns is essential when adopting an advanced and assumed personalization strategy, and when multiplying personalized messages for optimization purposes. To identify potential conflicts between your personalization campaigns, you can use two available filters: campaign and segments. Those filters recall the potential overlap we could have between two different campaigns.
Applying that filter makes AB Tasty compare campaigns according to the segment or saved Page(s) used inside the targeting section of each personalization campaign configured on the account:
By default, no filtering option is applied when you open the prioritization page
The “select a segment” dropdown presents you with the following options:
The first option in the segment filter list is the “All visitors” option. This is the default option in the audience section of the targeting. Even if you do not directly configure it inside your account, we consider the audience as a global segment that reaches all your website visitors.
The other options that appear in that list are the segment already configured on your account, which you can choose from to display only the campaigns that match your segment selection, and choose a level of prioritization between all of them. You can select multiple segments for you to display as many related campaigns as you would like.
At the bottom of the dropdown, you have the "create a segment" option to access the segment creation process.
The “select a saved page” dropdown presents you with the following options:
The first option in the saved page filter list is the “All URLs” option. This is the default option in the URL section of the targeting.
The other options that appear in that list are the saved pages already configured on your account, which you can choose from to display only the campaigns that match your saved page selection and choose a level of prioritization between all of them. You can select multiple saved pages for you to display as many related campaigns as you would like.
At the bottom of the dropdown, you have a “create a saved page” option to access the creation process on AB Tasty settings
This filter can be used to identify potential conflict based on a specific campaign which serves as a reference, that you must select from the dropdown list.
It enables you to display the campaigns that share the same targeting configuration:
The same segment (a specific/configured one or the “all visitors” one)
The same saved Page(s) (a specific/configured one or the “all pages” option)
Using the filters enables you to identify campaigns that may be in conflict because they target the same segment and/or saved Page(s). However, it doesn’t take into account the trigger and layout.
For example, when using the Segment and saved Page filter, you notice that two campaigns are displayed on the home page, and both target new visitors. However, one has no specific trigger and the other is triggered on exit intent. In this case, the conflict you have identified with the filter does not necessarily affect the user’s experience on the website. It is up to you to decide whether or not you want to prioritize between the two.
The prioritization screen enables you to prioritize your personalization campaigns when you need to launch several campaigns at the same time, especially when they are in conflict. Prioritization is available for all types of personalization campaigns: simple personalization, multipage personalization, and multi-experience personalization.
By default, all your campaigns are without priority, i.e. they will all be triggered if your visitor respects the targeting rules, namely:
they’re on the right page of your website - included in the targeting you have defined
they’re part of the visitor segment you have chosen (segment)
they have behaved as defined by your trigger rule (trigger)
This unconstrained exposure is perfect for campaigns without a strong visual impact (additional information in the description of your product pages for example) or that absolutely must be seen by everyone (banner showing a reminder of the legal sale dates).
We, therefore, recommend leaving the following campaigns unprioritized:
All campaigns that aim to correct your website (patch, winning variation after an A/B test, etc.)
All campaigns that will not generate overexposure or conflict
After identifying conflicts between your campaigns, you can start prioritizing them by applying a priority order to all/some of them. You can perform this action on our prioritization screen split into two different columns:
The left column refers to the “no priority applied” section: you will find here listed all your personalization campaigns that have not been prioritized yet. This list can be affected by the filter you choose from the segment/saved pages filters.
The right column refers to the “priority level” section: a list of campaigns that have been prioritized
Prioritized campaigns are displayed on the right column, in different prioritization-level sections. They are split between prioritization levels and constitute the prioritization rule that will be applied on your website. If a visitor matches the targeting of several prioritized campaigns on a specific page of your website, they will only see the one(s) with the highest priority level.
There is a maximum of 10 priorities: 1 being the highest and 10 being the lowest. The first 2 levels are mandatory (priority 1 and 2) to have a basic rule set. For example, if you place one or more campaigns in priority 1, you must have at least one campaign in priority 2. Other priority levels can remain empty.
You can place several campaigns within the same priority level (12 campaigns maximum per priority level). This means that they will be displayed to all visitors matching the targeting of these campaigns. However, we recommend placing campaigns that target the same page(s) inside different levels to avoid any conflict.
To prioritize a campaign, you just need to drag and drop it from the left column to the desired priority level.
Once you have placed your campaigns in different priority levels, you can save the prioritization rule by clicking the “Save and apply” button. The tag is updated automatically and your changes are automatically deployed in production.
If you leave without saving, the prioritization rule won’t be saved and won’t be applied live.
Generally speaking, your prioritization rule must be updated (click the Save and apply button) in the following cases:
when you move one or more campaigns from the non-prioritized column (left) to the priority column (right);
when you move one or more campaigns to another priority level;
when you move one or more campaigns from the priority column (right) to the non-prioritized column (left);
before you change the timeframe, because your changes will not be kept if you return to the original timeframe;
before you apply filters (filter by campaign or filter by segment and saved Page), because your changes will not be kept when you return to the original view.
To disable any prioritization rule, you can either move all your prioritized campaigns back to the left column (that is to say remove them from the priority column) or pause all your prioritized campaigns. To make these changes active, click the “Save and apply” button.
Prioritized personalization campaigns (SP, MPP and MEP) will fall under the priority ranks you give them. These priority ranks, called p-values, will determine if a visitor will see one campaign or another on the same targeting.
Up to 10 priority ranks can be set up.
When a prioritized MPP campaign has been seen by the visitor, thus historicized, the tag will check this campaign but will not check the lesser priority (aka higher p-value) of other MPPs. The prioritized SP will still be checked by the tag according to their priority.
This ensures that the visitor sees the whole journey of the historicized MPP and does not prevent other prioritized campaigns to be applied except lesser priority MPPs.
Between two historized MPPs we check the priority between them. So if an MPP p-value 1 and a MPP p-value 2 are historized, only the first will be displayed in case of targeting overlap.
Campaigns that are not prioritized will not be altered by the prioritized campaigns. They will be displayed according to their basic targeting setup (segment, URLs, trigger, frequency…).
As you saw through this article, there are many cases when our users need to orchestrate their personalization campaign to fit in a global personalization strategy. The main objective with personalization efforts and investments is to create as many different experiences as there are relevant audiences.
Let’s dive into a "real life" example. Imagine an e-commerce website wanting to send the following messages to its visitors:
Campaign 01: Offer a 20% discount to all visitors, with a banner triggered on the entire website
Campaign 02: Invite Parisian customers to the opening of their new physical store on the shopping cart page
Campaign 03: Patch the disclaimer of the website in the footer (on all pages)
Campaign 04: Offer an additional 10% discount to VIPs on top of the 20% discount for all (modal on the home page)
Campaign 05: Boost newsletter subscription for those who have visited at least 15 pages of the website during their session (triggering on all pages potentially)
First of all, we need to be able to identify the potential issues linked to the simultaneous launch of all these campaigns. It's pretty easy to spot potential frictions because we only have 5 campaigns, but picture the same scenario with 10 times as many campaigns and things quickly become difficult to manage. We advise you then to go through some specific steps to help you in the process.
First, let's identify the one campaign in the list that should be displayed all the time, for everyone, regardless of the circumstances and the visitor’s behavior on the website:
Campaign 03: Patch the disclaimer of the website in the footer (on all pages).
This campaign should remain on the left side of the screen, not prioritized. To see this campaign, your visitors simply need to match the targeting rules (where, who, when) of the campaign.
For other campaigns that may conflict with each other, you can use the "Campaign" filter inside the personalization service. To do this, select one of your campaigns, presumably the one deemed most important, for instance:
Campaign 04: Offer an additional 10% discount to VIPs on top of the 20% discount for all (modal on the home page)
Targeted pages: Home page
Segment: VIPs
This campaign offers an additional advantage to VIPs and is likely to trigger sales, and therefore can be considered more important than the other messages.
By choosing this campaign as a reference for your filter, you will be able to discover, in one click, which campaigns are triggered under the same conditions as your campaign 01 (on the same pages AND with the same targeted audience).
In our case, the filter gives the following results:
Campaign 04: Your reference, which now appears in green in your
Segment screen: VIPs
Pages: Home page
❌Campaign 02: Invite Parisian customers to the opening of their new physical store on the shopping cart page This campaign does not appear in the results because it is targeted on the shopping cart page and not on the home page
✅ Campaign 03: Patch the disclaimer of the website in the footer (on all pages) The campaign is targeted on all pages, including the home page, and the all visitors segment includes VIPs by nature.
✅ Campaign 01: Offer a 20% discount to all visitors, with a banner triggered on the entire website The campaign is also targeted on the entire website (including the home page) and the all-visitors segment includes VIPs by nature.
✅ Campaign 05: Boost newsletter registration for non-subscribers who have visited at least 15 pages of the website during their session The campaign is targeted on all pages, including the home page, and isn't targeted on a specific user segment, so on all visitors. The trigger used is "at least 15 page views", however, if the 15th page of your VIP visitor's session happens to be the home page (it could happen), they will see this modal as well as the 04 reference campaign. The risk of conflict is minimal but very real.
👉 This exercise shows that campaign 04 should be prioritized over campaigns 1 and 5.
👉 Campaign 3, as we have seen, can be triggered all the time and for all, because not only is it harmless and does not create conflicts with other campaigns, but it is also necessary that everyone sees it (it is a legal message).
👉 Campaign 2 does not need to be prioritized over campaign 1: they are not targeted on the same pages.
Now that you have identified the campaigns that need prioritizing, you can proceed as follows:
leave campaign 03 in the non-prioritized campaigns
position campaign 04 as priority 1
position campaigns 01, 02, and 05 as priority 2
This exercise is based on a reference campaign, in this case, the number 04. It is also interesting to repeat this exercise (filtering then making a decision based on a business approach) using the other campaigns as a reference (01, 02, or 05 for example), and to refine the prioritization rule by deciding, perhaps, to separate the 3 campaigns positioned in Priority 2 and to redistribute them with other priority levels (Priority 3 and 4).
Using the prioritization module will allow you to significantly increase the number of campaigns you can launch at the same time on your website without having to be concerned about potential conflicts.
By using the prioritization service, you will certainly uncover a lot of new use cases, specific to your business or industry, and to your approach of personalization as a way to drive your revenue.
To end this article, we have listed here a few more use cases and tips to guide you in your approach to prioritizing your personalization campaigns:
👉 You don’t want to spam your visitors with several messages/popins at once on a specific page.
👉 You don’t want to distort the results of your campaigns (and ensure that every single user will see only one personalization campaign at a time).
👉 You don’t want to visually break a page (when there are several popins triggered on the same page for example).
👉 You want to decide which campaigns must be seen as a priority if the user matches the segment of several campaigns.
👉 Limit the number of campaigns per prioritization level: A visitor who triggers a PX level on a page will potentially see all campaigns with that priority on the page they are on.
👉 Each time the page changes, the priority rule check starts from scratch: a visitor who saw a priority 3 campaign on their first page may see a priority 1 campaign on their second session page. Therefore, be vigilant and think "exposure per page".
👉 Keep your A/B tests in mind: even if the strategy and roadmap are different, be careful not to customize a tested page or check that your message will not affect the test results.
👉 Finally, the best personalization campaigns go unnoticed, the most effective messages are the most discreet because they appeal to your visitor's subconscious and do not deteriorate their experience (imagine the same experience in real life, if you were inundated with loud and aggressive messages in a store... you would leave immediately!). So before setting up multiple messages, we recommend building a persuasive and high-quality personalization strategy.
Conflict
Situation where two or more campaigns target:
the same saved Page(s) (strictly the same or one of the campaigns targets all the pages),
AND the same segment (strictly the same segment or one of the campaigns targets all the visitors).
Prioritized campaign
Campaign placed at a priority level.
Prioritization level
Section where you can place the campaigns you want to prioritize. You can have up to 10 prioritization levels.
Prioritization rule
All the conditions based on which the prioritized campaigns will be displayed for the visitors.
Made up of a number of prioritization levels and prioritized campaigns split into these prioritization levels.
Non-prioritized campaigns
Campaigns that have no priority level and thus can be seen by all visitors matching the targeting conditions (segment, page, trigger).
For more information about specific use cases you could experience please refer to our FAQ article.
Please refer to this article to learn how to use this feature in details.

ABTastyStartTest(testID); // <button onclick='ABTastyStartTest(12345)'>Launch a test from this button</button>

👉 To learn how to create a custom widget, refer to How to create a Custom Widget.
👉 To learn more about the functioning od Custom Widgets, refer to Custom widgets: global usage and information.
Here is the list of propname fields and their specificities:
Displays a list of input numbers It is primarily used to define box-model dimensions (top, right, bottom, left) for many uses, margins, padding, positioning, etc.
value: array containing an object The number of elements in your object will define the number of inputs. Input labels are object keys and the values are the key/values from the object.
Displays a checkbox in the form
value: checkboxes do not have a value property but a checked property instead, which is a boolean
Displays a code editor input You can specify the code type (JS or CSS).
value: character string
Specific Property
rows: enables you to define the number of rows to display by default in the UI.
Displays a color picker
value: character string
Displays a simple date picker
value: date object or valid date string
Displays an all-in-one date and time picker, enabling you to get a requested date and time from users. Can be used for a countdown, for instance.
value: date object or valid date string. An empty date string will use the current date as the default value.
return value: Unix timestamp
Displays a datetimepicker, in addition to a collapsed group to set further information :
a toggle to follow the sun (will end at this time in each timezone or not)
a selection input to choose a timezone when needed (when the "follow the sun" toggle is off)
value: object with two properties at init :
type: should be set to init on the form part
value: same as datetimepicker but also allows a GMT timezone string
DATA value: a complete object
previewTimestamp: timestamp number (value to be used for the editor preview when the "follow the sun" toggle is on)
type: local or global value, depending on whether the "follow the sun" toggle is on or off.
timecustom widgets: object, in numbers, corresponding to the minute, hour, day, month, or year.
Hides an input
value: character string
Displays information to the user about the features of your form or custom widget
value: This custom widget does not need a value property.
Specific Properties:
label: character string corresponding to the message to be displayed
hrefUrl: character string corresponding to the URL you want the user to be redirected to
Displays an input of type number
value: number
Specific Properties:
You are also able to provide more properties:
min: number (default value is 0);
max: number (default value is 9999);
step: number (default value is 1).
Displays text into the form. It can be used to inform, alert, and so on
value: no value is needed in this case.
Content should be placed in the text property - character string.
Displays a radio input with multiple radios
value: character string || number || boolean
Specific Property for Radio:
options [Array of objects: {label: type label, value: same as value}]
Display a radio input with images/icons as buttons
value: character string
Specific Property: options are the same as for radio label and style The character string should be long or short, depending on the desired button size.
Displays a select that includes a search input for selects that have several values
value: character string
Specific Property:options are the same as for radio
Specific Options Properties:
placeholder: character string. Text to be displayed when the search field is empty.
Displays a select
value: character string
Special Property: options are the same as for radio
Displays an input used to fill selectors containing a button. It will enable the user to select a website element.
value: character string (more likely formatted as a CSS selector)
Displays a slider to select a number as a value
value: number
Specific Properties: min and max of type Number Both are optional. The default values are 0 and 100.
Displays a switch that enables the user to select an option
value: boolean
Displays a text area that enables the user to enter text
value: character string
Specific Property: rows of Number type to define the number of rows of your textarea
Displays a simple text input
value: character string
A text type input dedicated to the URL Format checking and error handling are managed by default.
value: character string
Displays a textarea input enriched with text styling features
value: character string
followTheSun: boolean
previewTimezone: character string for geolocation timezone Ex: 'Europe/Paris' (value to be used for the editor preview when "follow the sun" toggle is on)
timedef: object. Same as timecustom widgets.
timezone: character string for geolocation timezone ex: 'America/Los_Angeles'
userContext: object with complete data related to the current user:
isInDST: boolean describing whether the user is currently in daylight - saving time or not.
local: object similar to timecustom widgets but with current user date and time values
offset: number resulting from getTimezoneOffset
timestamp: timestamp number
timezone: character string for geolocation timezone ex: 'Asia/Tokyo'




















const paddingForm = {
type: 'areainput',
label: 'Container padding',
propName: 'containerPadding',
value: [{ top: 35, left: 60, bottom: 35, right: 60 }],
};const triggerOnPageLoadForm = {
type: 'checkbox',
label: {
en: 'Page load',
fr: 'Au chargement de la page',
es: 'Al cargar la página',
de: 'Beim Laden der Seite',
},
propName: 'pageLoad',
checked: true,
};export const triggerEventCustomScript = {
type: 'codeeditor',
label: 'Custom Trigger JavaScript Code',
propName: `TriggerEventCustom`,
value: `
async function launchIfScroll() {
return new Promise(resolve => {
document.addEventListener('scroll', () => resolve(true), {once: true});
});
}
const result = await launchIfScroll();
return resolve(result);`,
rows: 15
};const backgroundColorForm = {
type: 'colorpicker',
label: 'Background color',
propName: 'backgroundColor',
value: "rgba(247, 247, 247, 1)",
};DATA value: Date.tostring()
const inputDate = {
type: 'datepicker',
label: 'Pick a date to display',
propName: 'date',
value: new Date(),
};const inputDateTime = {
type: 'datetimepicker',
label: 'Pick a date and time to display',
propName: 'datetime',
value: '',
};const inputDateTimeTimeZone = {
type: 'datetimetimezonepicker',
label: 'Pick a date and time to display',
propName: 'datetimeTimezone',
value: {
type: 'init',
value: '+0100'
},
};const hiddenInput = {
type: 'hidden',
value: window.innerHeight,
propName: 'innerHeightSetup',
};const documentationNotification = {
type: 'inlinenotification',
label: 'Click here to access documentation',
hrefUrl: 'https://developers.abtasty.com/',
};const zindexCustomForm = {
type: 'number',
label: 'Custom z-index value',
propName: 'zindexCustom',
value: 1,
min: -2147483647,
max: 2147483647,
};const styleHelper = {
type: 'paragraph',
text: `In that part you can add styles to your custom widget.`,
};const insertPositionForm = {
type: 'radio',
label: 'Select where to insert the custom widget compared to selected element',
propName: 'insertPositionType',
value: 'afterbegin',
options: [
{
label: 'Before selected element',
value: 'beforebegin'
},
{
label: 'At the beginning of selected element',
value: 'afterbegin'
},
{
label: 'At the end of selected element',
value: 'beforeend'
},
{
label: 'After selected element',
value: 'afterend'
}
]
};const textAlignmentForm = {
type: 'radioImage',
label: 'Text alignment',
propName: 'textAlign',
value: 'center',
style: 'little',
options: [
{
label: 'Left',
value: 'left',
src: `https://widgets-images.abtasty.com/style/icon-text-alignLeft.png`
},
{
label: 'Center',
value: 'center',
src: `https://widgets-images.abtasty.com/style/icon-text-alignCenter.png`
},
{
label: 'Right',
value: 'right',
src: `https://widgets-images.abtasty.com/style/icon-text-alignRight.png`
}
]
};const textFontNameForm = {
type: 'searchselect',
label: 'Select font',
propName: 'fontName',
value: 'inherit',
placeholder: 'Search for a font',
options: [
{
'label': 'Inherited from element',
'value': 'inherit',
'description': '',
}
{
'label': 'Roboto',
'value': 'Roboto',
'description': '12 styles',
},
{
'label': 'Open Sans',
'value': 'Open Sans',
'description': '10 styles',
},
{
'label': 'Lato',
'value': 'Lato',
'description': '10 styles',
},
{
'label': 'Montserrat',
'value': 'Montserrat',
'description': '18 styles',
},
],
};const backgroundPositionForm = {
type: 'select',
label: 'Background position',
propName: 'backgroundPosition',
value: 'center',
options: [
{
label: 'Top',
value: 'top'
},
{
label: 'Bottom',
value: 'bottom'
},
{
label: 'Center',
value: 'center'
},
{
label: 'Left',
value: 'left'
},
{
label: 'Right',
value: 'right'
},
]
};const triggerEventClick = {
type: 'selectelement',
label: 'Select the element that will trigger the custom widget on click'
propName: `triggerElementClick`,
value: 'body',
};const borderWidthForm = {
type: 'slider',
label: 'Border width',
propName: 'borderWidth',
value: 2,
min: 0,
max: 50,
};const displayCloseButtonSwitchForm = {
type: 'switch',
label: 'Display close button',
propName: 'closeButton',
value: true,
};const textContentForm = {
type: 'textarea',
label: 'Text to set in your custom widget',
propName: 'textContent',
value: `Your message goes here.
Keep it short and to the point. Make short sentences.
Invite your users to consider your idea.
You can do multi-line messages.`,
rows: 6,
};const buttonTextForm = {
type: 'text',
label: `Button's text`,
propName: 'buttonText',
value: 'See the offer',
};const linkForm = {
type: 'url',
label: `Button's URL`,
propName: 'redirectionUrl',
value: window.location.origin,
};const custom widgetTextContent = {
type: 'wysiwyg',
label: 'Text',
propName: 'content',
value: `Your message goes here. Keep it short and to the point. Make short sentences. Invite your users to consider your idea.
You can do multi-line messages.`,
};Widgets are pre-built pieces of code you can directly use in the Editor to create your test variation(s) or personalized message(s).
In each type of campaign editor (all types of Tests and Personalizations, except AA Tests), you can open the widget library by clicking on “Add Widgets”, located in the right sidebar of the visual editor.
The widget configurator opens in a left panel in the visual editor.
All types of widgets are customizable. Depending on the widget you've chosen, the configurator will be different, with different tabs depending of the widget.
Under the Layout tab, for some widgets, you will find different options for the widget, including:
its shape
its position on the page
For some widgets, their shape is defined by their name. For example, the Image Pop-in widget is only available as a pop-in (a modal), and not as a banner. Still, in the Layout tab, if you can't change the shape, you can change the dimensions. Ex:
The four most frequent widget layouts are:
Modal
This layout offers a centered modal (pop-in) which comes with an underlay that you can darken or make fully transparent. For some widgets, you can change the dimensions. For others, their dimensions adapt to the content they contain (whether it’s text or images). And for some, both options exist. The container of the modal layout can be customized (border, background color or image, drop shadow, underlay, etc.) in the Style tab.
Top banner and bottom banners
These two layouts offer a sticky full-width banner that can be placed at the top or bottom of the page. The banner layout can be customized (border, background color or image, etc.) in the Style tab.
Free placement
This option allows you to place a widget in the flow of the page between already existing elements.
It is not the easiest layout to set and you may need to know a bit about the existing structure of the elements of the page before using it, but it is the best layout to make the experience seamless. We highly recommend it for widgets such as or. It is the default layout for the .
As we will see in the detailed article below, the four different sub-options you need to understand when using this layout are Before, At the Beginning, At the End, and After.
The free placement layout can customized (border, background (color/image), drop shadow, underlay...) in the Style tab.
In other widgets, such as Image or , you’ll find additional layout options:
Fundamentally, they are "modal“ layouts. Depending on the layout you select, you will have different sub-options. You will learn more about their subtleties in the specific .
Some widgets, such as or , do not have a Layout tab.
Some widgets (like , , and ) have the Free Placement layout. This option lets you position the widget almost anywhere on the page.
Pre-requisites: It has to be positioned in relation to the existing elements of the page (<div>, <p>, <h2>, <section>)
Once you've selected the element the widget will be positioned in relation to, you have to define the relative position to it.
Click Select Element.
On the page, select the element you want to position the widget in relation to.
Select the option to position the widget Before, At the Beginning, At the End, or After the element.
Before places the widget before the selected element.
At the beginning places the widget at the beginning of the selected element (and therefore may inherit the element’s existing style).
At the end places the widget at the end of the selected element (and therefore may inherit the element’s existing style).
After places the widget after the selected element.
By default, the selected element is <body> and the option "At the Beginning" makes the widget visible at the top of the page and (if the body element is not very styled) you can see the widget without too much inherited style.
Now, let's look at an example with this HTML code:
Watch how the widget reacts depending on if we select the <div>, the <h2>, or the <p> and if we select: Before, In the Beginning, At the End, or After on each one of them.
If you've selected the modal or top/bottom banner layouts, you will see a component allowing you to select the z-index value of the widget.
By default, widgets with "modal" or "banner" layouts are injected into the DOM at the same level as the <body> element. Therefore, their container has the same z-index value.
But you can pick a different value:
The Style tab enables you to "merge" the widget with your website’s design (colors, font faces, border-radius, etc.).In general, you’ll find the following sections in the Style tab:
Text: customize the UI in all the texts fields of the widget
Buttons: not mandatory but need to fit your UI
Container: all relative to the content/background of your widget
Border
By default, we apply a style to the widget so you can:
see it
see what can be done in terms of styling
do nothing, if you don't have time and urgently need to add one
However, these default values are directly inspired by the AB Tasty style guide.
For many widgets, the font family is inherited from your website.
Here are some tips to help you customize your widget using our style configurator: You can directly paste the hexadecimal color code in the color picker (so you don’t have to open the pipette box). 3, 4, 6, or 8-digit HEX codes are accepted and interpreted (transformed in 6-digits + opacity value). Once set (manually or by pasting a HEX code), you can save up to 14 colors in your color palette to easily reuse them.
The Google Fonts API is integrated and offers 1,000+ fonts, each one with a short or long list of available weights, italicised or not.
By default, the widget inherits your website’s font. Here is how you can change it:
You can add elements and classes in the text area of the Content tab if you want to have stylable elements with the editor. Finish the styling of the widget first, save it, and use the Edit Style feature of the Visual Editor on these elements afterward. You must first finish your widget configuration - otherwise, the text styling in the widget configuration form will override the changes made with the “Edit Style" feature.
If the button border thickness is set to 0, the border color picker is hidden as there is no need to define a color. Change the border thickness to a value greater than 0 to view the border color picker.
Border thickness is limited to 50 px and button border radius is limited to 30 px. If you need a greater border thickness, you can use the Edit Style feature in the Visual Editor.
For pop-in widgets (Simple Pop-in, Image Pop-in, Video Pop-in) and the Countdown widget, you can define the position of the button within the container. You have four options:
This section allows you to customize the global style of your widget, including background, margins, and paddings.
If you reduce the opacity of the background of the container to 0%, you will see the color of the underlay. If your underlay color is not fully opaque, then you will see the website underneath.
You can upload an image as a background for the widget. The image can be a png or a gif.
Then, depending on the image ratio and the widget ratio, you can use the background fit options to adapt it to your needs. As an example, let's use a 400 x 300 px widget (blue rectangle) and a 500 x 500 px image (Princess Leia).
Here is how the background will be managed if you use Cover, Contain Fill, or None.
Cover keeps the ratio - takes the full width of the container.
Contain keeps the ratio - takes the full height of the container.
Fill breaks the ratio - adapts to both the width and height of the container.
None keeps the ratio - does not adapt dimensions to the width or height of the container.
If you’ve chosen Cover, Contain, or None, you will have the option to define where the image position "starts":
Top
Bottom
Center
Left
Here’s the example with the Contain fitting option:
With Contain or None options, a new toggle option - "Repeat background image" - displays. By toggling it on, you will replicate the image all over the available background space. It can be useful if you want to use a pattern. Here is an example with the "pied-de-poule" pattern.
This shows a drop shadow around the widget. You can define the "drop shadow color (and opacity)" and the "drop shadow blur radius (px)".
The shadow is oriented toward the bottom of the widget. It can be overridden with custom CSS.
Border Simply change the parameters to use this option.
Underlay This block is only available when the selected layout is "modal" or the widget is modal (pop-in).
Underlay options In general, we advise you to use a dark color with at least 50% of opacity for the overlay. If you prefer to use the white or light color as an underlay, we strongly recommend using 80% or more transparency. If needed, you can make the overlay "disappear" by selecting 0 opacity.
Overlay clickable to hide the widget You can toggle this option on to hide the widget when your visitors click on the underlay. Beware: If you toggle it off and also hide the close button, your visitors will have no way to hide the modal/close the widget. They will remain "stuck" on the pop-in. We strongly recommend that you leave at least one of the two options.
You can enable or disable a close button in the top-right corner of the widget.
If enabled, you will have a list of styling options:
Close button position (inside or outside the widget)
Cross size
Cross color
Close button background color
If the close button is positioned outside the widget, make sure to test your close button in different contexts so that it contrasts enough with the underlay (or absence of it) or the background (the page itself).
On modal layouts, you can make the underlay clickable to close or hide the widget.
If you're not using a modal layout and if you hide the close button, the users will not be able to close or hide the widget, unless you use a click on the button or a click on the whole widget to close or hide the widget.
In other widgets such as NPS or Countdown, you will find other styling groups (like Preview, Digits, or Legend). Read each to learn more.
A lot of widgets have a common Conditions tab. These additional options condition the display of your widget regarding the visitors’ behavior and can manage recurrence.
These options do not affect the trigger of your campaign, meaning that a visitor can trigger the campaign (i.e. they are on a targeting page, they are part of the targeted segment, they respect all the triggering conditions in the targeting), so AB Tasty will collect their data for the report, but perhaps he won’t see your widget at all because of the conditions you’ve set in the trigger.
The triggering and recurrence features of the widgets are the only JavaScript code that is not executed in the editor. You will need to QA the widget properly to "see" the triggering and the recurrence being executed.
You can choose between several options to trigger the visibility of your widget:
When the page is loaded: Displays the widget when the page is loaded, at "DOM Ready", meaning when the DOM (all the elements of a page) is ready (are loaded). It is the default trigger. In this case, the widget will never appear before the HTML of your page.
As soon as possible: Displays the widget as soon as the AB Tasty tag can be executed. This option can be useful to display the widget even if the page is heavy to load, with infinite scroll, or lazy loading. In this case, the widget can appear before the HTML of your page.
At exit intent: Displays the widget when the user moves their cursor toward the top of the page (as in, about to close the browser active tab or switch tab). In this case, the widget may never be triggered if the session ends because of inactivity.
Custom trigger: Displays the widget according to the custom code you’ve configured using the resolve() function. If this function returns true, the widget is triggered. If the function returns false, the widget isn’t triggered. It can cover many use cases and specific needs. A specific behavior (right-click, double-click, rage-click, text selection, horizontal scroll) and everything that the browser can be aware of. In this case, the widget may never be triggered during the session.
Delay (seconds): Displays the widget after a given time interval. Available only for the following triggers: "When the Page is Loaded", "As Soon as Possible", "At Exit Intent", "After X Seconds of Inactivity", and When an Element is Visible".
Trigger only once per page: Choose to trigger the widget several times or only once per page. Available only for the following triggers: "At Click on an Element" or "Custom Trigger".
Auto-hide after redirection: If the widget is a link or contains a link in a button, you may need to hide the widget once it has been clicked on. You can also add a delay to hide it.
When the widget has been triggered once, you can display it again based on several options available from a drop-down list.
The widget will be displayed: This defines whether the widget will be displayed only once, every time, or every X days, weeks, or months. The X is a minimum. If you define “5 days” and the visitor comes back 12 days later, the widget will be displayed again.
After closure, the widget will be displayed: If the widget can be closed, then you will be able to set the recurrence after closure. This means that if a visitor closes the widget, they will see it (again) next time (every time), every X days, weeks, or months, or just this time (when they close, they won’t see it again). The X is a minimum.
After clicking, the widget will be displayed: If the widget contains a link or is a link, then you will be able to set the recurrence after clicking. This means that if a visitor clicks on the widget link, they will see it (again) next time (every time), every X days, weeks, or months, or just this time (when they click, they won’t see it again). The X is a
The recurrence options apply the first time the widget is displayed on the web page.
Every time: Enables the widget to display at every trigger Caution: This option is not advised to use if your widget is a pop-in, as it will break the navigation.
Every session: Enables the widget to display each time a visitor starts a new session (sessions stop after 30 minutes of inactivity and start every day at 3:00 am in the time zone defined in your settings)
Every X days: Enables the widget to display depending on the specified number of days. X is the minimum. For example, if the recurrence is set to "every 1 day", it means that the widget will be displayed to the visitor again 24 hours after the first time he saw it.
As with every modification in the editor, you can:
Undo or redo your last action(s) in widgets
Hide widgets
Duplicate widgets
Rename widgets
All these options are available in the section “Active Changes” in the right-side panel:
For Tracking widgets, you will be able to duplicate them by opening the "Trackers" panel (not the "Active Changes" panel).
Even if it is possible, we do not recommend duplicating Tracking widgets. To avoid creating conflicts in your campaign report, we recommend adding a single widget in which all your scroll goals are defined. If you duplicate a Tracking widget containing several goals, all its goals will be duplicated.
We display a disclaimer if you add a widget that’s already added to your variation:
Note that this does not forbid you from adding more than one widget of the same type
This is the list of restrictions for your widget configuration.
Inputs: Text (such as titles or URLs) is limited to 255 characters.
"Link URL" inputs: By default, these inputs are filled in with the domain of the URL you gave at the Main Information step in the campaign creation flow.
Text areas: Long text (such as descriptions) are limited to 10,000 characters. You can type HTML code in a text area. To add bolded or italicised text use the following: This is regular text. <strong>This text is bold.</strong> This is regular text. <em>This text is italicized.</em> or any other HTML element. You can also add emojis in this field.
Image uploads: Image formats supported: jpg, png, gif, svg, webp, and avif. Max image weight: 2 MB.
Color pickers: Colors can be defined in hexadecimal on 3, 4, 6, or 8 characters (excluding the "#" character).
Pipette box "user colors": You can save up to 14 colors in this section. They are saved in local storage, are personal to you, and are not shared with other users, even from your own account.
Multilingual management: Currently, widgets don't support multilingual content. If you want to adapt your widgets to more than one language, you will have to create (or duplicate) as many campaigns as necessary.
Our widgets are versioned: Our latest improvements are always published in the new version of the widget.
When you create a new campaign from scratch and add a widget, the latest version will be automatically added.
If you duplicate an existing and older campaign, you won’t duplicate it with the latest version, as you’ll import the widget version, too. It is recommended that you use the latest version of each widget to be sure to benefit from the latest improvements and compatibilities.
If your widget’s version is not the latest one, you will see an alert in the widget form header with this message: "This version is not the latest. We recommend you use the latest version from the widget library."
Ex: "Version 2.5.8"
2 is the number of the major version
5 is the version of the minor version
8 is the number of the patched version
Between two major versions, the widget has been completely rewritten.
Between two minor versions, the widget has received important bug fixes, the layout has changed, new components have been added, and/or some components have been removed.
Between two patched versions, the widget has been quick-fixed or a translation may have changed.
When a patched version is released, all widgets of the same minor version number are automatically replaced by the patched version, regardless of whether the campaign is running.
To check that you are using the latest version of the widget, go to the widget library and add a widget. If there is already a widget in your campaign, go to the widget library and add the same widget. If the two widgets have the same version number, you are using the latest version. If the one you've just added has a higher number, the widget previously in place is obsolete, and you should use the latest version.
For more information about preset widgets and how to create and use them, please refer to the following .
In case you need support, follow the instructions given in the articles below:
💡
Close Button
Center
Right
Full-width (100%)
Top left
Top right
Bottom left
Bottom right
Close button border thickness
Close button border color (only if border is >= 1px)
After x seconds of inactivity: Displays the widget when the user remains inactive on the website for a given amount of time (no scroll, no click, no movement). Contrary to the other triggers, the delay slider on this one defines the number of seconds of inactivity (the default for this trigger is 10 seconds). In this case, the widget may never be triggered during the session.
At click on an element: Displays the widget when the user clicks on a defined HTML element of the page. It can be a button, an image, a <div>, the <body> element... In this case, the widget may never be triggered during the session.
When an element is visible: Displays the widget when a defined HTML element appears in the visitor’s viewport. This element can be present at page load in the "fold", or at the footer of the page. It can be used as a scroll percentage trigger. In this case, the widget may never be triggered during the session.
Every X weeks: Enables the widget to display depending on the specified number of weeks. X is the minimum.
Every X months: Enables the widget to display depending on the specified number of months. X is the minimum.
Once (no recurrence): Enables the widget to display only once (the first time it is triggered)
Edit widgets

<div class="myDiv" style="border:1px solid #393939; padding:2rem;">
<h2 style="color:blue; font-size:2rem;">Title</h2>
<p style="color:teal; font-size:0.8rem;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed elit cursus, facilisis magna et, molestie felis. Nunc fermentum quam felis, id finibus nunc sodales ac. Duis sagittis egestas mi, non auctor magna efficitur venenatis. Donec mollis risus nec urna fringilla, eu cursus risus aliquet. Suspendisse aliquam a tellus in malesuada.</p>
</div>
































This page will help you understand and fully use the Targeting Step of each campaign you create.
The Targeting step will allow you to define the conditions in which your campaign will be displayed.
In this how-top article, you will learn how to define:
Targeting is a step inside the campaign creation flow. You have several options to access it.
When you create a campaign from scratch, this is the 2nd step for Personalizations and the 4th step for Tests.
From the Campaign dashboard, when clicking the pen icon for each campaign, and choosing “targeting” from the list
A segment is a cluster of users/ visitors who share specific persistent traits though sessions.
The segment enables the campaign to be displayed to the configured visitor segment only when the conditions are met.
Segments are mostly based on current and former sessions conditions and behaviors.
You want to choose between displaying the campaign:
to all your visitors
to a specific segment you've already created in the past and which is available in the list
to a new segment you can create by clicking on Create new segment (see the article )
The segment applies differently regarding the type of campaign:
Tests: it applies to your whole AB Test, meaning the original variation (V0) and all the variations (V1, V2, and V3 for an A/B/C/D test, for example)
Personalizations: it applies to the selected scenario for the personalization campaigns. Use the dropdown to navigate between scenarios and choose the right segment for each of them
Patches: the option is not available, "all visitors" is selected by default
To learn more about the way the tag detects the segment and triggers the campaign, please refer to the about criteria.
For A/B Tests, Simple Personalizations, and Patches, you’ll have to define your "Who section" once for your campaign, because these types of campaigns have only one “experience” (one type of new content generated with AB Tasty to display).
For Multipage Tests, Multivariate Tests, and Multipage Personalizations, you’ll have to define your "Who section" several times for your campaign, for each page. But we encourage to use exactly the same segment to ensure the continuity and visibility of all experiences during the visitors’ navigation.
For Multi-experience Personalizations, you’ll have to define your "Who section" several times for your campaign, for each experience. You'll have to choose different segments for each experience, because this is the objective of this kind of campaign.
ATTENTION
In any case: Don’t forget to use the dropdown menu on the Targeting page to switch between experiences and set up your segment for every experience
We also offer a “Replicate” option, which allows you to replicate the full targeting setup or one part of the targeting setup of one experience in another experience, or in all experiences.
For more information refer to this and the .
If you want to edit, duplicate or delete existing segment(s), you can do so directly from the dropdown menu:
You can choose to target multiple segments alternatively (some) or cumulatively (all).
Click on the pen icon and you will open the . You can then modify the name of your segment and/or its configuration. Click Save to record your changes.
In this case, you can: \
Pause the ongoing campaign(s) to edit the segment: you can edit and save it \
Duplicate the segment to have a new one with the same configuration\
BE CAREFUL
You can’t delete a segment that is already used in a live campaign or is live in a QA campaign.
You need to pause the campaign(s) that use(s) the segment to be able to delete the segment from your account.
Configuring the targeted pages of your website means specifying the page(s) for which the changes made via the visual editor/ code editor will be seen by your visitors. This configuration is made inside the targeting interface, on the same page as the segment configuration, in the “where” section.
The targeted pages set-up applies differently regarding the type of campaign:
AB Tests: it applies to your whole AB Test, meaning the original variation (V0) and all the variations (V1, V2, and V3 for an A/B/C/D test, for example) for a test
Multipages tests and Multipages patches: it applies to the selected sub-test. Use the dropdown to navigate between sub-tests and choose the right pages for each of them
Personalizations: it applies to the selected scenario for the personalization campaigns. Use the dropdown to navigate between scenarios and choose the right pages for each of them
For A/B Tests, Simple Personalizations, and Patches, you’ll have to define one single targeted page rule for your campaign because these types of campaigns have only one “experience” (one type of new content generated with AB Tasty to display).
For Multipage Tests, Multivariate Tests, Multipage Personalizations, and Multi-experience Personalizations, you’ll have to define a targeted pages rule for each “experience” or "sub-test". This rule can be the same or different depending on your needs.
Use different targeted pages for Multipage Tests and Multipage Personalizations. This is the objective of these kinds of campaigns: displaying several different messages (the experiences, to create a relevant and complete user journey) on several different targeted pages.\
Use the same targeted pages for Multivariate tests if you’re testing a combination of several changes on the same page and try to discover the better combination (color of the CTA, small style banner, new product carousel on a product page)\
Use the same targeted pages for Multiexperience Personalizations: this kind of campaign has been designed to help you to launch several messages to different segments in the same campaign and to assure no overlap between messages. To learn more about them, please
BE CAREFUL
Don’t forget to use the dropdown menu on the Targeting page to switch between experiences to set up your targeted pages in every experience.
We also offer a “Replicate” option, which allows you to replicate the full targeting setup or one part of the targeting setup of one experience in another experience, or in all experiences.
For more information refer to this and the .
When you land on the page, you’ll find the following set-up:
The "is" selected by default\
The URL you’ve used in Step 1 Main Information page to load the Visual Editor which is pre-pasted in the URL field
Additional options:
BE CAREFUL
The URL field is case sensitive (i.e. a targeting 'contains' 'CHECKOUT' will not affect visitors on a URL like 'https://abtasty.com/checkout/' to the campaign).
The dropdown will present you with several options, in this order:
Inclusive operators: is, is exactly, contains, is regular expression, and is
Exclusive operators: is not, is not exactly, does not contain, is not regular expression, and
Target All URLs: it will target your campaign on all your website pages where the AB Tasty generic tag has been installed.
Caution: If you have several sub-domains for all of the languages or countries you’re addressing, your campaign will be displayed on all of them. Use this option with caution, if you are sure that your campaign should be targeted on 100% of the pages of your domain. For more information about the way you've set-up your account regarding domains, please refer to this .
This is the matrix about the way the operators work:
To learn how to manipulate operators to build the correct pages targeting, please refer to this complete .
From the dropdown, you can access the list of the you’ve previously set up in the . For that, you just have to select the following operator:
Is saved Page
Is not saved Page You can access the page builder by clicking on “Manage Saved Pages”.
Please refer to for more information.
Useful tip: You can see the content of the setup of your saved pages by hovering over them: \
You can directly click on the saved page you want to include/exclude by using the dedicated “is saved page” option in the previous dropdown. \
You can mix the inclusion of saved pages with the exclusion of saved pages by clicking on “Add Condition”. You can also mix saved pages with custom URLs.
In any case, the functional rules between inclusions and exclusions are the same for the setup by URLs:
Inclusion(s) only: If you include one or several specific URL(s) and saved pages, all the other URLs will automatically be excluded from the targeting. At least one of them has to match.
Exclusion(s) only: If you exclude one or several specific URL(s) and saved pages, all the other URLs will automatically be included in your targeting configuration.
Combination of inclusions and exclusions: You can combine inclusive rules with exclusive rules. In this case, to be accepted in the targeting, a website’s URL has to match:
Use the CSS selector option if you want to display changes on the pages of your website containing an element linked to a specific ID or class, whose presence cannot be determined by a URL. It is useful for targeting a set of pages that don't share a specific URL structure.
ID: You can paste your ID with or without ‘#’. In the latter case, it will be automatically taken into account.
Class: You can paste your Class with or without a dot(.). In the latter case, it will be automatically taken into account.
Custom selector: To write or paste your own custom selector according to all the syntax rules of CSS. Don’t forget to add # or a dot(.) before an or a when using this option.
Shadow DOM: you can define where the Shadow DOM container lies and do a targeting according to it.
iFrame: you can define where the iFrame element container lies and do a targeting according to it.
Don’t forget to add a ‘.’ for a class or a “#’ for an ID.
This option is compatible with other options in the section, except for the Target All URLs option. The option "My element appears after page load" is useful if you element is loaded after the page load (dynamic element such as a popin for exanple).
BE CAREFUL
When you use this option with targeted URLs, the operator between both options will be AND. Meaning that the targeted pages will have to respect both rules in the targeted URLs section and the class option section.
For more information on this option, refer to .
The code-based option enables you to insert JavaScript code to trigger a campaign depending on the presence of a specific JS instruction. This option is compatible with other options in the section, except for the Target All URLs option.
When using this option, you must comply with the following rules:
Do not use a function (){ at the beginning of your code.
The function/condition you code must return a true or false value.
If you plan to use jQuery, you must enable the use of . In this case, go to Account Management → and select Load AB Tasty’s jQuery.
For more information on this option, refer to .
A trigger is a temporary user condition that enables you to display the campaign in a specific context.
The trigger enables the campaign to be displayed to the configured visitor segment only when the conditions are met.
Triggers are mostly based on current session conditions and behaviors.
You can choose between displaying the campaign:
Anytime: no trigger is defined and the campaign will display in all cases, without any specific conditions
Following the rules of an existing saved trigger you have already created\
Following new rules of a new saved trigger you can create by clicking on Create new trigger (see the article )
The trigger applies differently regarding the type of campaign:
Tests: it applies to your whole AB Test, meaning the original variation (V0) and all the variations (V1, V2, and V3 for an A/B/C/D test, for example)
Personalizations: it applies to the selected scenario for the personalization campaigns. Use the dropdown to navigate between scenarios and choose the right segment for each of them
Patches: the option is not available, "all visitors" is selected by default
To learn more about the way the tag detects the trigger and triggers the campaign, please refer to the about criteria.
For A/B Tests, Simple Personalizations, and Patches, you’ll have to define your "How section" once for your campaign, because these types of campaigns have only one “experience” (one type of new content generated with AB Tasty to display).
For Multipage Tests, Multivariate Tests, and Multipage Personalizations, you’ll have to define your "How section" several times for your campaign, for each page. You can use different triggers to build a unique and consistent experience during the visitors’ navigation.
For Multi-experience Personalizations, you’ll have to define your "How section" several times for your campaign, for each experience. But we recommend to choose exactly the same trigger conditions for each experience, the only objective of this kind of campaign is to display different messages to different segments and avoir messages overlap.
BE CAREFUL
Don’t forget to use the dropdown menu on the Targeting page to switch between experiences and set up your segment for every experience
⭐️ Best practices :
Use the same trigger on all experiences when this trigger is linked to your visitor’s current situation (e.g. geolocation criteria, device criteria, etc.)
Use a different trigger on all experiences when the trigger is linked to a contextual behavior. e.g. Experience 1 is a pop-in that will be triggered after 5 viewed pages to promote sales (trigger = minimum viewed pages), Experience 2 is a banner in the basket (no specific trigger)
We also offer a “Replicate” option, which allows you to replicate the full targeting setup or one part of the targeting setup of one experience in another experience, or in all experiences.
For more information refer to this and the .
If you want to edit, duplicate or delete existing trigger(s), you can do it directly from the dropdown menu:
You can choose to target multiple triggers alternatively (some) or cumulatively (all).
Click on the pen icon and you will open the . You can then modify the name of your trigger and/or its configuration. Click on Save to record your changes.
In this case, you can:
Modify the configuration and use the new trigger in this campaign only (CTA Use Without Saving). The new trigger will be used for this campaign only, and you’ll find it at the top of the list in the dropdown. If you edit it again, you’ll be able to give it a new name and save it as a new saved trigger
Go back to the previous dropdown and duplicate it before editing
Pause your campaigns first before editing and saving it
By clicking on the trash icon, a prevention pop-in will ask you if you’re sure you want to delete the selected trigger.
Click Delete to delete, or click Cancel to return to the previous screen. By clicking on Duplicate, the selected trigger will be duplicated and will appear just after the selected one in your dropdown list
BE CAREFUL
You can’t delete a trigger that is already used in a live campaign or is live in a QA campaign. You need to pause the campaign(s) that use(s) the trigger to be able to delete the trigger from your account.
In this section, you will learn how the AB Tasty tag interacts with your website to apply the Display Frequency defined for a campaign.
When a page loads, the AB Tasty Tag verifies the targeting conditions that you configured inside this targeting step. The 'When' section adds new timing conditions on top of what you previously configured (URL of the page, specific page elements, triggers, and segments). The Frequency condition is set on the unique visitor level (cookie). They will be affected to the campaign only if they meet ALL the targeting conditions.
By default, the visitor will be affected "anytime" if they meet the other conditions (segments/pages/triggers aka who/where/how).
To determine at which Frequency the visitor will be targeted, follow the steps below:
Open the When will the campaign be displayed section and select one of the following Frequency options: &#xNAN;- Anytime (default option): for the visitor to be targeted each time they land on the page and respect other targeting conditions. &#xNAN;- Once: for the visitor to be targeted only once if they land on the page and respect the other targeting conditions. &#xNAN;- Once per session: for the visitor to be targeted only once per session if they land on the page and respect the other targeting conditions. &#xNAN;- At regular intervals: for the visitor to be targeted at specific regular interval. Intervals should then be configured (see below)
Click Save step.
ATTENTION
The Targeting Frequency option is a targeting condition allowing you to add a temporal condition of targeting upon unique visitors. The frequency is based on the ABTasty cookie value. Learn more about it in our . In this sense : - It differs from the widgets recurrence setup as it is not a display condition but a targeting acceptance condition affecting individually unique visitors. - It also differs from the Scheduler as the Frequency options are only a targeting condition not affecting the campaign status (live/pause), the latter impacting all visitors without discrimination.
This option allows you to target your visitors on a specified timeframe. It's really useful to be able to promptly send specific messages to your visitors, and have confidence around the visibility of this message.
To configure the regular intervals of the campaign's targeting, follow the steps below:
Open the When will the campaign be displayed block and select the At regular intervals option in the "The targeted segment will see the test" list.
Determine the regular intervals of the campaign's targeting using the Day, Week, or Session option, combined with the numerical selector.
Click Save step.
Please note that the At regular intervals option is to affect your visitors to the campaign not once but during the entire day or week or session!
Other example, if you want to display a message targeting all your URLs (or a wide ‘contains’) and having as frequency option ‘every 2 sessions’, the message will not only appear once on one page during the ongoing session as you may expect. Instead, the user will be affected on every targeted page ('Where' section) during the ongoing session.
The same goes for 'every x days' and 'every x weeks' conditions. If you want to display the modifications made only one time per session, please use the frequency options 'Once per session'. Meaning that if I choose each 3 days, I will see the campaign on the day 1 whatever the session or the number of time I see the campaign during the day, same on the day 4, then on the day 7 etc…
You can find more details on this targeting condition's QA .
The Replicate Targeting option enables you to copy the targeting configuration of a sub-test (for a Multivariate Test), a page (for a Multipage Test or a Multipage Personalization), or an experience (for a Multi-experience Personalization) and to paste it into another sub-test(s) or scenario(s).
This option is available in the targeting step and can be useful for Personalizations with multiple scenarios, or Multipage Tests and Multivariate Tests with multiple sub-tests.
It saves you from having to configure targeting independently for each scenario and each sub-test and saves you time.
To use the Replicate Targeting option, you must first configure targeting for at least one sub-test/page/experience. It can be any sub-test/page/experience.
For more information about how to use the replicate targeting option please refer to .
In some instances, you might want to launch a test after a user completes a certain action on your site, for example, after they have clicked a certain button, or after they have spent a certain length of time on a given page. You can condition a test in this way using the JavaScript function ABTastyStartTest. This function takes a single, unique parameter: the ID of the test you would like to launch. It must be called after the AB Tasty tag. The function takes the following form:
Where testID is the ID of the campaign to be launched.
This function must be called as soon as each visitor has completed the action on which the test is performed. Note: the tested page must be the page on which the action takes place (you cannot test modifications on another page). To create a test conditioned on an event, you must:
Create a standard campaign, applying your desired modifications
Click on "More options". Target by Event option appears.
Toggle on “Target by Event”. Note that other targeting options will no longer be available
Set up the rest of your campaign as usual
Launch your campaign
Call the function ABTastyStartTest directly from your application whenever the event occurs.
For example, if you would like test 12345 (set up in advance) to be triggered by a click on a button, you can do this in the following way:
You can use any other method which links this function to an event. For example, you could use jQuery, or a callback function might be used if your site uses AJAX.
ATTENTION
When you use this function the tag does not check the targeting, including the QA parameters. Take extra care when pushing a campaign that is using an event-based targeting into production.
With the idea in mind to constantly improve the user experience, AB Tasty now offers an option that will help you set up your campaign more efficiently. You can now choose a specific element within the WYSIWYG/contextual editor, and directly use it in the targeting step of the campaign setup.
&#xNAN;⚙️ Configuration
Using the WYSIWYG/Visual Editor
AB Tasty's WYSIWYG/Visual editor enables you to design and create your own user experiences using AB Tasty widgets, your custom widgets, or the WYSIWYG interface and its contextual menus.
As you are in the Editor step, you can use the contextual menu of the editor to directly set a page element as a “where” condition, avoiding back-and-forth between both campaign steps.
To do so, in the Editor step, select the page element to be set as the “where” condition and click the Add to targeting option to send your element’s URL and CSS selector to the Where section of the Targeting step. \
As soon as you click the Add to targeting option, the element configuration will automatically be sent and saved in the Targeting step as a CSS selector condition.
A window will appear, allowing you to do one of the following:
Continue editing your variation(s). You will then still be able to review your targeting configuration later on, in the Targeting step.
Go to the Targeting step page and start reviewing it.
⚙️To the Targeting Step
As you are in the Targeting step, you will be able to retrieve the information you have sent and saved from the editor through the Add to targeting option. The Where section is unfolded to let you review these two newly added configuration elements (URL and CSS selector).
Two elements are configured:
The URL: you should retrieve the URL that was previously declared in the Main Information step (and that you worked with in the editor). If you want to change it, then you will need to enter another URL in the dedicated field and save the Targeting step by clicking Save step.
The CSS selector of the element that has been selected in the editor.
In case you need support, follow the instructions given in the articles below:

AA Tests: only one scenario and a 100% allocation traffic, no specific rule
CSS selector option
Code option
target by event option checkbox
Excludes all URLs containing the string. Parameters following the string will also be taken into account.
Example: /product/
is not regular expression
Excludes all URLs matching the regex. You don’t need to escape special characters of your regular expression.
Example: https://www.example.com
/products/(.*)--([0-9]{5})
All the exclusion rules
At least one of the inclusion rules
Operator
Functional: accepts...
is
Includes all URLs matching the string, even if they include parameters.
⚠️ With this operator, the page is targeted no matter which parameters are included in the URL. Therefore, you cannot write any particular parameter in this field.
Example: https://mydomain.com/cart
is exactly
Includes the unique URL matching the exact string. Parameters that are not mentioned in the string are not taken into account.
💡 This field accepts parameters as an option.
Example: https://mydomain.com/cart?news
contains
Includes all URLs containing the string. Parameters following the string will also be taken into account.
Example: /product/
is regular expression
Includes all URLs matching the regex. You don’t need to escape special characters of your regular expression.
Example: https://www.example.com
/products/(.*)--([0-9]{5})
is not
Excludes all URLs matching the string, even if they include parameters.
⚠️ This field doesn’t accept parameters.
Example: https://mydomain.com/cart
is not exactly
Excludes the URL matching the exact string.
💡 This field accepts parameters as an option.
Example: https://mydomain.com/cart



















does not contain
ABTastyStartTest(testID); // <button onclick='ABTastyStartTest(12345)'>Launch a test from this button</button>
To load a website page in the editor and begin your work (to create a variation or a customized message), the generic AB Tasty tag must be present on your page.
If you can’t install the AB Tasty tag but you absolutely need to load your website in the editor, we provide a Chrome extension.
To learn how to install the AB Tasty tag, please refer to this article.
The URL you’ve filled in on the (or the page used with the , or the HTML you’ve pasted on the Main Information page) should be fully loaded in the Visual Editor.
The AB Tasty visual editor is compatible with most of the market frameworks (e.g. ReactJS, Angular, VueJS, etc.).
When you create a campaign, typically you will use the Create button on the campaign dashboard, choose your campaign type, and land on the Main Information page where you’ll have to fill in a Sample URL.
This URL will be loaded by default and represents a sample of the page(s) you want to modify (e.g. one specific product pages that is representative to all your product pages), or can be the only one (e.g. the homepage). During the Targeting step, you’ll declare the exact pages you want your experience to be displayed on.
Sometimes the page does not fully load in the editor. If this happens, you can try to reload the editor by refreshing the page, or use our .
The editor embeds the website HTML in an iframe, so what loads at the moment you open the editor is the code currently published on the website.
Each time you click on one element of the website, the contextual editor will be triggered:
The clickable links are deactivated to let you interact properly and change your content with our tool. If you want to activate an element which is only visible after a click, you’ll need the .
This option can be useful for logged pages (e.g. those with dynamic content, such as full basket page or account pages with personal information), or in the case of bad loading.
For more information, please refer to our .
This option can be useful for logged pages, such as those with dynamic content, such as full basket page or account pages with personal information, or in case of bad loading.
By default, when you load a page that requires an authentication (e.g. a client account), or a conversion funnel page, the page displayed in the editor will be empty or will show an error because it often requires session information (e.g. products to be displayed in the cart page).
To work around this issue, you need to inject the source code of the page within the Main Information step of the creation flow.
There are two ways to do this:
Using the Load Editor with embedded source code option manually (as shown)
Using the Apply HTML option within the AB Tasty Chrome extension (see this
The first method with source code consists of pasting the page’s source code directly into AB Tasty. To do this:
Go to the URL that you want to load in the editor
Right click on the page, and select Inspect
In the Elements tab of the console, go to the first line of code: the <html> tag
Right click on it, then select Copy → outerHTML. You will get the entire source code of the page with all the scripts and information needed
The page will load in the editor and you can apply your desired changes.
❗️Caution: The URL field needs to remain filled with your URL - this is mandatory in order to save and go to the next step
The navigation mode can temporarily enable you to interact with the website in order to trigger certain elements that wouldn’t be otherwise visible.
To do so :
Click the pencil button to Stop editing
Navigate on your website
Click the same button to Start editing Your content is now accessible and fixed to let you work on it thanks to the contextual editor.
If you want to visualize the mobile version of your website, use the Responsive mode at the top of the navigation bar. Each time you choose a different device, the content will adapt to the new resolution.
You can also change the orientation of the device by clicking on the portrait/landscape option at the right.
Working on the mobile view in the editor doesn’t mean that your campaign will only be delivered on mobile devices. To set up such a configuration, you’ll have to choose a segment of mobile users in the or select a trigger using the device option.
Some websites are not compatible with the version of the editor that enables the responsive mode. To let them use the editor in any case, we‘ve created an iframeless option. Please contact the support to activate it.
For tests only: A/B Tests, Multipage Tests, Multivariate Tests When you create a new A/B Test, AB Tasty generates one variation automatically.
In the editor, you can navigate between your original version and the new variation(s) on top of the screen. You can create a new variation by clicking on the tab New Variation + on the top left.
You can also use the menu of each variation and click on duplicate. This way the new variation will embed all the changes you’ve made on the model variation.
You can also use this menu bar to rename your variation. This is important if you want to create several variations, as their name will appear in the reporting and it will be easier to read the results and understand the impact of your changes.
For example, Variation 1 can be renamed “CTA in Blue” and Variation 2 can be renamed “CTA in Green”.
For Multipage campaigns only: Multipage Test and Multipage Personalization
These types of campaigns are displayed on several pages or sets of pages to propose a complete new experience to the user. For example, a color change in the middle of the homepage, on all product pages for the CTA and also on top of the basket page.
You have the option to declare the number of needed pages in the , but you can also add pages in the editor by clicking on the dropdown on the top left of the navigation banner:
For Multiexperience Personalization only
It is not possible to add experiences directly from the editor. If you need to add an experience, please go back to the .
For Multivariate Tests only
These types of campaigns consist of creating several simple A/B Tests in the same campaign and distributing the variations randomly to discover the best combination of changes.
You can have one sub-A/B Test with one variation to test the wording of the CTA, and a second sub-A/B Test with two variations to test the color of the CTA. Using the dropdown menu, select subtest 2 to add a new variation. In subtest 1, you’ll keep only one variation.
When you click on the Variation/Experience menu, you’ll find the following actions and information:
Rename: Give a less generic name to your variation/experience
Duplicate: Save time if your next variation/experience will embed a tiny change from your first variation/experience
Remove: Only usable only when the conditions are met (at least one variation per Test, at least two experiences per Personalization)
Redirect: Transform your experience into a or a Split Personalization (see next paragraph for more details)
Preview: Open your website page to see a preview of the modifications you’ve made. &#xNAN;⚠️ Caution: previewing does not mean QAing. To learn about QA, please read our QA guide
A Redirect Test/Personalization (or Split Test/Personalization) enables you to test or personalize a new page created and hosted outside of AB Tasty. Please refer to the about redirect option.
The WYSIWYG/Contextual Editor (What You See Is What You Get) enables you to play with your webpage and make changes on the fly by clicking on the different elements.
The contextual editor enables you to virtually write new lines of code, especially CSS (to modify UI parameters such as the margins, colors, etc.) without any coding knowledge, just by clicking on elements and selecting the modification you want to apply from a list.
This is an example of the contextual editor that opens when you click on an element:
The element appears as a title of the block (in this example, “<h1>”), so every change you make here will affect the button you selected.
To follow-up all your changes on elements (edition, deletion, adding etc.), click on Active Changes in the right-hand panel to retrieve all your modifications and access your history.
Once the URL is loaded in the visual editor, you'll have to select the blocks you want to edit. Most of the time, you'll have to
Sometimes the structure of the page’s HTML is complex and blocks overlap and are tied to others. Every change made with the contextual editor will replace the native CSS/HTML, meaning that at this point, you need to select the right HTML tag to be able to influence its CSS parameters.
To go back up in the HTML code, use “Select a Parent Element”.
To go back down, use “Select a Child Element”.
In the opened list, you’ll find the elements AB Tasty has detected by their class or ID (CSS parameters we can identify directly from the code).
Once you’ve selected an element on your page (e.g. in a product list page, the CTA “see article above the picture of an item of the list”), click on Select Same Class Elements to multi-select all the CTAs of the page. This way, the change you make (e.g. change the wording and replace “Read More” with “Discover”) will be applied on every single CTA on the page. You’ll save some time and be 100% sure that your change will be visible every time.
Once you've selected the right element to edit, you can use the contextual menu and its different options to edit original content and/ or create new content.
The page structure sidebar allows you to select HTML elements based on the page hierarchy. You can expand the HTML body to get the list of all elements. You can click on any element in the page structure to display the context menu for that element.
You can also search for specific elements using the search bar. The result is grouped by type of element.
For more information about how to create and edit content in the visual editor, please refer to this .
Once your modifications are done, it is important to add trackers in order to track how visitors respond to the changes you make on your website.
For example, if you change the color of a button, you’ll need to track the clicks on it.
To learn how to create trackers in the editor, please refer to this specific .
Adding campaign JavaScript is an alternative to create trackers that will be triggered on both original and variations of your campaing. It's useful if your trackers are more complex to set-up.
You can add campaign JavaScript by clicking on the right menu panel:
If your campaign is an AB Test, a Simple Personalization or a Patch, the option is called Campaign JavaScript
If your campaign is an Multipages Test, a Multipages Personalization, a Multiexperiences Personalization or a Multipages Patch, the option is called Sub-test JavaScript
In both cases, this code will be executed on all the variations of your campaign: the original one + all the variations. That's why the Campaign/ Sub-test javascript is mostly used to code trackers.
You can tick the option "Wait for DOM Ready to execute JavaScript". For more information about the way Javascript can be executed, please refer to the following .
Widgets are useful to add pre-coded elements and save your team time and expertise.
To discover our full widget library, learn how to use them, and customize them, please read the specific article bout . To add a widget in the editor, click on the right-hand bar and select Widgets. A library will open - click on the widget you want, then click on Add Widget. \
Custom widgets are similar to widgets in that they are pre-coded elements you can build and manage through the custom widgets Library. To discover how to build your own custom widgets and build your own library, please refer to this specific . To add a custom widget in the editor, click on the right-hand bar and select "widgets". Then go to the "custom widgets" section. A library will open - click on the custom widget you want or create a new one then click on Add custom widget.
By default, every single change is automatically saved. To let you control your changes, in the right-hand sidebar, you will find the “Undo” and “Redo” options.
When you click on Active Changes, a new panel is displayed.
This panel lists all the changes that the current variation contains. It does not contain the Trackers that are listed in the "Trackers" panel and whose scope is “trans-variations” (those apply to the whole campaign).
Types & subtypes
Who & when
Edit, change selector, rename, duplicate, hide/display or delete - list can change depending the type of modification
Batch actions (hide, unhide, delete, create a variation from selection)
In order to be clear and consistent, the latest edited change will always be displayed at the top. All changes are listed in anti-chronological order in the panel.
Every time you edit, rename, duplicate or change the selector of a change, the order is updated and the last edited change is placed at the top. It does not reorder when you hide/display a change.
By default, when a variation contains no change, a default message is displayed to invite users to add changes, whether they are modifications, widgets, JavaScript or CSS code.
Changes prior to the release of this feature don't have last edit date and user information. Instead we display: “No additional Information.”
In order to better understand each change, even after having renamed every single one of them, it is important to keep track of the nature of a change.
For each change, you will see an icon, reflecting the type of each respective change:
M for Modifications
W for Widgets
JS for JavaScript
CSS for CSS
In some types, you can also have subtypes.
Modifications can be of the following subtypes: Add HTML, Add Image, Add Link, Add Paragraph, Copy & Paste (after), Copy & Paste (before), Copy & Paste (at the end), Cut & Paste (after), Cut & Paste (before), Cut & Paste (at the end), Edit Element Attributes, Edit HTML, Edit Link, Edit on the Fly, Edit Style, Edit Text, Hide Content of the Element, Hide Element, Hide Same Class Elements, Reorder Elements, Replace Background Image, Replace Image, Replace Responsive Image
Widgets have as many subtypes as there are widgets
There can be two types of JavaScript: Variation JavaScript or Element JavaScript. We have a dedicated article that lists .
When you hover over the icon, you will always see the type and subtype of this change. This comes in handy when you rename a change and the new name no longer contains the notion of type or subtype.
As changes are listed in anti-chronological order, we also display the date and time of the latest edition. We do not display the year but the year is taken into account when ordering the changes.
When hovering over the user icon, the email address of the user is displayed in a tooltip. This way, you can always know who the last person was to make a change.
Depending on its type or subtype, each change allows for different actions.
“Edit” is the capacity to reopen the dedicated change modal so you can edit this change's parameters again.
For example, a modification such as “Add Text” can be edited again. The text you added can be edited (changed) by adding, removing words. On the other hand, a modification such as “Reorder Elements” cannot be edited. You will have to delete it and redo it if you want to edit it.
“Change selector” is the capacity to modify the “scope” of the modification.
You can define if, for example, an “Edit Style” (such as padding increase or a decreased line-height) will be affected to a single <div>, to the whole <body> element, or any parent/child element in between.
“Rename” lets users give a more detailed name to a change than the default name. It is very convenient if you have several changes of the same kind without any specific way to differentiate them.
The default name of a change is based on the subtype of the modification, the widget name, the type of JavaScript change (Variation JavaScript or Element JavaScript) or just “CSS”. If the new name is longer than 35 characters, it will be accepted but truncated with an ellipsis when displayed. Names longer than 300 characters will be rejected by the platform.
“Duplicate” only works for widgets. Essentially, it duplicates a whole configured widget in the variation. By default, the duplicated widget has the same name and is appended with (duplicated) at the end.
“Delete” is available for all types and subtypes of changes. When deleting a change, a confirmation prompt pops up in the Active Changes panel and awaits for a confirmation or a cancellation.
“Hide/Display” only applies to the editor level. If a user hides or displays a change, it has no impact on production; it is only here to help you see an element hidden below another one or the space it may take when displayed.
You can select one or more changes to hide/display or delete. Select the changes you want to make by checking the checkboxes when you hover over each change and hide/display them or delete them by clicking on the respective buttons.
If one or more changes cannot be deleted, they will be bordered in red for 3 seconds, and a notification will display informing you about the number of changes that were not deleted. If this happens, it can be related to a momentarily unavailable API route, as we invite you to try again later.
If you have created a modification on a selector that no longer exists, or is no longer present on the page displayed in the editor, we display a hovering warning message to inform you that your changes probably won’t work in production.
You have the capacity to create a new variation from a selection of changes.
Select the changes you would like to see in the duplicated variation and click on the “Create Variation from Selection” button on the bottom bar.
The variation is created. The changes are injected in the variation, and you are redirected to the variation.
This feature is not available for campaigns with dynamic allocation that have been put in “play” mode at least once, nor is it available for personalization campaigns.
You can now choose a specific element within the WYSIWYG/contextual editor, and directly use it in the targeting step of the campaign setup. This way, your campaign will be triggered only if the element exists on the page. It can be useful for page targeting if you URLs don't follow a specific and recognizable pattern. To learn more about this option in the targeting, please refer to the following .
To use this option, select the page element to be set as the “where” condition and click the Add to targeting option to send your element’s URL and CSS selector to the Where section of the Targeting step.
As soon as you click the Add to targeting option, the element configuration will automatically be sent and saved in the Targeting step.
A window will appear, allowing you to do one of the following:
Continue editing your variation(s). You will then still be able to review your targeting configuration later on, in the Targeting step.
Go to the Targeting step page and start reviewing it.
As you are in the Targeting step, you will be able to retrieve the information you have sent and saved from the editor through the Add to targeting option. The Where section is unfolded to let you review these two newly added configuration elements (URL and CSS selector).
By clicking on the "Switch to Code Editor" button in the top bar, you’ll open a new tab and land in the Code Editor. To learn more about how to use the Code Editor, please refer to the .
Refer to this to learn more about the different tag statuses.
If your campaign is already live (without QA mode active):
Clicking on “Refresh Tag” will republish your changes (without any verification beforehand), so use it with caution, only when you discover that a campaign is buggy (e.g. a spelling error in a pop-in, etc.)
If your campaign is live “in QA”
Clicking on “Refresh Tag” will republish your changes, but as your campaign is on QA, it’s completely safe and you can fine tune your campaign in real time.
If you campaign is paused
Clicking on “Refresh Tag” won’t have any consequences for the current campaign. But refreshing the tag will impact all the other live campaigns, so be cautious with this option.
In case you need support, follow the instructions given in the articles below:
💡 💡
Paste this code into the dedicated window within the Main Information step
Click Save
Create a variation from selection
“No additional information”
CSS does not have subtypes: it is only CSS and its scope is at the variation level.
x
x
Variation JavaScript
x
x
x
Widget - $WidgetName
x
x
x
x
Add HTML
x
x
x
x
Add Image
x
x
x
x
Add Link
x
x
x
x
Add Text
x
x
x
x
Copy & Paste (after)
x
x
Copy & Paste (before)
x
x
Copy & Paste (at the end)
x
x
Cut & Paste (after)
x
x
Cut & Paste (before)
x
x
Cut & Paste (at the end)
x
x
Edit Element Attributes
x
x
x
x
Edit HTML
x
x
x
x
Edit Link
x
x
x
x
Edit on the Fly
x
x
x
x
Edit Style
x
x
x
x
Edit Text
x
x
x
x
Hide Content of the Element
x
x
x
Hide Element
x
x
x
Hide Same Class Elements
x
x
x
Reorder Elements
x
x
Replace Background Image
x
x
x
x
Replace Image
x
x
x
x
Replace Responsive Image
x
x
x
x
CSS
x
x
x
Element JavaScript
x
x




























