Slots

• Last updated on October 17, 2024
• •
• 1 minute to read

The 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 Handy Editor has special slots where you can insert your own content 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 or IFRAME elements can also be used as content.

logo

The logo slot can be used to change the editor's logo. If the content is not transmitted, the standard Customer's Canvas logo will be displayed.

Pass an HTML content with the logo attribute as a child element of au-handy-editor as follows:

<au-handy-editor>
  <a logo href="https://customerscanvas.com/">
     <img width="64" src="https://i.giphy.com/media/RLtIXkhNGVItMov3lZ/giphy.gif" />
  </a>
</au-handy-editor>

As a result, the logo changes.

rightPanelContent

The rightPanelContent slot allows you to show an additional panel with your content in the right part of the editor.

Pass your content with the rightPanelContent attribute as a child element of au-handy-editor.

<au-handy-editor>
  <div rightPanelContent>Check your email for the Order details</div>
</au-handy-editor>

rightPanelHeader

The rightPanelHeader slot is used together with rightPanelContent and allows you to set a title for the panel.

<au-handy-editor>
  <div rightPanelHeader>Order overview</div>
  <div rightPanelContent>Check your email for the Order details</div>
</au-handy-editor>