Docs

JavaScript / React

Documentation

Install with JavaScript

Install the SpryUI npm package in your JavaScript or React app, initialize it in the browser, and refresh banners after navigation.

Install the package

First set up your project and public key.

Snippetbash
npm install @spryui/sdk@latest

Start SpryUI in the browser

Run this once after your page is ready. Replace the public key with your project’s key.

Snippetts
import { initSpryUi } from "@spryui/sdk";
const sdk = initSpryUi({ publicKey: "YOUR_PROJECT_PUBLIC_KEY" });

For client-side navigation, call sdk.refresh() after the route changes. Call sdk.destroy() when removing the integration.

React example

Mount this component once in your app layout. It cleans up the banner when the component unmounts.

Snippettsx
"use client";
import { useEffect } from "react";
import { initSpryUi } from "@spryui/sdk";

export function SpryUi() {
  useEffect(() => {
    const sdk = initSpryUi({ publicKey: "YOUR_PROJECT_PUBLIC_KEY" });
    return () => sdk.destroy();
  }, []);
  return null;
}

Using Nuxt 4? Follow the Nuxt guide for server rendering.