Installing Crisp with React is very easy. Here is the solution

Create an account on Crisp.
Go to Settings. Then, Website Settings.
Next to your website, click on Settings.
Click on Setup instructions.
Click on Chatbox setup instructions.
Select HTML.


Copy the JavaScript code


Go to your React codebase and find the main component.

class App extends React.Component {
componentDidMount () {
// Include the Crisp code here, without the <script></script> tags
window.$crisp = [];
window.CRISP_WEBSITE_ID = "YOUR_WEBSITE_ID";

(function() {
var d = document;
var s = d.createElement("script");

s.src = "https://client.crisp.chat/l.js";
s.async = 1;
d.getElementsByTagName("head")[0].appendChild(s);
})();
};
}
render () {
return (
<Router>
<Route path="/" component={LogPageView} />
<div className="content">
<PageWrapper>
<Header title="Site Title" />
<Routes />
<Footer />
</PageWrapper>
</div>
</Router>)
}
}
export default App


Make sure to replace CRISP_WEBSITE_ID with yours. Otherwise, this will not work!
Was this article helpful?
Thank you!