> ## Documentation Index
> Fetch the complete documentation index at: https://developer.watson-orchestrate.ibm.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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()`](customPanels_open).

## Type

```typescript theme={null}
HTMLElement
```

## Example

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

```javascript theme={null}
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:

```javascript theme={null}
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?](https://www.ibm.com/docs/SSAVQO/deploy/web_chat_agent/tutorials/tutorials_lp.html)**
>
> Learn how to apply the features available for embedded chat into your implementation with guidance and examples.