HTML

At the lowest level, Partytown is not tied to one specific framework or build tool. Because of this, Partytown can be used in any webpage as long as the HTML is updated, and the library scripts are hosted from the origin.

While the partytown.js file could be an external request, it’s recommended to inline the script instead. How the Partytown snippet is inlined into the page depends on each site’s setup and an integration may already exist for your framework.

<head>
  <script>
    /* Inlined Partytown Snippet */
  </script>
  <script type="text/partytown" src="https://example.com/analytics.js"></script>
</head>

One option to load the snippet is from the partytownSnippet() function, exported from the @builder.io/partytown/integration submodule.

import { partytownSnippet } from '@builder.io/partytown/integration';

const snippetText = partytownSnippet();

Configure

The configuration should be added to window using the partytown global object.

Below is an HTML example of setting up the forwarding for Google Tag Manager. Note that the config is before the inlined partytown script.

<head>
  <script>
    partytown = {
      forward: ['dataLayer.push'],
    };
  </script>
  <script>
    /* Inlined Partytown Snippet */
  </script>
</head>

Partytown Script

Add the type="text/partytown" attribute for each script that should run from a web worker.

<script type="text/partytown">
  /* Inlined Third-Party Script */
</script>

Copy Library Files

How the files are copied or served from your site is up to each site’s setup. A partytown copylib CLI copy task has been provided for convenience which helps copy the Partytown library files to the public directory.

Made with ❤️ by

© 2023 Builder.io, Inc.

Introducing Visual Copilot.

100% free. Supports all popular frameworks.

Try Visual Copilot