Installation

Overview

The Asiyst Web SDK (@asiyst/sdk) is distributed via npm and globally distributed CDN edges. It is compiled with zero heavy dependencies to keep page bundle overhead minimal (< 28KB gzipped).

Package Managers

Run the installation command corresponding to your build pipeline:

# npm
npm install @asiyst/sdk
# pnpm
pnpm add @asiyst/sdk
# Yarn
yarn add @asiyst/sdk
# Bun
bun add @asiyst/sdk

CDN Script Tag

For standard HTML websites, Webflow, Shopify, or WordPress, inject the CDN bundle before the closing tag:

<script
  src="https://cdn.asiyst.com/sdk/v1/asiyst.min.js"
  data-project-id="proj_your_project_id"
  data-public-key="pk_live_your_public_key"
  async
></script>

Next.js Integration

In Next.js 13+ (App Router), components in the app directory default to Server Components. The SDK requires browser APIs (window, document, localStorage). Mount it via a client-only wrapper component:

// components/asiyst-provider.tsx
"use client";
import { useEffect } from "react";
import { Asiyst } from "@asiyst/sdk";
export default function AsiystProvider() {
  useEffect(() => {
    Asiyst.init({
      projectId: process.env.NEXT_PUBLIC_ASIYST_PROJECT_ID as string,
      publicKey: process.env.NEXT_PUBLIC_ASIYST_PUBLIC_KEY as string,
    });
  }, []);
  return null;
}

Add this provider into app/layout.tsx:

import AsiystProvider from "@/components/asiyst-provider";
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <AsiystProvider />
      </body>
    </html>
  );
}

React Integration

In standard Single Page Applications (Vite / CRA / Webpack):

import React, { useEffect } from "react";
import { Asiyst } from "@asiyst/sdk";
export function App() {
  useEffect(() => {
    Asiyst.init({
      projectId: "proj_9f8a2b3c4d",
      publicKey: "pk_live_8e7d6c5b4a3f2e1d",
    });
  }, []);
  return <div className="app-container">Your App Content</div>;
}

Security Considerations

• Never bundle private API keys: Private tokens (sk_live_...) belong strictly on your backend server.

• Allowed Domains: Ensure the domain hosting your website matches the domains listed in your Allowed Domains settings.

Continue to SDK Initialization for configuration options.