Guide : Visual Editor

❗️Important: To load a website page in the editor and begin your work (to create a variation or a customized message), the 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.

1. Discovering the Visual Editor interface

The URL you’ve filled in on the Main Information page (or the page used with the Chrome extension, or the HTML you’ve pasted on the Main Information page) should be fully loaded in the Visual Editor. 

The AB Tasty editor is compatible with most of the market frameworks (e.g. ReactJS, Angular, VueJS, etc.).

For more information about compatibility, please reach out to us directly or visit the following section

Properly loading your page

👉  URL loaded by default

When you create a campaign, typically you will use the Create button on the 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, 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 try to access it with the Chrome extension. 

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 Navigation mode. 

👉  Chrome extension 

This option can be useful for logged pages (e.g. those with dynamic content, such as full basket pages or account pages with personal information), or in the case of bad loading. 

AB Tasty has developed a Chrome extension that enables you to carry out simple tasks on existing personalisations  and tests, or to create new tests directly from your website pages without having to launch the AB Tasty web platform.

Download the AB Tasty add-on

1. The AB Tasty add-on is available in the Chrome web store at the following address: https://chrome.google.com/webstore/detail/ab-tasty/bdiahcebghgckgbgmjhdbecjkedpcidn
   
   
2. Click Add to Chrome
   
   
3. Download the add-on and confirm installation.
   
   Once installation is complete, the add-on icon is displayed in the top right-hand corner of your browser.
   
   

Optimizing the editor function

On some websites, JavaScript events and behaviors can be rewritten, which may prevent the AB Tasty Visual Editor from functioning as designed.

To enable the editor to function regardless of the technology used by a website, activate the Reset JS behaviors option.

When the option is checked, a script is injected before the page is fully loaded in the editor, and subsequently on all the pages for which the visitor launches the editor. This script enables you to list the changes made to JavaScript events on the page and to cancel them when the editor launches.

Good to know 💡 No other information is collected or communicated by the add-on.

To activate this option, follow these steps:

1. Go to the desired web page
   
   
2. Click on the AB Tasty extension
   You do not need to be logged in to AB Tasty for Web to inject the script.
   
   
3. Select Reset JS behaviors
   The script will now be injected into each new page loaded into the editor.
   Hovering over the option displays an information message.
   
   
4. Carry out the usual operations detailed below

Good to know💡  If your website contains any native JS event modification, you may want to use this option to optimize the editor’s performance

Useful actions with the Chrome extension

The add-on enables you to carry out the following operations:

✅  Access your tests and personalizationsand run common tasks, such as launching the editor, previewing variations and accessing the report

✅  Check that the AB Tasty tag is present

✅  Inject the AB Tasty tag

✅  Check that the AB Tasty tag is up to date

✅  Update the AB Tasty tag

✅  Create A/B tests, multipage tests and personalizations

✅  Create a test on a page that requires you to be logged in

✅  Check if tests are in progress on the page

✅  Delete AB Tasty cookies from the page

✅  Access tests

To access all your tests and personalizations using the Chrome browser, follow these steps:

1. Click on the AB Tasty add-on
   
   
2. Log in to AB Tasty for Web, if necessary
   The list of previously created tests and personalizations is displayed, along with their status (started or paused)
   
   
   
   
3. Click on an existing test or personalization to view or modify it
   
   
4. Click on the three dots to see More Tools, which allows you to create new campaigns, or manage the AB Tasty tag and cookies, and tests applied to the current page
   
   

✅  Act on existing campaigns

You can carry out a certain number of tasks on the tests and personalizations shown in the list.

- Click a test or a personalization to display the following information:

• Campaign ID
  
  
• Type of campaign
  
  
• Page URL
  
  
• Creator and other tags applied to the campaign
  
  

- You can also carry out various operations on your tests and personalizations including:

✅  More tools menu :

When the list of existing personalizations and tests is displayed, you can click the More Tools button to carry out the following actions:

Icon	Name	Description
	Add test	Create an A/B or a multipage test
	Delete AB Tasty Cookies	Delete all cookies placed on a web page by AB Tasty
	Page information	Display tests in progress on a web page
	Update script	Update the AB Tasty tag
	Inject script	Inject AB Tasty tag onto the current page

✅  Check that the tag is present

You can find out if the AB Tasty tag is implemented on the current page. To do this, follow these steps:

1. Go to the desired web page
   
2. Click the AB Tasty Chrome add-on
   
   
3. Hover your mouse over the icon at the bottom of the list to display the tag status
   
   
4. If necessary, inject the tag onto the page
   
   

	Tag present
	Tag not present

✅  Inject the AB Tasty tag

If the AB Tasty tag has not been implemented on your website, you can still inject it temporarily onto the current page and make changes using the editor.

1. Click on the More Tools button, then Inject Script
   
   
   
   
2. Create your campaign
   
   The Visual Editor launches the page and enables you to make changes.

✅  Check that the AB Tasty tag is up to date

If the changes made using the editor don't appear on your website, it may be that the tag isn't up to date and doesn't include the most recent changes. 

To check when the tag was last updated, follow these steps:

1. Go to the desired web page
   
   
2. Click on the AB Tasty add-on for Chrome
   
   
3. Hover your mouse over the cloud icon at the bottom of the list to display the tag status
   
   
   
   
4. If necessary, update the tag

✅  Update the AB Tasty tag

The AB Tasty tag can be updated. If the changes made using the editor don't appear on your website, it may be necessary to update the tag in order to load the most recent changes. In this case, the update can be carried out via the add-on.

To update the tag via the add-on, follow these steps:

1. Go to the desired web page
   
   
2. Click on More Tools, then Update Script
   
   
   
   A confirmation message is displayed at the bottom of the list.
   
   

✅  Display page information

If the AB Tasty tag is implemented on your website, you can use the add-on to check if tests are in progress on the current page.

To do this:

1. Go to the desired web page
   
   
2. Click on More Tools, then Page Information
   
   
   
   The list of tests in progress is displayed.
   
   
3. If necessary, click a test to display or modify it

✅  Create tests 

Quickly create A/B Tests or Multipage Tests related to the current page.

To do this:

1. Go to the desired web page
   
   
2. Click on More Tools, then Add Test
   
   

   
   
   

   The URL of the current page is taken into account automatically.
   
   
3. In the Name field, assign a label to your test
   
   
4. Using the Type dropdown menu, choose from A/B and Multipage
   
   
5. The Select Account field enables you to choose the account you want to use.
   If you manage several accounts, enter the first letters to filter the list.
   
   
   
   
6. If necessary, select Save the Source Code
   
   
7. Click Create
   The Visual Editor opens.

✅  The "Save the Source Code" option

This option enables you to create a test on a web page that requires you to save user account login details or items in a cart, or that features dynamic content, such as an AJAX website.

When you check the Save the Source Code box, the HTML code of the page is saved and the editor launches on the page featuring its specific information. 

Using the Save the Source Code option when creating a test enables you to save the items in the cart.

✅  Delete cookies

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 which a visitor sees.

To do this, follow these steps:

1. Go to the desired web page
   
   
2. Click More Tools, then Delete AB Tasty Cookies
   
   
   
   

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.

👉  OuterHTML

This option can be useful for logged pages, such as those with dynamic content, such as full basket pages 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 article)

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

❗️Caution: The URL field needs to remain filled with your URL - this is mandatory in order to save and go to the next step

👉  Chrome extension 

Navigation mode

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 : 

• Activate the option in the navigation bar on the top right
  
  
  
  
• Then click or hover over the content you wanted to trigger
  
  
• Then deactivate the option
  
  

Your content is now accessible and fixed to let you work on it thanks to the contextual editor.  

Responsive mode

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 of the panel. 

! Caution: 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 targeting step (or create a trigger using the device option).

Iframeless mode

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.

2. Creating new variations and pages

New variations

(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 +.

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

New pages 

(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 Main Information page, but you can also add pages in the editor by clicking on the dropdown on the top left of the navigation banner: 

New experiences

(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 Main Information page. 

New subtests 

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

Other options in the Variation/Experience menu :

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
  
  

  📎 Note : Duplicate is not available in simple Personalization campaigns that support only one new message to be displayed throughout the campaign.

  
  
• 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 Split Test 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. Caution, previewing does not mean QAing. To learn about QA, please read our QA guide
  
  
• ID of your variation/experience: This can be useful if you want to explore the AB Tasty variables in the developer console and do an expert QA/debug session. To learn more, please refer to this article. 

Redirect option

A Redirect Test/Personalization (or Split Test/Personalization) enables you to test or personalize a new page created and hosted outside of AB Tasty. This page is used as the entire variation or personalization within a campaign.

Two URLs are involved:

• The source URL: This URL corresponds to the original version. This is the URL from which you want your visitors to be redirected.
  
  
• The destination URL: This URL is the new page being used as a variation/personalization. This is the page the visitors will be redirected to when they land on the source URL.
  
  

To declare your destination URL, select the Redirect option. You can then paste the URL of the page you want to redirect to in the pop-in.


Heads up ⚡️  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.

⭐️ Recommended selections :

- 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 admins). 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.

❗️Mandatory selection :

- Enable redirection: This 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.

See this useful SEO guide dedicated to redirect campaigns. 

Now that we’ve reviewed all of the master options to prepare the editor to fit your needs, let’s dive into the possibilities for modifying your content with AB Tasty.

3. Playing with WYSIWYG/Contextual Editor

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, “Button”), so every change you make here will affect the button you selected.

Selecting parent and/or children

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

Select Same Class Elements

Another useful option is “Select Same Class Elements”. 

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.

Edit

In the Edit section, you can edit the following:

• Style (all the CSS attributes)
  
  
• Text
  
  
• HTML 
  
  
• 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.

Edit Style

The configuration pop-in offers you the option to change the text, colors, border, layout, and position of your 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. 

⭐️ 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 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 https://web.dev/learn/css/.

Edit text

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.

Edit HTML

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. 

Heads up ⚡: 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.

Good to know💡 : Don’t forget to QA your campaign for several pages of your website on different devices and browsers (especially if your campaign should be displayed across devices), and in different environments (e.g. logged in/not logged in) to make sure you have covered all possible scenarios.

Edit Element Attributes

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 https://web.dev/learn/css/

While editing, click on Save Changes, then your modifications will be visible in the editor.

Add

The Add option will enable you to enrich your HTML by adding an element that didn’t exist on the original page. 

Add an image

You can add an image by uploading your file directly or by adding the URL of the pre-hosted source. We support .jpg, .png, .svg, .webp and .avif files. 

While editing, click on Save Changes, then your modifications will be visible in the editor.

Add a Text Element

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.

Add HTML

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.

Add a link

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, then your modifications will be visible in the editor.

Hide

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

Reorder elements

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.

While editing, click on Validate, then your modifications will be visible in the editor. Otherwise click Cancel to go back without saving.

Copy, Cut and Paste

To use this option, first you need to cut or copy an element to add it to your clipboard. 

You can then paste it where you want, but 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.

Add trackers

It is mandatory 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. 

Select the element you want to track and click on Add Tracker.

• Name your tracker (e.g. click on CTA “Buy Now”)
• 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 following 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. 

Adding Variation Code 

This option lets you customize the CSS and/or the JS you want to execute in your variation/page/experience.

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

Add to Targeting

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.

⚙️ Configuration

Using the WYSIWYG/Contextual Editor

AB Tasty's WYSIWYG/Contextual 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. 

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.

Good to know 💡

Depending on the type of campaign you are setting up (test or personalization campaign), the Editor step will come before or after the Targeting step. 
When configuring a personalization campaign, you start with the Targeting step to define precisely the audience you would like to target. In this case, if you configure the "Where"section first and then use the Add to targeting option in the editor, you will erase your previous configuration and replace it with the newly created one. A window will appear asking you to do so. If you accept, you will need to go back to the Targeting step to review the new configuration.

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. 

4. Widget Library

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 Widgets Guide. 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. 

5. Custom Widget Library

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 our full widget library, please read the custom widget Guide. 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. 

6. Active Changes and Undo/Redo

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

Change Types & Subtypes

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 the different ways to add JavaScript code in AB Tasty. 
  
  
• CSS does not have subtypes. It is only CSS and its scope is at the variation level.
  
  

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.

Who & When

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. 

Edit, Change Selector, Rename, Duplicate, Hide/Display or Delete

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.

Batch Actions: Hide/Display or Delete

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.

Error notification

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. The modification line is also displayed in yellow for better readability.

Create a variation from a selection

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

7. Campaign JavaScript : Adding some global code at a campaign level

By clicking on Campaign JavaScript in the right-hand sidebar, you will be able to add code (JS) at the campaign level, meaning that your code will be executed on every version/ variation of your campaign (including the original). 

For trackings that can’t be added directly via the Add Click Tracking option, it’s useful to code these trackings that need to be fired on the variations and on the original.

8. Switching to the Code Editor

By clicking on the last option in the right-hand sidebar, “Code Editor”, 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 Code Editor article.

9. Preview Mode

10. Refresh Tag Option

Refer to this article 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. 

11. Compatibility

The Visual Editor embeds the website HTML in an iframe. There are many reasons why your website can’t be loaded in the editor. 

In this section, we review all the known issues you could experience and the solutions to them. 

👉 You haven’t used the AB Tasty Chrome extension

If the editor doesn’t load, you should try using the AB Tasty Chrome extension. This extension allows your page to be fully loaded before applying the editor, solving a lot of the problems encountered with the editor loading. It is available in the Chrome web store and you can download it here.

👉 Third-party cookies are blocked in the browser

The AB Tasty tag doesn't require third-party cookies, but loading the editor does. If you are having issues loading it, it might be due to third-party cookies being blocked.

How to find out and what to do? 

Paste this address into your Chrome URL input - chrome://settings/content/cookies and make sure that your browser accepts cookies or, at least, that https://[*.]app2.abtasty.com:443 is allowed to accept cookies.

👉 The AB Tasty Tag is not present on the page

When setting up AB Tasty, you are required to set up the tag and, if needed, the transaction tag.

How to find out and what to do?

In order to check whether the tag is installed, open the browser console, go to the “Elements” tab and search for “try.abtasty.com”. You can also read this dedicated troubleshooting article on How to Check if AB Tasty's Tag is Installed on your Website.

You can also make sure that the "ABTasty" command returns an answer in the console.

If the tag is not present, add it by following this article's steps.

👉 Some Chrome extensions are blocking

A few extensions may prevent the editor from loading. Try to avoid using Ghostery, Insider, VPN/Proxy and Ad Blockers.

How to find out?

Paste this address into your Chrome URL input - chrome://extensions/ and make sure to disable or remove the Chrome extensions mentioned above.

👉 Try to apply source code of the page - outerHTML

Applying source code is the most effective way of loading funnel pages, cart pages with added products or personalized dashboards. It’s the best way of getting around bad editor loading that is due to authentication (e.g. a client account) or a page that requires session information (e.g. products to be displayed in the cart page).

There are two ways to apply the source code: 

• With the AB Tasty extension

• With the outerHTML
  
  Copy the source code of the web page you want using “Copy outerHTML” (from the <html> tag (the first line of the source code)) to load the editor on and paste it in the dedicated input.
  
  

• In the Main Information step in AB Tasty:
  
  

See more details on how to apply the source code in the dedicated section of this article.

👉 You have Content Security Policy (CSP) errors

If some of the errors you notice in the console are Content-Security-Policy errors (CSP errors) when trying to load the editor, the problem comes from the server configuration.

In short: the security setting is too high server-side. By default, many clients use a Content-Security-Policy blocking everything on their website. This means that every single external request has to be whitelisted in the server configuration.

How to find out?

If you see this kind of error, you are facing CSP errors.

What can be done?

Please ask your system administrators or developers to whitelist the following domains:

Content-Security-Policy=

default-src 'none'

frame-src 'self'

script-src 'self' 'unsafe-eval' blob: *.abtasty.com *.googleapis.com

connect-src 'self' *.abtasty.com

img-src 'self' blob: *.abtasty.com *.amazonaws.com

style-src 'self' unsafe-inline: *.abtasty.com *.gstatic.com *.googleapis.com

font-src 'self' blob: data: *.abtasty.com *.gstatic.com *.googleapis.com

• Default-src allows AB Tasty to keep strict security as “none” as the default for all other attributes but the ones we override.
  
  
• Frame-src allows AB Tasty to iframe your web app in our editor.
  
  
• Script-src allows AB Tasty to inject a <script> element in your web app once 'iframed' in our editor.
  
  
• Connect-src allows AB Tasty to connect with APIs via XMLHttpRequest or Websocket fetch. We need it to communicate with our Symfony REST API (via XMLHttpRequest)
  
  
• Img-src allows AB Tasty to call image URLs hosted on our domain or from AWS CDN.
  
  
• Style-src allows AB Tasty to inject some inline styling or a <style> element.
  
  
• font-src allows AB Tasty to inject fonts, whether they come from our domain or from the Google Fonts API.

As a temporary solution, you can use the “Disable Content-Security-Policy” Chrome extension. This extension should block the CSP errors and you should be able to load the editor again.

👉 You have console errors

How to find out?

In the console, if you notice an error related to “X-Frame Options”.

What can be done?

Ask your back-end developers to change the server configuration accordingly.

You can also temporarily use the “Ignore X-frame headers” extension to bypass this type of error.