Hey, so you want to get hagrid on a page in your React website. Great! Inside secret: we love React too; we've built our app with React!

Quick summary before diving in, the key steps are

  1. Load the hagrid <script> on your webpage
  2. Add the <div> with the className = "hagrid" wherever you want to show the widget

‍

Here is how to get there:

  1. Get the code snippet from the hagrid setup instructions page: https://dashboard.hagrid.io/settings/setup-instructions It will look something like this, and it will be unique to your hagrid account.

    hagrid - Snippet.jpg

  2. Add it to the <head> section of your index.html file. You can find index.html in the public folder of your code.

https://uploads-ssl.webflow.com/61de9bba171cc69060455d91/61f66590227edc6c730ec8bf_script-in-head.png

  1. Add a <div> to your page, with className = "hagrid", where you would like to have the hagrid widget

https://uploads-ssl.webflow.com/61de9bba171cc69060455d91/61f6662b622ca16f3cd64bbd_add-div-class.png

That's it! You now have the hagrid widget on your webpage.

If you have any questions, mail us at [email protected]

Pro Tip

If you want to render the hagrid widget only in a component and not the entire website, create a <script> tag for when the component mounts. Here is how:

  1. Use the useEffect() hook for functional components (or add it to the

componentDidMount() method in a class component). You can find the website ID in the code snippet from the hagrid setup instructions page: https://dashboard.hagrid.io/settings/setup-instructions

https://uploads-ssl.webflow.com/61de9bba171cc69060455d91/61f668e86f8f824dc97e8d6a_website-id.png

  1. Add the class hagrid to the <div>, wherever you would like to have the hagrid widget