Gatsby plugin for Tawk

July 08, 2018

Gatsby Tawk Plugin

After looking for a chat widget for my new gatsby site I came across tawk.

My favourite products are easy to use, full featured and cheap. Tawk is not only very well put together, it's also free unless you want to brand it.

After a quick search for a gatsby plugin came up short, I decided to build one. I'd never built an npm or gatsby plugin before so I figured it would be a good learning experience.

In order to add tawk to a website only requires the addition of a simple snipet of javascript code, but with gatsby the final code is generated during the build so this made a simple cut and paste more involved. I looked at the gatsby-plugin-google-analytics package for inspiration since that's based on the same principal.

After understanding how to inject settings from the gatsby-config file plugin options, I set the tawk ID as an option and packaged the plugin. My first NPM was published!

This was a great learning experience, however my excitment was shortlived. Netlify has build options to add javascript snippets to the page after building has completed. It will be easier to maintain there. But at least if I am deploying a site elsewhere I still have this option.

Git Repo

This Contact form is created using Netlify Forms, keeping this page serverless! Once submitted a slack integration will notify me of the form submission and I will get back to you as soon as I can.