Custom response types with React portals
Learn how to use your React application to render custom responses.
Overview
If you are rendering custom response types and have an existing React application. You can use React portals to render your custom response type as part of your application. For more details on rendering custom response types in general, refer to our Custom response types
tutorial for details.
The short summary for using React is that you will need to save the HTML elements provided by the chat widget as part of the custom response event to your application. Then you can attach your react components to those elements using React portals.
Instructions
To create React portals for your custom responses, you can create a component that looks something like the code below.
/**
* This is a react component you can insert anywhere in your application that will register a listen for custom response
* events and will render custom response components in React portals attach to those custom response host elements
* provided by the chat widget.
*
* You should only render this component once the chat widget has been rendered and the "instance" is available.
*/
class UsingWithReactClass extends React.Component {
constructor(props) {
super(props);
// This component state will be used to record all of the custom response events that are fired from the widget.
// These events contain the HTML elements that we will attach our portals to as well as the messages that we
// wish to render in the message.
this.state = { customResponseEvents: [] };
this.customResponseHandler = this.customResponseHandler.bind(this);
}
componentDidMount() {
// When the component is mounted, register the custom response handler that will store the references to the
// custom response events.
const { instance } = this.props;
instance.on({ type: 'customResponse', handler: this.customResponseHandler });
}
componentWillUnmount() {
// Remove the custom response handler.
const { instance } = this.props;
instance.off({ type: 'customResponse', handler: this.customResponseHandler });
}
customResponseHandler(event) {
// This handler will fire each time a custom response occurs and we will update our state by appending the event
// to the end of our elements list.
this.setState(function appendEvent(prevState) {
return {
customResponseEvents: prevState.customResponseEvents.concat(event)
}
});
};
render() {
// All we need to do to enable the react portals is to render each portal somewhere in your application (it
// doesn't really matter where).
return (
<>
{this.state.customResponseEvents.map(function mapEvent(event, index) {
return (
<CustomResponseComponentPortal key={index} hostElement={event.data.element}>
{/* This is your custom response component. It can be whatever you like that renders the given message
in whatever manner your application needs. */}
<CustomResponseComponent message={event.data.message} />;
</CustomResponseComponentPortal>
);
})}
</>
);
}
}
/**
* This is the component that will attach a React portal to the given host element. The host element is the element
* provided by the chat widget where your custom response will be displayed in the DOM. This portal will attached
* any React children passed to it under this component so you can render the response using your own React
* application. Those children will be rendered under the given element where it lives in the DOM.
*/
function CustomResponseComponentPortal({ hostElement, children }) {
return ReactDOM.createPortal(children, hostElement);
}