> ## Documentation Index
> Fetch the complete documentation index at: https://docs.schemagen.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Install the SchemaGen SDK on Your Website in Minutes
> Add the SchemaGen SDK snippet once to HTML, WordPress, Shopify, or Next.js sites to enable real-time JSON-LD delivery from your dashboard.
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 `
```
Place the tag as early in the `` 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):
```php functions.php theme={null}
function schemagen_sdk() {
echo '';
}
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 `
```
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.
```jsx app/layout.jsx theme={null}
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
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 `