Posts tagged #external scripts

💬 💬 ~ Using the Gatsby Script component to add a Hopscotch tour

Fri, 14 Oct 2022 00:00:00 GMT

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 🏴‍☠️

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 🎉

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

﹤ ﹥ ~ The new Script Component - recommended reading

Thu, 09 Jun 2022 00:00:00 GMT

There is a new solutions to Third-party scripts with Gatsby: the Script Component.

Get the low down from Ty Hopp, Senior Software Engineer at Gatsby.

All the best,
Queen Raae

🔴 👩‍🏫 ~ Third-party scripts with Gatsby

Wed, 05 Jan 2022 00:00:00 GMT

Let's say you want to embed a Tweet or add website analytics. How would you go about including the external third-party script required?

That was the topic for my first ever Live Screencasts — concise, instructional videos on a single Gatsby topic.

Watch the Live Screeencast

I have found three practical ways of doing so with Gatsby.

1. `onRenderBody`

An excellent solution for global scripts must be available on every page, such as website analytics.

With onRenderBody, the script is added when the site statically generates. The script tag is part of the initial HTML even before the site rehydrates.

Jump in to see onRenderBody in action

import React from "react";

const headComponents = [
  <script
    key="fathom-script"
    src="https://cdn.usefathom.com/script.js"
    data-site="CNOZPPSE"
    defer
  ></script>,
];

export const onRenderBody = ({setHeadComponents}) => {
  setHeadComponents(headComponents);
};

2. React Helmet

Using React Helmet is another method for adding the script as part of the statically generated pages. However, it makes it easy to include the script only on certain pages.

Jump in to to see React Helmet in action

import React from "react";
import {Helmet} from "react-helmet";

const TweetPageReactHelmet = () => {
  return (
    <main>
      <Helmet>
        <script async src="https://platform.twitter.com/widgets.js" />
      </Helmet>

      <section>
        <blockquote class="twitter-tweet">
          {/* ... rest of tweet embed code */}
        </blockquote>{" "}
      </section>
    </main>
  );
};

export default TweetPageReactHelmet;

3. `document.createElement`

Suppose you want to have more control over when a script is loaded. In that case, you can do so by manipulating the DOM inside a useEffect (or onClick or another event that makes sense...).

Jump in to see document.createElement in action

import React, {useEffect} from "react";

const TweetPageCreateElement = () => {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://platform.twitter.com/widgets.js";
    document.head.appendChild(script);
    return () => {
      script.remove();
    };
  }, []);

  return (
    <main>
      <section>
        <blockquote class="twitter-tweet">
          {/* ... rest of tweet embed code */}
        </blockquote>
      </section>
    </main>
  );
};

export default TweetPageCreateElement;

Have you used any of these?
Do you know of another way?

All the best,
Queen Raae

Posts tagged #external scripts

💬 💬 ~ Using the Gatsby Script component to add a Hopscotch tour

﹤ ﹥ ~ The new Script Component - recommended reading

🔴 👩‍🏫 ~ Third-party scripts with Gatsby

1. onRenderBody

2. React Helmet

3. document.createElement

1. `onRenderBody`

3. `document.createElement`