Installing by platform

The dashboard generates a ready-to-use snippet for four platforms: HTML, Next.js, Nuxt and WordPress. The rule is the same on all of them: the inline bootstrapper must be the first script in the <head>, with shield.js right after it.

In the examples below, the bootstrapper's content is abbreviated. Always copy the full code from Settings → Pages & Domains, which already includes your key, your channel and your rules.

Platforms with a snippet in the dashboardCopy Anchor Link

<!doctype html>
<html lang="en">
  <head>
    <!-- Proteside Start -->
    <!-- Place first in <head>, before GTM, Stripe.js, analytics, or any other scripts. -->
    <script>/* bootstrapper: full content copied from the dashboard */</script>
    <script async src="https://cdn.proteside.com/v1/shield.js"
            data-key="pk_live_3f9c1a7b2e4d6f8a0c1e3b5d7f9a1c3e"
            data-api="https://app.proteside.com/api/sdk"></script>
    <!-- Proteside End -->

    <meta charset="utf-8" />
    <title>Checkout · My Store</title>
    <!-- GTM, analytics and other scripts come after -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Other platformsCopy Anchor Link

Proteside has no official app or plugin for e-commerce platforms. You always install the snippet from the HTML tab, pasted into the <head> of your checkout pages. What varies from one platform to another is whether and where it lets you edit that <head>.

Before installing, confirm three things with your platform:

1. Which domain the checkout runs on. Many platforms host the checkout on their own domain or subdomain. The snippet must be on that domain's pages.
2. Whether you can insert code into the checkout's <head>, not just into the rest of the store.
3. Whether the code goes in as the first item in the <head>, inline and not deferred. If the platform only lets you add scripts after its own, the SDK works with partial coverage and raises the installation order warning.

If the platform doesn't allow code in the checkout's <head>, Proteside can't protect that page. In that case, install the snippet on the pages you control and confirm with the platform how it meets PCI DSS 4.0 requirements 6.4.3 and 11.6.1 on its own pages.

Google Tag ManagerCopy Anchor Link

Don't install Proteside through Google Tag Manager. GTM loads tags asynchronously, after its own container, so:

• the bootstrapper is no longer the first script and is no longer synchronous, which is exactly what the architecture requires;
• scripts that GTM loads before the Proteside tag escape observation;
• blocking unauthorized containers and tags stops working, because GTM itself would be the one loading Proteside.

If you use GTM, paste the Proteside snippet before the GTM snippet in the <head>. That way, tags GTM inserts via JavaScript go through the bootstrapper and can be blocked by your rules and by the Allowed GTM containers list.

Next stepsCopy Anchor Link

• Verify the installation
• Configuration
• Content Security Policy and headers