Discovering the Visual Editor
PreviousHow to use our Visual Editor - Interactive demoNextVisual editor - History and review of modifications
Last updated
Was this helpful?
Last updated
Was this helpful?
❗️Important: 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 .
To learn how to install the AB Tasty tag, please refer to this .
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:
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.
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)
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 Save
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.
💡 Good to know: You can also use the shortcut CTROL M to activate/ deactivate the option, which can be useful if you want to use the modification menu on an element which appears only on hover (e.g. a navigation menu).
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.
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.
For Multiexperience Personalization only
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.
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)
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
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.
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 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.
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.
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.
Widgets are useful to add pre-coded elements and save your team time and expertise.
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).
Batch actions (hide, unhide, delete, create a variation from selection)
“No additional information”
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.”
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
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.
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.
Edit
Rename
Duplicate
Change selector
Delete
CSS
x
x
x
Element JavaScript
x
x
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
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.
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.
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.
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.
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).
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:
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 .
For more information, please refer to our .
Using the Apply HTML option within the AB Tasty Chrome extension (see this
! 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 or select a trigger using the device option.
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:
It is not possible to add experiences directly from the editor. If you need to add an experience, please go back to the .
When you click on the Variation/Experience menu, you’ll find the following actions and information:
Redirect: Transform your experience into a or a Split Personalization (see next paragraph for more details)
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
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.
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 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.
For more information about how to create and edit content in the visual editor, please refer to this .
To learn how to create trackers in the editor, please refer to this specific .
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 .
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.
Types & subtypes
Who & when
Edit, change selector, rename, duplicate, hide/display or delete - list can change depending the type of modification
Create a variation from selection
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.
There can be two types of JavaScript: Variation JavaScript or Element JavaScript. We have a dedicated article that lists .
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 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 .
Good to know 💡
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.
💡 💡
