Put it on your platform

Plain HTML (native)

No platform or framework: paste the script tag in the page's HTML, in the head or before the closing body tag, then write the component's tag where it should appear.

<script async src="https://cdn.taggorcdn.com/s/<site-key>.js"></script>

<contact-form heading="Get in touch"></contact-form>

• The component appears once the site's Taggor script is on the page.

Documented limits

• The tag shows nothing until the script has loaded and the component is defined.
• A page with a Content-Security-Policy must allow the loader's address: the snippet page of the docs lists what to allow.

How we checked

Our compatibility matrix runs components on a plain HTML page, with and without a strict Content-Security-Policy. The tag was also parsed by the DOM in unit tests (happy-dom). Official page

WordPress

Add it to your theme's functions.php, or to a small plugin that loads code. It uses wp_enqueue_script with the async strategy (WordPress 6.3 or later).

add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_script( 'taggor', 'https://cdn.taggorcdn.com/s/<site-key>.js', array(), null, array( 'strategy' => 'async', 'in_footer' => true ) );
} );

Documented limits

• On WordPress.com, code needs a plan that allows plugins: free sites do not accept it.
• The editor's Custom HTML block keeps a script only for users who have the unfiltered_html capability.

How we checked

Our compatibility matrix runs components on WordPress pages (a Custom HTML block, two default themes and Elementor). The PHP snippet was checked as text; the PHP was not run. Official page

Webflow

In the site settings, open Custom code and paste the tag in the Head or the Footer area.

<script async src="https://cdn.taggorcdn.com/s/<site-key>.js"></script>

Documented limits

• Webflow's own help page lists the plans and the size limit for custom code. Check it for your plan before you paste.

How we checked

Read from Webflow's help page. Not tested on a Webflow account. Official page

Shopify

Open the theme code (Online Store, Themes, Edit code) and add the tag to the theme.

<script async src="https://cdn.taggorcdn.com/s/<site-key>.js"></script>

Documented limits

• A theme update can discard edits to the theme code: duplicate the theme before you edit, and add the tag again after you switch themes.
• Shopify recommends async only for independent third-party scripts. The Taggor loader is one.

How we checked

Read from Shopify's help pages. Not tested on a Shopify store. Official page

Wix

Open Settings, then Custom Code, and add the code in the Head or at the end of the Body.

<script async src="https://cdn.taggorcdn.com/s/<site-key>.js"></script>

Documented limits

• Custom code needs a published site with a connected domain.
• Wix does not give support for external code.

How we checked

Read from Wix's help page. Not tested on a Wix site. Official page

Squarespace

Open Code Injection and paste the tag in the Header or the Footer.

<script async src="https://cdn.taggorcdn.com/s/<site-key>.js"></script>

Documented limits

• Code Injection is available on the Core, Plus and Advanced plans, and on some older plans.
• Checkout pages do not accept custom code.
• Squarespace support does not help with custom code.

How we checked

Read from Squarespace's help page. Not tested on a Squarespace site. Official page

React (Vite or Create React App)

Paste the script tag in the project's index.html (at the root in Vite, in public/ in Create React App), and write the component's tag in a React component.

<script async src="https://cdn.taggorcdn.com/s/<site-key>.js"></script>

export function ContactForm() {
  return <contact-form heading="Get in touch" />;
}

• The component appears once the site's Taggor script is on the page.
• React 19 sets a property when the element already has it and an attribute otherwise, so a number or a boolean may arrive either way. The runtime accepts both.

Documented limits

• React 18 passes every prop of a custom element as a text attribute, so a number or a boolean arrives as text.
• React 19 sets a property when the element already has it and an attribute otherwise. The runtime accepts both.

How we checked

Our compatibility matrix runs components on a React 19 single-page app built with Vite, with the tag defined before and after React creates it. Create React App and React 18 were not run in a browser: the snippets were rendered by React 18 and React 19 in unit tests (happy-dom). Official page

Next.js

In the root layout, load the snippet with next/script (the lazyOnload strategy), and write the component's tag in a Client Component.

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://cdn.taggorcdn.com/s/<site-key>.js" strategy="lazyOnload" />
      </body>
    </html>
  );
}

"use client";

export function ContactForm() {
  return <contact-form heading="Get in touch" />;
}

• The component appears once the site's Taggor script is on the page.
• React 19 sets a property when the element already has it and an attribute otherwise, so a number or a boolean may arrive either way. The runtime accepts both.
• In the Next.js App Router, a component that uses hooks is a Client Component.

Documented limits

• In the App Router, a component that uses hooks must be a Client Component. The snippet adds the directive.
• The page's HTML carries the tag. The component appears once the Taggor script runs in the browser.

How we checked

Our compatibility matrix runs components on a Next.js App Router page. The snippets were checked as text and with React's own server render and hydration, not run inside Next.js. Official page

Vue

Paste the script tag in the project's index.html. In vite.config.ts, tell Vue's compiler that the component's tag is a custom element, then write the tag in a template.

<script async src="https://cdn.taggorcdn.com/s/<site-key>.js"></script>

<template>
  <contact-form heading="Get in touch" />
</template>

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "contact-form",
        },
      },
    }),
  ],
});

• The component appears once the site's Taggor script is on the page.
• vite.config.ts must tell Vue's compiler that the tag is not a Vue component.

Documented limits

• The tag must be declared as a custom element (isCustomElement). Without it Vue looks for a Vue component with that name and warns.

How we checked

Not in our compatibility matrix and not run in a browser. In unit tests, Vue's own compiler compiled the generated component with the generated setting, and Vue mounted it in happy-dom, where a test element read the props back. Official page

Angular

Paste the script tag in src/index.html, and declare CUSTOM_ELEMENTS_SCHEMA on the Angular component that uses the tag.

<script async src="https://cdn.taggorcdn.com/s/<site-key>.js"></script>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@Component({
  selector: "app-contact-form",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <contact-form heading="Get in touch"></contact-form>
  `,
})
export class ContactFormComponent {}

• The component appears once the site's Taggor script is on the page.
• The Angular component must declare CUSTOM_ELEMENTS_SCHEMA.

Documented limits

• The component must declare CUSTOM_ELEMENTS_SCHEMA. Without it Angular refuses the unknown element.
• Angular's event binding cannot name an event such as tag:event: listen with addEventListener.

How we checked

Not in our compatibility matrix and not run in a browser. In unit tests, Angular's compiler compiled the generated standalone component and it was started in happy-dom, where a test element read the props back. Official page