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

1. Membership form

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
  membershipId: "<membership-id>",
});

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>
  );
}

2. Form

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 form's link e.g. https://kazm.com/membership/c2f728cb-ac16-49a4-a482-ecd7e3efa8e8/form/645d66f0-db19-4e2e-99bf-5dfcefd3b1ac
  membershipId: "<membership-id>/form/<form-id>",
});

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>/form/<form-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>
  );
}