zatmeet-embed-sdk

The official ZAT Meet CPaaS (Communication Platform as a Service) Embed SDK.

This elegant, plug-and-play Javascript wrapper library allows you to embed ZAT Meet video rooms directly into your custom DOM containers.

Installation

npm install zatmeet-embed-sdk
# or
yarn add zatmeet-embed-sdk

Basic Usage (Vanilla JS)

<div id="zatmeet-container" style="width: 100vw; height: 100vh;"></div>

import ZatMeetEmbed from 'zatmeet-embed-sdk';

// 1. Fetch meeting token from your backend 
// (which securely communicates with ZAT Meet API)
const token = "YOUR_SECURE_JWT_TOKEN";

// 2. Initialize the embed
const room = new ZatMeetEmbed("zatmeet-container", {
  meetingId: "your-meeting-id",
  token: token,
  name: "Dr. Smith", 
  micOn: true,
  cameraOn: true
});

// 3. Listen to events
room.on("connected", () => {
  console.log("Joined meeting successfully!");
});

room.on("disconnected", () => {
  console.log("Left meeting.");
});

room.on("error", (err) => {
  console.error("ZAT Meet Error:", err);
});

React Hook & Component Guide

To easily use this in React, you can copy this wrapper component into your project. It manages the lifecycle and automatically cleans up the iframe when unmounting.

import React, { useEffect, useRef } from 'react';
import ZatMeetEmbed from 'zatmeet-embed-sdk';

interface ZatMeetRoomProps {
  meetingId: string;
  token: string;
  userName?: string;
  userId?: string;
  onLeave?: () => void;
  onError?: (error: any) => void;
}

export const ZatMeetRoom: React.FC<ZatMeetRoomProps> = ({ 
  meetingId, 
  token, 
  userName, 
  userId, 
  onLeave, 
  onError 
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const roomRef = useRef<any>(null);

  useEffect(() => {
    if (!containerRef.current || !meetingId || !token) return;

    const containerId = `zatmeet-container-${meetingId}`;
    containerRef.current.id = containerId;

    try {
      roomRef.current = new ZatMeetEmbed(containerId, {
        meetingId,
        token,
        name: userName || "Guest",
        userId: userId || "",
      });

      roomRef.current.on("disconnected", () => {
        if (onLeave) onLeave();
      });

      roomRef.current.on("error", (err: any) => {
        if (onError) onError(err);
      });

    } catch (err) {
      if (onError) onError(err);
    }

    // Cleanup
    return () => {
      if (roomRef.current) {
        roomRef.current.destroy();
        roomRef.current = null;
      }
    };
  }, [meetingId, token, userName, userId, onLeave, onError]);

  return (
    <div 
      ref={containerRef} 
      style={{ width: '100%', height: '100%', minHeight: '600px' }} 
    />
  );
};

Available Options

| Option | Type | Default | Description | |---|---|---|---| | meetingId | string | Required | The ID of the meeting room. | | token | string | Required | The SDK authorization JWT token. | | name | string | "Embedded Guest" | The participant name shown to others. | | userId | string | "" | The custom user identifier. | | micOn | boolean | true | Initial microphone status. | | cameraOn | boolean | true | Initial camera status. | | chat | boolean | true | Whether to show the chat panel. | | whiteboard| boolean | true | Whether to show the whiteboard. | | participants| boolean| true | Whether to show the participants list. | | baseUrl | string | window.location.origin | Custom base URL of the ZATMEET instance. |

Methods

• muteAudio(): Programmatically mute user's audio input.
• unmuteAudio(): Programmatically unmute user's audio input.
• muteVideo(): Programmatically mute user's camera stream.
• unmuteVideo(): Programmatically unmute user's camera stream.
• leave(): Programmatically leave the meeting room.
• destroy(): Clean up and remove the embed iframe from the DOM.

Events

• connected: Emitted when successfully joined the room.
• disconnected: Emitted when the user leaves or is disconnected.
• participant-joined: Emitted when a new participant joins (passes participant info).
• participant-left: Emitted when a participant leaves (passes participant info).
• error: Emitted when an error occurs (passes error message).