Are you using Next.js / React to create your new web application? Here is how you can add the Crisp chatbox on it in less than 2 minutes.

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 to retrieve your CRISP_WEBSITE_ID.


Inside your components folder, create a file crisp.js and paste this code below. Replace the CRISP_WEBSITE_ID with yours.

class Crisp 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 null;
}
}
export default Crisp


Make sure to replace CRISP_WEBSITE_ID with yours. Otherwise, this will not work!

Then, we tell can import Crisp in our component.

import dynamic from 'next/dynamic'

const CrispWithNoSSR = dynamic(
() => import('../components/crisp'),
{ ssr: false }
)


and Finally include it in your App:

class App extends React.Component {
render () {
return (
<Router>
<CrispWithNoSSR />
</Router>)
}
}
export default App


If you refresh the page, you should now see your brand new Crisp livechat appearing on your website.*
Was this article helpful?
Cancel
Thank you!