Documentation

Install the Website Banner SDK

Install SpryUI on HTML and site builders, or explore the Nuxt 4 module for server-rendered banners with a live SSR demo.

Install SpryUI

Hosted SDK

Use this today. It works in plain HTML, site builders, CMSs, and app codebases.

Nuxt 4 SSR

See eligible banners in the initial HTML, with a module that handles fetching and browser interactions.

Hosted SDK

Load the SDK from SpryUI, then initialize it with your project public key on the verified host.

Snippethtml

<script type="module">
  import { initSpryUi } from "https://spryui.com/sdk/v1/index.mjs";

  initSpryUi({
    publicKey: "YOUR_PROJECT_API_KEY",
  });
</script>

Required options

publicKey (required): project public key from dashboard.
The SDK derives the current host and connects to the compatible SpryUI API automatically.

Optional: env, debug, onReady, and onError. See Environments for environment selection details.

Framework examples

Use the snippet that matches your stack.

Plain HTML

Snippethtml

<script src="https://spryui.com/sdk/v1/index.iife.js"></script>
<script>
  SpryUI.initSpryUi({
    publicKey: "YOUR_PROJECT_API_KEY",
  });
</script>

View the live HTML demo

Nuxt hosted client plugin

Available today: place this in app/plugins/spryui.client.ts. It loads banners in the browser. For the SSR module, see Nuxt SSR below.

Snippetts

export default defineNuxtPlugin(async () => {
  const { initSpryUi } = await import(
    /* @vite-ignore */ "https://spryui.com/sdk/v1/index.mjs"
  );

  initSpryUi({
    publicKey: "YOUR_PROJECT_API_KEY",
  });
});

Next.js / React

Snippettsx

"use client";

import { useEffect } from "react";

export function SpryUiBootstrap() {
  useEffect(() => {
    let cleanup = () => {};

    import("https://spryui.com/sdk/v1/index.mjs").then(({ initSpryUi }) => {
      const sdk = initSpryUi({
        publicKey: "YOUR_PROJECT_API_KEY",
      });
      cleanup = () => sdk.destroy?.();
    });

    return () => cleanup();
  }, []);

  return null;
}

npm: browser SDK

Bundle the dependency-free SDK with your app. Run initialization in the browser after the page is mounted. For Nuxt server rendering, use the module below.

Snippetbash

npm install @spryui/sdk

Snippetts

import { initSpryUi } from "@spryui/sdk";

const sdk = initSpryUi({
  publicKey: "{YOUR_PROJECT_PUBLIC_KEY}",
});

// When your integration is removed:
// sdk.destroy();

Nuxt 4: server-rendered banners

The Nuxt adapter fetches config on the server, renders eligible banners into the page HTML, and reuses that config in the browser for clicks, dismissals, and analytics.

View the live Nuxt SSR demo ↗

1. Install the packages

Snippetbash

npm install @spryui/nuxt @spryui/sdk

2. Register the module · nuxt.config.ts

Snippetts

export default defineNuxtConfig({
  modules: ["@spryui/nuxt"],
  spryui: {
    publicKey: "{YOUR_PROJECT_PUBLIC_KEY}",
  },
});

3. Place the banners · app/app.vue

Snippetvue

<template>
  <SpryUiBanners position="top" />
  <NuxtPage />
  <SpryUiBanners position="bottom" />
</template>

Use each position once. The module handles its endpoint, host detection, targeting context, visitor cookies, route changes, and browser handoff. Approve your deployed domain on the project matching your public key. First-party cookies preserve delivery history; include them in your site's consent policy where needed.

The module defaults to PRODUCTION and a 1,500 ms fetch timeout. It sets private/no-store responses and rejects shared route caches and prerendering. Keep these pages out of CDN page caches. Device-specific targeting may wait for the browser.

Site builders and CMSs

Paste this in your site's custom code area, then publish the site. Most site builders support global Header/Footer placement. GoDaddy Websites + Marketing uses per-page HTML sections.

Snippethtml

<script src="https://spryui.com/sdk/v1/index.iife.js"></script>
<script>
  SpryUI.initSpryUi({
    publicKey: "YOUR_PROJECT_API_KEY",
  });
</script>

WordPress

WordPress.com: use Add code to headers.
Install and activate the free Insert Headers and Footers (WPCode) plugin.
In dashboard, go to Code Snippets -> Header & Footer.
Paste the SDK snippet in Footer (preferred for scripts), click Save Changes, then clear cache/CDN.

Webflow

Confirm your workspace/site plan supports custom code (per official Webflow docs).
Go to Site settings -> Custom code.
Paste SDK snippet in Footer code and click Save changes.
Publish to your target domain (custom code is not live until published).

Squarespace

Open Code Injection (available on paid Squarespace plans).
Add the SDK script in Footer (injects before </body> site-wide).
Click Save, then republish if your setup requires publishing.
Optional page-level path: Pages -> page gear icon -> Advanced -> Page Header Code Injection.

Wix

Before adding code, make sure site is published and has a connected domain (per Wix docs).
Go to Settings -> Custom Code under Development & integrations.
Click + Add Custom Code, paste snippet, choose All pages.
Set Place Code in: Body - end, then click Apply.

Shopify

Review Shopify's theme code editor guide.
In Shopify admin, go to Online Store -> Themes.
Duplicate your live theme, then open ... and click Edit code.
Open layout/theme.liquid, paste the SDK snippet near the closing </body> tag, then save.
Preview and publish the updated theme when verified.

Hostinger Website Builder

Open Hostinger's custom code guide.
In the builder, go to Website settings -> Integrations.
Paste the SDK snippet into the Custom code field.
Save and update/publish the website.
If needed per-page, use an Embed code element in the page body.

GoDaddy Site Builder (Websites + Marketing)

Open GoDaddy's custom code guide, then go to your GoDaddy product page.
Expand Websites + Marketing and click Manage next to your site.
Open the page where you want the SDK, then add an HTML section.
Paste the SDK snippet into Custom Code and save.
Repeat for each page where SDK rendering is needed, then Publish.

Required dashboard values

Project public key
Verified domain/host in project domain settings
At least one active message in the target environment

Verify installation

SDK starts without errors.
onReady receives messages.
At least one message renders on a verified host.
Impression event appears in SpryUI analytics.
Click and dismiss events appear when triggered.