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!
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!
Updated on: 28 / 01 / 2019