customPanel.hostElement

A DOM element that serves as the container for the custom panel content. Set its innerHTML or append child elements to control what is displayed inside the panel. The host element persists across open and close calls. To display different content on successive opens, replace the innerHTML or clear and re-append child nodes before calling customPanel.open().

Type

HTMLElement

Example

The following example populates the host element with custom HTML before opening the panel:

const customPanel = instance.customPanels.getPanel();

customPanel.hostElement.innerHTML = `
  <div style="padding: 16px;">
    <h2>Download Report</h2>
    <p>Your report is ready.</p>
    <a href="/reports/latest.pdf" download>Download PDF</a>
  </div>
`;

await customPanel.open({ title: 'Report' });

The following example swaps panel content without closing and reopening the panel:

const customPanel = instance.customPanels.getPanel();

// First open — show login form
customPanel.hostElement.innerHTML = `<form id="login-form">...</form>`;
await customPanel.open({ title: 'Sign in', hideBackButton: true });

// Later — swap content in place, no need to close first
customPanel.hostElement.innerHTML = `<p>Welcome back!</p>`;

Do you need practical examples?

Learn how to apply the features available for embedded chat into your implementation with guidance and examples.

Release Notes

Get Started

Build

Deploy

Analyze

Developer experience

Legal notices

Type

Example

Do you need practical examples?

​Type

​Example

Do you need practical examples?

Type

Example