Getting started

The Kazm Client SDK can be used to embed pages in your webpage and react to events that happen within the Kazm experience

Installation

There are two ways to install our SDK:

1. via script element

HTML

<script src="https://api.kazm.com/event-sdk.js"></script>

2. with package manager

BASH

npm install @kazm/client-sdk

The usage is the same in both cases. The only difference is that you need to add an import statement when installing with a package manager.

Usage

Vanilla JS example

TypeScript

import { KazmEventType, KazmSDK, UserSignedInPayload } from "@kazm/client-sdk";

const sdk = new KazmSDK();
const embed = sdk.initializeEmbed({
  elementId: '<yourHtmlElementId>',
  // Can be found in the Kazm embed window
  formId: '<yourFormID>',
});

React Example

TypeScript

import { useEffect } from "react";

import { KazmSDK } from "@kazm/client-sdk";

export function EmbedPage() {
  const elementId = "kazm-container";

  useEffect(() => {
    const sdk = new KazmSDK();
    const form = sdk.initializeEmbed({
      elementId: elementId,
      membershipId: "<membership-id>",
    });

    return () => {
      form.remove();
    };
  }, []);

  return (
    <div className="flex h-[800px] w-full flex-col bg-gray-800">
      <div className="py-4">Embedded Form</div>
      <div id={elementId} className="flex h-full w-full p-4">
        {/* This is where the SDK will inject its content */}
      </div>
    </div>
  );
}