Hey, so you want to get hagrid on a page in your Webflow website.

Great! Inside secret: we ♥️ Webflow too!

Here are the quick steps:

  1. Get the code snippet from the hagrid set up 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. In your Webflow site settings, go to the custom code. section of your Project Settings. Add the snippet copied from the previous step to the Head Code in “Custom Code”

https://uploads-ssl.webflow.com/61de9bba171cc69060455d91/61f53e04ddf77fc69c3d6f9e_head-code.png

  1. Go to the page you want to add the hagrid widget to, and add a "div block" to your page, where you would like to have the hagrid widget.

https://uploads-ssl.webflow.com/61de9bba171cc69060455d91/61f3f2c99c16d758bd13b534_div-block.png

  1. Assign the class "hagrid" to the div block, in the designer view. Note that the hagrid script will populate and render this block. You will not be able to see the block in the designer view. You will need to publish the site and go to the published page to see the hagrid widget in action.

https://uploads-ssl.webflow.com/61de9bba171cc69060455d91/61f3f2da6a262f708274b109_class-hagrid.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 add the hagrid widget on multiple pages, just create a component, so you can use the section everywhere.

References

  1. Adding custom code to your Webflow website
  2. Everything about div blocks on Webflow