How to add external scripts?

[JJPell]

Hi,

Just wondering how to add external scripts to an application?

e.g. Google tag manager

<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>

Thanks

[tutods]

Do you have any update on this?

[boehs]

You should just be able to embed the script like normal. What is the issue you're encountering? If you need to bind to an element or something, here are two examples of code currently being ran in production:

Example 1

export function Login() {
  if (!isServer && params.mode != "forgot_done") {
    window.onloadTurnstileCallback = function () {
      window.turnstile.render(".cf-turnstil", {
        sitekey: ...
      });
    };
    let script = document.createElement("script");
    script.setAttribute(
      "src",
      "https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback?url"
    );
    document.head.appendChild(script);
    onCleanup(() => {
      if (window && window.turnstile) {
        window.turnstile.remove();
      }
    });

Example 2

export default function Purchase() {
  const [mounted, setMounted] = createSignal(false);
  let [loading, setLoading] = createSignal(false);
  let [items, setItems] = createStore([
  ]);
  const [paddle] = createResource(mounted, async () => {
    let paddle = await initializePaddle({
      eventCallback: (event) => {
        if (prices.totals && prices.items) {
          setPrices(event.data!);
        }
      },
    });
    paddle!.Checkout.open({
      items: untrack(() => items),
      customer: {
        email: me.me()!.email,
      },
      customData: {
        userId: me.me()!.id,
      },
    });
    setLoading(false);
    return paddle;
  });
  createEffect(() => {
    if (paddle() != undefined) {
      setLoading(true);
      paddle()?.Checkout.updateItems(JSON.parse(JSON.stringify(items)));
    }
  });
  onMount(() => setMounted(true));
  return (
    <></>
  );
}

Both of these are complex examples that are perhaps slightly abusive of solid's reactivity mechanics, but the intent is to show how you can compose solid's primitives with native DOM techniques.

CC @tutods