Best Smart Tips Software for Gatsby

Gatsby and in-app guidance

Installing Produktly on Gatsby

Use setHeadComponents in gatsby-ssr.js so the snippet gets injected into the pre-rendered HTML of every page.

// gatsby-ssr.js
import React from "react";

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="produktly"
      dangerouslySetInnerHTML={{
        __html: `
          (function (w, d, f) {
            var a = d.getElementsByTagName("head")[0];
            var s = d.createElement("script");
            s.async = 1; s.src = f;
            s.setAttribute("id", "produktlyScript");
            s.dataset.clientToken = "YOUR_TOKEN";
            a.appendChild(s);
          })(window, document, "https://public.produktly.com/js/main.js");
        `
      }}
    />
  ]);
};

setHeadComponents inlines the script during build, so it lands in the static HTML and runs on first paint, no JS bundle required.

Things to watch out for on Gatsby

• Loading in gatsby-browser.js misses the first render

  gatsby-browser.js only runs after hydration. If you want the script available on first paint, put it in gatsby-ssr.js as shown.

• Gatsby Link skips full page reloads

  After the first page, Gatsby Link does soft navigation. Enable Produktly’s SPA redirect handling so cross-page tours keep firing.

• Static queries hydrate after the page paints

  If your tour targets a component fed by useStaticQuery, the element exists in the pre-rendered HTML but may be replaced during hydration. Use stable data-* attributes that survive both renders.