HTML, CSS and JavaScript in a variant

The visual tools cover most variants, but a test is never blocked on what they can express. The editor's code editor lets you write HTML, CSS and JavaScript directly, in light or dark mode.

Editing and adding HTML

• Edit HTML (press E, or use the element menu) opens the selected element's HTML.
• Add HTML inserts new markup before the element, inside it first, inside it last or after it.

Both become ordinary changes in the Changes list, so they can be undone, saved and reverted. To add markup to every element a selector matches, use the selector tool. See Applying a change to every matching element.

HTML with more than one top-level element, for example <p>a</p><p>b</p>, keeps only the first element, so wrap it in one element.

Global CSS and JavaScript

Each variant has its own global CSS and JavaScript. Open them from the code icon in the floating toolbar, or from the top of the Changes list, where they show as, for example, Global CSS · 2 lines · saved with the variant. Both count towards the variant's total changes, and both can be cleared completely.

Page data in code

• In HTML, Insert page data adds a token such as {{product.price}}. Tokens work in text and in attributes, for example <a href="/buy/{{product.sku}}">.
• In variant JavaScript, Read page data inserts a pertento.data('…') call, which returns one value. For example, pertento.data('product.price') returns the price of the product on the current page, and pertento.data('feed.reviews.average') reads a value from a data feed.

Values inserted through tokens are always inserted as plain text. See Dynamic content: showing page data in a variant for every source you can read.