About this guide
This development guide walks you through everything you need to do to build a high-quality React app integrated with Crisp. Check out the tasks below to get started. To save time, you can also use our boilerplate, which gives you a complete React codebase with all of these tasks done for you. Okay, let's dive in!
Tasks
Setup your React app
Setup a React app usingnpx create-react-app
and routing using React Router. There are many ways you can structure your app, but a common setup is to have anApp
component that defines top-level routes, with each route component imported from the/pages
directory. The rest of your components should be located in your/components
directory. You can then run your app locally with thenpm run start
command.Create a component that adds the Crisp script
Create a customChat
component that handles adding the Crisp script to the head of your web app. You'll want to render this component in yourApp
component so that it's included on all pages. Internally this component should execute the Crisp chat script withinuseEffect
(assuming you're using functional components) so that it's added to your web apphead
on mount.Update Crisp with user data
If using authentication then you'll want to update Crisp with the authenticated user's email and name. If you're utilizing an authentication hook, such asuseAuth
, to listen to the user's authentication state then you can simple fire off auseEffect
whenever the user object changes. The effect should update the email and name fields usingwindow.$crisp.push
, as explained further in the Crisp docs. This method ensures that user data gets populated after signin as well as when the user changes their info within your app.
Get the code
You can get the code for this guide with our React and Crisp Boilerplate. You'll get a complete React codebase with Crisp integration, all the tasks listed above done for you, and a responsive multi-page template. It should save you about two weeks of development time.
127 downloads today