Using the Gatsby Script component to add a Hopscotch tour

Yesterday, we added an onboarding tour to "Prune your follows" together with Cam Sloan of Hopscotch unauthorized and rum-fueled treasure hunt in the sharky waters around the Gatsby islands 🏴‍☠️

Screengrab from the show

To do so, we needed to add an external script. Since I wrote about Third party scripts with Gatsby back in January, Gatsby has added a new way: the Script component.

It can be used to add both inline scripts and external scripts.

Hopscotch provides us with an inline script:

<script id="hopscotch-script" type="text/javascript">(function (w, d) {if (typeof w === "undefined") return;w.Hopscotch = w.Hopscotch || function () {(w.Hopscotch.q = w.Hopscotch.q || []).push(arguments);};var elm = d.createElement("div");elm.setAttribute("data-widget-host", "hopscotch");elm.setAttribute("data-props-api-key", "39311cf6-d7b7-5e00-b8e7");d.getElementsByTagName("body")[0].appendChild(elm);var s = d.createElement("script");s.src = "https://widgets.hopscotch.club/v1/widget.js?";s.async = 1;s.defer = 1;d.getElementsByTagName("body")[0].appendChild(s);  })(window, document);</script>

To make it work as a Script component, we had to:

  • Exchange script for Script
  • Make the inline code a "template literal"
<Script
  id="hopscotch-script"
  type="text/javascript"
>{`(function (w, d) {if (typeof w === "undefined") return;w.Hopscotch = w.Hopscotch || function () {(w.Hopscotch.q = w.Hopscotch.q || []).push(arguments);};var elm = d.createElement("div");elm.setAttribute("data-widget-host", "hopscotch");elm.setAttribute("data-props-api-key", "39311cf6-d7b7-5e00-b8e7");d.getElementsByTagName("body")[0].appendChild(elm);var s = d.createElement("script");s.src = "https://widgets.hopscotch.club/v1/widget.js?";s.async = 1;s.defer = 1;d.getElementsByTagName("body")[0].appendChild(s);  })(window, document);`}</Script>

After that, we set up the tour in Hopscotch 🎉

Screengrab of product tour

I think the whole thing took us less than 15 minutes, but we managed to stream for a full hour anyhow: chatting, testing things out, and meeting Cam's dog 🤪

 

All the best,
Queen Raae

Interested in more daily treasures like this one?
Sent directly to your inbox?