---
url: https://talkjs.com/docs/UI_Components/React_Native/Components/HtmlPanel
---

# HtmlPanel

Embed and control custom HTML content inside your chat UI.

Ask a question Copy for LLM [View as Markdown](/docs/UI_Components/React_Native/Components/HtmlPanel.md)
An HTML Panel allows you to place an HTML document in an iframe in your chats,
just above the message field. Using HTML Panels, you can extend TalkJS UIs to
have anything from credit card payments to lead collection forms, or, for
instance, to show the product details of a marketplace transaction between your users.
You can read more about its limitations [here](/docs/Guides/JavaScript/Classic/HTML_Panels/#html-panel-limitations).

To use a HTML Panel, it **MUST** be a direct descendant of [`Chatbox`](/docs/UI_Components/React_Native/Components/Chatbox/).

## Props

| Name | Type | Description |
| --- | --- | --- |
| ---

**url Required**

--- | `string` | URL you want to load inside the HTML panel. The Url can be absolute (`"https://www.example.com/register-form.html"`) or relative (`"register-form.html"`). We recommend using same origin pages to have better control of the page. Learn more about HTML Panels and same origin pages [here](/docs/Guides/JavaScript/Classic/HTML_Panels/). |
| ---

**height**

--- | `number` | The panel height in pixels. Defaults to `100px`. |
| ---

**show**

--- | `boolean` | Sets the visibility of the panel. Defaults to `true`. |
| ---

**conversation Id**

--- | `string` | If given, the panel will only show up for the conversation that has an `id` matching the one given. |

## Example

```tsx
<Chatbox>
  <HtmlPanel
    url='https://www.example.com/register-form.html'
    height={150}
  />
</Chatbox>
```