React

For a plain React app (Vite, Create React App, or similar), the cleanest place for the widget is your index.html, since it loads alongside the page instead of waiting for React to mount.

The recommended way: index.html #

Open index.html (Vite keeps it in the project root; CRA keeps it in public/) and add the script just before </body>:

<script
  src="https://api.plotap.com/widget.js"
  data-key="hx_pub_your_key_here"
  defer
></script>

That's it. The defer attribute means it won't block your app from loading.

When you can't edit index.html #

If you only control React components (for example, inside a larger app you don't own the HTML for), add the script from a top-level component with useEffect so it loads once:

import { useEffect } from "react";

function PlotapWidget() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://api.plotap.com/widget.js";
    script.dataset.key = "hx_pub_your_key_here";
    script.defer = true;
    document.body.appendChild(script);
    return () => script.remove();
  }, []);

  return null;
}

Render <PlotapWidget /> once near the root of your app (in App.jsx), not inside a component that mounts and unmounts repeatedly.

The data-key is your public key and is safe to ship in the browser; it only works from origins you've allowed. See Quotas, origins & keys and the general Installation steps.