How To Use The Builder

Understand the builder to benefit from all of its features.

TABLE OF CONTENTS

• Anatomy of the builder
  • Title Bar
  • Canvas
  • Integrations
  • Sidebar
• Sidebar Modes
  • Edit Mode
    • Instructions Accordion
  • Code Mode
  • AI Reports
• Video: How To Use The Builder

Anatomy of the builder

Title Bar

The Title Bar contains actions actions that facilitate certain aspects of the variant.

1. Variant Name - found on the top left allows you to modify and edit the name of the variant to identify it with a more specific name rather than its generic "variant-1" or "variant-2" name.
2. Load template - Allows you to quickly import the contents of another variant or the base template in order to accelerate A/B testing.
3. Desktop/Mobile Icon - Allows you to test responsiveness while building
4. Preview Icon - Allows you to see how the variant would behave in a new browser tab to see it is fully functional and as expected.

Canvas

Allows for working to update your variant by selecting areas to interact with of your landing page to modify and execute changes in the Sidebar.

Integrations

Enables various modes for interacting with the canvas. The integrations appear as buttons that switch the visibility and available actions in the Sidebar.

Sidebar

The sidebar's content changes depending on the active integration. This affects how you interact with the Canvas.

Sidebar Modes

Edit Mode

Instructions Accordion

• Processing Mode
  • Visual Assistant - Ideal for visual changes that do not require programmatic logic.
    
    ✅️ Good for:
    - "Change the color ..."
    - "Add xx words"
    - "Add 3 more product benefits, 1 ... 2... 3..."
    - "Add another button that links to ...."
    - "Translate to ..."
    - "Make it sound more formal"
    
    ❌️  Not good for:
    - "When clicking on this button show a popup that has a form and when the form is submitted ...."
    - "Add a popup after 30 seconds with a promotional offer ..."
    - "Add a slider with 3 images ..."
    - "Add a Hubspot form with this snippet ...."
    
    
  • Code Assistant - Ideal for programmatic logic (the opposite of the visual assistant)
    
    ✅️ Good for:
    - "When clicking on this button show a popup that has a form and when the form is submitted ...."
    - "Add a popup after 30 seconds with a promotional offer ..."
    - "Add a slider with 3 images ..."
    - "Add a Hubspot form with this snippet ...."
    
    ❌️ Not good for:
    - "Change the color ..."
    - "Add xx words"
    - "Add 3 more product benefits, 1 ... 2... 3..."
    - "Add another button that links to ...."
    - "Translate to ..."
    - "Make it sound more formal"
• Context vs No Context:
  • Context Calls - When you click on an element in the Canvas it will be selected. By selecting the part you want to change you will see it in the Sidebar the selection in the "Selected Elements". When you send Instructions it will act only upon the Selected Element.
    
    ✅️ Good for:
    - "Make this section sound more formal"
    - "Add a new section above this one with 3 product cards that have a title, price and view button"
    - "Add xx words to this section.. etc"
    
    ❌️ Not good for:
    - "Translate to xxx" - the AI would not see the whole page and would only translate the selected section
    - "Add a banner at the top" - the AI would not see "the top" as it would only do it within the selected element
    - "Modify all sections to have more padding" - the AI would only add padding to the selected section
    
    
  • No Context Calls - When you have not selected any elements it the instructions will reference the entirety of the page. These are limited in the quota, take longer to process
    
    ✅️ Good for:
    - "Translate to xxx"
    - "Add a banner at the top"
    - "Add a new section above the testimonials section that ...."
    - "Modify all sections to have more padding"
    - "Move the Benefits section before the testimonials section✅️
    
    ❌️ Not good for:
    - "Make this section sound more formal"
    - "Add xx words to this section.. etc"

Code Mode

This is perfect for programmers or marketers who have a basic understanding of programming. It allows you to identify any unintended modifications or to achieve flexibility with specific changes that might be implemented more quickly through code.

AI Reports

AI Reports appears for maestro level plans to help manage variants quicker. It only appears if suggestions are available and every X weeks based on the configuration of your campaign.

Video: How To Use The Builder

[ TODO Video ]