Slots

Last updated on November 14, 2025
•
1 minute to read

Slots allow you to embed external HTML content into workflow elements, giving you greater flexibility to customize the editor and add new functionality. You can insert your own content into special slots and modify it via the Document Object Model (DOM), for example, by accessing elements by their ID. There are no restrictions on what you can embed—standard HTML, web components, or IFRAME elements are all supported.

logo

Use the logo slot to replace the editor's default logo. If no content is provided, 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.

mobile-logo

Use the mobile-logo slot to customize the logo in the mobile version. If no content is provided, the default Customer's Canvas logo appears.

Note

The mobile logo is limited to 28×28 pixels.

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

rightPanelContent

Use the rightPanelContent slot to display an additional panel with custom content on the right side 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>

The rightPanelContent slot in Handy Editor.

rightPanelHeader

Use the rightPanelHeader slot alongside rightPanelContent 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>

The rightPanelHeader slot in Handy Editor.

approval-slot-1 & approval-slot-2

The approval-slot-1 and approval-slot-2 slots customize the approval modal window:

approval-slot-1: Replaces the default description text with a custom element.
approval-slot-2: Adds a custom element below the Back to Editor button.

<au-handy-editor>
  <div approval-slot-1>Approval slot 1</div>
  <div approval-slot-2>Approval slot 2</div>
</au-handy-editor>

The rightPanelHeader slot in Handy Editor.

Troubleshooting

Problem: Slot content appears before the editor loads:

Solution: Hide slot content until the editor initializes by adding the following styles inside the editor tag:

<au-handy-editor>
  <style>
    *[logo],
    *[rightPanelHeader],
    *[rightPanelContent],
    *[approval-slot-1],
    *[approval-slot-2] {
      display: none !important;
    }
  </style>
  <a logo href="https://customerscanvas.com/">My logo</a>
  <div custom>Test for custom panel</div>
  <div rightPanelHeader>My header</div>
  <div rightPanelContent>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</au-handy-editor>

Once the editor loads, it clears the tag content, positions the slots, and removes these styles automatically.

You can also create a simple text loader until the editor initializes:

<au-handy-editor>
  <style>
    au-handy-editor {
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
  <span>Loading...</span>
</au-handy-editor>