HtmlPanel

Note: This component is currently experimental. To use it, install the @talkjs/react library with the next tag:


1npm install @talkjs/react@next

The HtmlPanel component lets you embed HTML Panels inside your chat. It must be a direct descendant of a Chatbox, Inbox or a Popup.

Props

Name	Type	Description
url Required	`string`	The URL you want to load inside the HTML panel. The URL can be absolute or relative. Any child components provided to this component will only be rendered if `url` has the same origin as the parent page. Learn more about HTML Panels and same origin pages here.
height	`number`	The panel height in pixels. Defaults to `100px`.
show	`boolean`	Sets the visibility of the panel. Defaults to `true`. Changing this prop is equivalent to calling `HtmlPanel.show()` and `HtmlPanel.hide()`, while re-rendering the component calls `HtmlPanel.destroy()` and `createHtmlPanel()` in the background.
conversationId	`string`	When provided, the panel will only show up for the conversation that has an `id` matching the one given.
children	`ReactNode`	The content that gets rendered inside the `<body>` of the panel.

Example

The following example adds an HTML Panel that loads an HTML document from panel.html:


1import { useState } from 'react';
2import { HtmlPanel } from '@talkjs/react';
3
4const [show, setShow] = useState(false);
5
6<HtmlPanel url="panel.html" show={show}>
7  <div>I am inside a panel!</div>
8  <button onClick={() => setShow(false)}>Close</button>
9</HtmlPanel>;