> ## 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.

# customPanels.getPanel()

Returns the single custom panel instance for the chat. Use the returned object to open, close, and populate the custom panel.

Only one custom panel exists per chat instance at any time. If you want to display different content, replace the content of `customPanel.hostElement` rather than opening multiple panels.

## Syntax

```javascript theme={null}
const customPanel = instance.customPanels.getPanel();
```

## Parameters

None.

## Returns

**CustomPanel** `object`

The custom panel instance. Use the returned object to call [`customPanel.open()`](customPanels_open), [`customPanel.close()`](customPanels_close), and access [`customPanel.hostElement`](customPanels_hostElement).

## Example

```javascript theme={null}
const customPanel = instance.customPanels.getPanel();

// Populate the panel with custom content
customPanel.hostElement.innerHTML = `
  <div style="padding: 16px;">
    <h2>Custom Content</h2>
    <p>Your custom HTML goes here.</p>
  </div>
`;

// Open the panel
await customPanel.open({ title: 'My Panel' });
```

> **[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.