HTML Placeholders

• Last updated on April 4, 2025
• •
• 1 minute to read

HTML Placeholders (slots) allow you to embed external HTML content into workflow elements. In this way, you can customize the editor with greater flexibility, as well as add new functionality if needed.

The Simple Editor's slots allows you to insert your content in certain places of the options panel and then modify it through interaction with the Document Object Model (DOM), for example, by retrieving the desired element by its ID. Currently, no restrictions on embedding have been placed, so in addition to standard HTML, other web components can also be used as content.

Available Slots

header

The header slot is located before the title. You can use it to insert important notifications or quick access tools.

title

The title slot is used to display the text title (legacy one). Customize it to show relevant information about the content.

description

The description slot is positioned between the price and text input fields. Use it to provide additional details or instructions.

price-info

The price-info slot is situated between the quantity field and the approval checkbox. It can be used to display price-related information or messages.

addition

The addition slot is placed below the "Add to cart" button. Utilize this space for additional calls-to-action or promotional content.

label

The label slot is located between the product name and price. It can be used to display labels or badges, such as "New" or "Sale."

custom-option

The custom-option slot displays info at the beginning of the block of options. You can use it to to display a list of linked products.

quantity-info

The quantity-info slot is found above the quantity field. Use it to provide information related to quantity selection.

mobile-header

The mobile-header slot appears above the viewer in the mobile version. Customize it to enhance the mobile user experience.

viewer-info

The viewer-info slot is located below the viewer. Use it to display additional information or controls related to the viewer.

Usage

To insert a DOM element into the desired block, assign the element an attribute corresponding to the block name. For example:

<au-simple-editor>
  <div title>Placeholder title</div>
  <button label>New</button>
</au-simple-editor>

Arrangement

That's where the slots are inserted.