Install the SchemaGen SDK on Your Website in Minutes

The SchemaGen SDK is a lightweight JavaScript snippet that connects your website to the Schema Delivery Network. When a visitor loads a page, the SDK reads the current URL, fetches any published schemas that match that page from SchemaGen’s edge network, and injects them into the DOM as <script type="application/ld+json"> tags — automatically, with no further action required from you. You install the SDK once. Every schema you publish, update, or pause from the dashboard takes effect immediately across all matching pages on your site.

The SDK is lightweight and edge-optimized. It loads asynchronously so it never blocks page rendering, and schema delivery is served from edge locations worldwide to minimize latency.

Find your Client ID

Before you install the SDK, locate your Client ID. This unique identifier tells the SDK which schemas to fetch for your site. To find it: in the SchemaGen dashboard, go to Settings → Client. Your Client ID is displayed there. Copy it — you’ll paste it into the SDK snippet below.

Install the SDK

Choose the installation method that matches your site setup.

HTML / Static
WordPress
Shopify
Next.js / React

Add the following snippet inside the <head> tag of every page on your site. If you use a shared layout or template file, add it there so it appears on all pages automatically.Replace YOUR_CLIENT_ID with the Client ID from your dashboard.

HTML

<script async
  src="https://schemagen.io/sdk.js"
  data-client-id="YOUR_CLIENT_ID">
</script>

Place the tag as early in the <head> as possible to give the SDK time to fetch schemas before the page finishes rendering.

The best way to add the SDK to WordPress is via your theme’s functions.php file or a site-wide plugin like Code Snippets.Add the following to your functions.php file (or a custom plugin):

functions.php

function schemagen_sdk() {
  echo '<script async src="https://schemagen.io/sdk.js" data-client-id="YOUR_CLIENT_ID"></script>';
}
add_action( 'wp_head', 'schemagen_sdk' );

Replace YOUR_CLIENT_ID with the Client ID from your dashboard.

If you’re using a page builder like Elementor or a theme with a Custom Code or Header Scripts field, you can paste the raw <script> tag there instead of editing functions.php.

After saving, load any page on your site and verify the script tag appears in the page source.

In your Shopify admin, go to Online Store → Themes → Edit code. Open layout/theme.liquid and paste the snippet just before the closing </head> tag.Replace YOUR_CLIENT_ID with the Client ID from your dashboard.

theme.liquid

<script async
  src="https://schemagen.io/sdk.js"
  data-client-id="YOUR_CLIENT_ID">
</script>

</head>

Click Save. The SDK will now load on every page of your storefront.

Shopify’s online storefront renders different URLs for product pages, collections, blogs, and the homepage. SchemaGen matches schemas by the exact URL the SDK detects, so make sure your target URLs in the dashboard match your Shopify URL structure (for example, https://your-store.myshopify.com/products/example-product).

In Next.js, use the built-in next/script component to load the SDK. Add it to your root layout so it appears on every page.Replace YOUR_CLIENT_ID with the Client ID from your dashboard.

app/layout.jsx

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://schemagen.io/sdk.js"
          data-client-id="YOUR_CLIENT_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

The afterInteractive strategy loads the SDK after the page becomes interactive, keeping it out of the critical rendering path while ensuring schemas are injected before users interact with the content.

If you’re using the Pages Router instead of the App Router, add the <Script> component to pages/_app.jsx in the same way.

How the SDK works

When the SDK loads on a page, it:

Reads the current page URL from the browser.
Sends a request to the SchemaGen inject API: GET /api/inject?clientId={clientId}&url={pageUrl}.
Receives a list of published schemas matching that URL.
Injects each schema as a <script type="application/ld+json"> tag into the page DOM.

Schemas are only delivered if they match the target URL you configured in the dashboard and have a Published status. Drafts and paused schemas are never delivered to the browser.

Verify the SDK is working

After installing the SDK, confirm it’s injecting schemas correctly.

Open DevTools

Navigate to a page where you have a published schema. Open your browser’s developer tools (press F12 or right-click → Inspect).

Check the Elements panel

In the Elements tab, search for application/ld+json (use Ctrl+F or Cmd+F to search within the DOM). You should see one or more <script type="application/ld+json"> tags containing your schema JSON.

Check the Network panel

In the Network tab, filter by Fetch/XHR and reload the page. Look for a request to schemagen.io/api/inject — this confirms the SDK is running and communicating with the SchemaGen edge network.

If you don’t see schemas being injected, double-check that the data-client-id attribute contains your correct Client ID, that the target URL in your dashboard exactly matches the page URL (including protocol and path), and that the schema has a Published status — not Draft or Paused.

Next steps

Quick start guide

Walk through creating and publishing your first schema end to end.

SDN overview

Learn how the Schema Delivery Network routes and caches schema delivery.

Publishing and lifecycle

Understand how Draft, Published, and Paused states affect schema delivery.

Domain locking

Restrict your Client ID to specific domains to prevent unauthorized use.

Get Started

Core Features

Schema Delivery Network

Integrations

Account & Plans

Install the SchemaGen SDK on Your Website in Minutes

Find your Client ID

Install the SDK

How the SDK works

Verify the SDK is working

Next steps

Quick start guide

SDN overview

Publishing and lifecycle

Domain locking

Get Started

Core Features

Schema Delivery Network

Integrations

Account & Plans

Documentation Index

​Find your Client ID

​Install the SDK

​How the SDK works

​Verify the SDK is working

​Next steps

Quick start guide

SDN overview

Publishing and lifecycle

Domain locking

Find your Client ID

Install the SDK

How the SDK works

Verify the SDK is working

Next steps