Visual editor - Discovery
Was this helpful?
Was this helpful?
This comprehensive article will guide you through the features and functionalities of our intuitive editor, helping you create and customize campaign with ease. If you prefer an hands-on experience, feel free to try
The Visual Editor enables you to create or edit content to display throughout your campaign.
You can create:
Your variation(s) if you run an A/B Test, with one or more variations
Your page variation(s) if you run a Multipage Test, with one or more variations
Your combinations of modifications to automatically generate variations if you run a Multivariate Test
Your customized message if you run a Personalization campaign
Your patch(es)
All your trackers to measure your campaign performance
❗️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
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.).
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.
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.
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.
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 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
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.
You can also change the orientation of the device by clicking on the portrait/landscape option at the right.
! 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).
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.
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 .
For more information, please refer to our .
Using the Apply HTML option within the AB Tasty Chrome extension (see this
The navigation mode can temporarily enable you to interact with the website in order to trigger certain elements that wouldn’t be otherwise visible.
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.