SpryUI
Sign in Start free

Docs

Get Started

Documentation

Get Started

Add SpryUI to your site, publish your first message, and check that it appears where you expect.

Install SpryUI

Hosted SDK

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

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: "pk_...",
    host: window.location.host,
    apiBaseUrl: "https://spryui.com/api/sdk/v1",
  });
</script>

Required options

  • publicKey (required): project public key from dashboard.
  • host (required): current host; must match verified domain.

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

Framework examples

Use the snippet that matches your stack.

Plain HTML

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

  initSpryUi({
    publicKey: "pk_...",
    host: window.location.host,
    apiBaseUrl: "https://spryui.com/api/sdk/v1",
  });
</script>

Nuxt/Vue

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

  initSpryUi({
    publicKey: "pk_...",
    host: window.location.host,
    apiBaseUrl: "https://spryui.com/api/sdk/v1",
  });
});

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: "pk_...",
        host: window.location.host,
        apiBaseUrl: "https://spryui.com/api/sdk/v1",
      });
      cleanup = () => sdk.destroy?.();
    });

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

  return null;
}

Site builders and CMSs

Paste this in your site's custom code area, then publish the site. Most platforms 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: "pk_...",
    host: window.location.host,
    apiBaseUrl: "https://spryui.com/api/sdk/v1",
  });
</script>

WordPress

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

Webflow

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

Squarespace

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

Wix

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

Shopify

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

Hostinger Website Builder

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

GoDaddy Site Builder (Websites + Marketing)

  1. Open GoDaddy's custom code guide, then go to your GoDaddy product page.
  2. Expand Websites + Marketing and click Manage next to your site.
  3. Open the page where you want the SDK, then add an HTML section.
  4. Paste the SDK snippet into Custom Code and save.
  5. 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

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