Skip to main content

Insert Operation in the Visual Editor

· 3 min read

We’ve added a new Insert operation to the Visual Editor, giving you an easy way to inject custom HTML directly relative to elements on the page.

With this feature, you can insert HTML before, after, inside the beginning, or inside the end of any selected element — all without writing custom DOM-handling logic.

Even better, the underlying script automatically handles adding and removing the inserted HTML as the target element appears or disappears in the page.

What the Insert Operation Does​

The Insert operation allows you to place custom HTML relative to a selected element using four placement options:

  • Before – insert HTML immediately before the selected element
  • After – insert HTML immediately after the selected element
  • Inside First – insert HTML as the first child of the selected element
  • Inside Last – insert HTML as the last child of the selected element

This makes it simple to add banners, notices, buttons, messages, or additional UI elements exactly where you want them.

Automatic DOM Handling​

Modern websites often load or replace content dynamically. To ensure inserted content behaves correctly, the Visual Editor script automatically:

  • Adds the HTML when the selected element appears in the DOM
  • Removes the HTML if the selected element is removed
  • Re-applies the HTML if the element is re-rendered

This means the inserted content stays correctly attached even when frameworks like React, Vue, or other dynamic rendering systems update the page.

You don’t need to write MutationObservers or custom JavaScript logic — it’s handled automatically.

Example Use Cases​

Add a Promotional Banner​

Insert a promotional banner before a product description.

<div class="promo-banner">Limited-time offer: Free shipping today!</div>

Placement: Before the product description element.

Add a Call-to-Action Button​

Insert a CTA after a pricing table.

<button class="cta-button">Start Your Free Trial</button>

Placement: After the pricing section.

Add a Badge to a Product Card​

Insert a badge inside first to highlight featured items.

<span class="badge badge-featured"> Featured </span>

Placement: Inside First of the product card element.

Append Additional Content​

Insert supplementary information inside last within a container.

<div class="extra-info">Includes lifetime updates.</div>

Placement: Inside Last of the selected container.

Why This Is Useful​

The Insert operation makes it easier to:

  • Extend page content without modifying source code
  • Add experiment variations quickly
  • Introduce UI elements for testing or personalization
  • Work safely with dynamic web applications

Because the Visual Editor manages the lifecycle of the inserted HTML automatically, you can focus on designing the experience rather than managing DOM behavior.

Try It in the Visual Editor​

Open the Visual Editor, select any element on the page, and choose the Insert operation to start adding custom HTML exactly where you need it.

We’re excited to see how you use it to build richer experiments and experiences.