Optimize for non-Webflow sites

Tag elements with unique IDs

Updated

Subtitle

The visual editor uses selectors to target page elements that your variations modify or interact with. If the base page changes, however, the selector values may also change. If this happens, you can re-associate a variation with its element by setting the new selector value in visual editor. To avoid the issue entirely, you can tag elements in the page's code with an Optimize ID — same idea as ID tagging, but Optimize prioritizes these custom IDs.

Optimize ID tag

In the page code, you'd tag a given element with an Optimize ID:

data-intellimize-id="customer-input-id"
  • data-intellimize-id= is the attribute that visual editor checks for
  • customer-input-id is the unique value you'd create per element (e.g., image-01)

Example:

For <h2>Header Text</h2>, you could add the Optimize ID with a value of hero-header-1:

<h2 data-intellimize-id="hero-header-1">Header Text<h2/>

Visual editor

In the visual editor, you'd select an element like usual (to modify or change selector values). If that element is already tagged with an Optimize ID, the visual editor leverages that ID value for the selector instead of a default selector value generated for that element.

Benefit — variations that target elements with Optimize ID selectors are safe from future page code changes that alter existing selector values.

Related articles