Visual editor - Discovery

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 our interactive demo.

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

 

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

 

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. 

For more information, please refer to our Reference article about the AB Tasty Chrome extension. 

 

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:

  1. Go to the URL that you want to load in the editor
  2. Right-click on the page, and select Inspect
  3. In the Elements tab of the console, go to the first line of code: the <html> tag
  4. 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
  5. Paste this code into the dedicated window within the Main Information step
  6. 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 

 

gif_best_option.gif


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 : 

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

 

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. 

 

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

Was this article helpful?

/