Methods

Embed-SDK React
Embed-SDK Web

Methods available on the sdk default export to interact with app builder.

Authentication method to log in the sdk instance with the generated token. See how to generate a login token

react-sdk
web-sdk

import AppBuilderReactSDK from "@appbuilder/react";

AppBuilderReactSDK.login(/* token: */ "<your-login-token>");

import AppBuilderWebSDK from "@appbuilder/web";

AppBuilderWebSDK.login(/* token: */ "<your-login-token>");

logout(): void

Invalidates the login token currently being used by the SDK instance.

react-sdk
web-sdk

import AppBuilderReactSDK from "@appbuilder/react";

AppBuilderReactSDK.logout();

import AppBuilderWebSDK from "@appbuilder/web";

AppBuilderWebSDK.logout();

customize( CustomizationApiInterface ): void

Applies your customization to the Embed-SDK.

react-sdk
web-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  AppBuilderReactSDK.customize({
    // Your customization, see https://appbuilder-docs.agora.io/customization-api/api-reference/components-api
  });
}, []);

info

Call the method before rendering the <app-builder> component to see changes.

import AppBuilderWebSDK from "@appbuilder/web";

AppBuilderWebSDK.customize({
  // Your customization, see https://appbuilder-docs.agora.io/customization-api/api-reference/components-api
});

createCustomization( CustomizationApiInterface ): CustomizationApiInterface

Creates a customization object to be applied via the customize method.

react-sdk
web-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  AppBuilderReactSDK.createCustomization({
    // Your customization, see https://appbuilder-docs.agora.io/customization-api/api-reference/components-api
  });
}, []);

import AppBuilderWebSDK from "@appbuilder/web";

cosnt myCustomization = AppBuilderWebSDK.createCustomization({
  // Your customization, see https://appbuilder-docs.agora.io/customization-api/api-reference/components-api
});

joinPrecall( roomDetails: string | RoomData, userName?: string ): Promise<[roomdata:RoomData, enterRoom:( userName?: string )=>{} ]>

Allows user to programatically join a room with given roomDetails which can either be the room passphrase generated by the app builder backend or room details recieved from the backend. Returns a promise that resolves to roomInfo which contains the room data and enterRoom function which starts the call from the precall screen programatically.

react-sdk
web-sdk

import AppBuilderReactSDK from "@appbuilder/react";

const JoinButtonClickHandler = () => {
  AppBuilderReactSDK.joinPrecall(
    /* Room id: */ "7e6f1680-b20d-4273-bcf4-e1137fcb9ea3",
    /* UserName (optional) */ "User A",
  )
    .then((enterRoom) => {
      console.log("App Builder room precall joined");
      return enterRoom();
    })
    .then(() => {
      console.log("App Builder room joined");
    });
};

import AppBuilderWebSDK from "@appbuilder/web";

const JoinButtonClickHandler = () => {
  AppBuilderWebSDK.join(
    /* Room id: */ "7e6f1680-b20d-4273-bcf4-e1137fcb9ea3",
    /* UserName (optional) */ "User A",
  )
    .then((enterRoom) => {
      console.log("App Builder room precall joined");
      return enterRoom();
    })
    .then(() => {
      console.log("App Builder room joined");
    });
};

joinRoom( roomDetails: string | RoomData, userName?: string ): Promise<RoomData>

Allows user to programatically join a room with given roomDetails which can either be the room passphrase generated by the app builder backend or room details recieved from the backend.

react-sdk
web-sdk

import AppBuilderReactSDK from "@appbuilder/react";

const JoinButtonClickHandler = () => {
  AppBuilderReactSDK.joinRoom(
    /* Room id: */ "7e6f1680-b20d-4273-bcf4-e1137fcb9ea3",
    /* UserName (optional) */ "User A",
  ).then(() => {
    console.log("App Builder room joined");
  });
};

import AppBuilderWebSDK from "@appbuilder/web";

const JoinButtonClickHandler = () => {
  AppBuilderWebSDK.join(
    /* Room id: */ "/7e6f1680-b20d-4273-bcf4-e1137fcb9ea3"
    /* UserName (optional) */ "User A"
  ).then(() => {
    console.log("App Builder room joined");
  });
};

muteAudio( mute: boolean | ((currentMute: boolean) => boolean) ): Promise<void>

Allows user to programatically mute/unmute the local user's audio.

react-sdk
web-sdk

import AppBuilderReactSDK from "@appbuilder/react";

AppBuilderReactSDK.muteAudio(true);
//  -- or --
AppBuilderReactSDK.muteAudio((currentState) => !currentState);

import AppBuilderWebSDK from "@appbuilder/web";

AppBuilderWebSDK.muteAudio(true);
//  -- or --
AppBuilderWebSDK.muteAudio((currentState) => !currentState);

muteVideo( mute: boolean | ((currentMute: boolean) => boolean) ): Promise<void>

Allows user to programatically mute/unmute the local user's video.

react-sdk
web-sdk

import AppBuilderReactSDK from "@appbuilder/react";

AppBuilderReactSDK.muteVideo(true);
//  -- or --
AppBuilderReactSDK.muteVideo((currentState) => !currentState);

import AppBuilderWebSDK from "@appbuilder/web";

AppBuilderWebSDK.muteVideo(true);
//  -- or --
AppBuilderWebSDK.muteVideo((currentState) => !currentState);

setMicrophone( deviceId: deviceId ): Promise<void>

Allows user to programatically set the audio input device.

react-sdk
web-sdk

import AppBuilderReactSDK from "@appbuilder/react";

AppBuilderReactSDK.setMicrophone(/* deviceId: */ "<id-of-the-device>");

import AppBuilderWebSDK from "@appbuilder/web";

AppBuilderWebSDK.setMicrophone(/* deviceId: */ "<id-of-the-device>");

setCamera( deviceId: deviceId ): Promise<void>

Allows user to programatically set the video input device.

react-sdk
web-sdk

import AppBuilderReactSDK from "@appbuilder/react";

AppBuilderReactSDK.setCamera(/* deviceId: */ "<id-of-the-device>");

import AppBuilderWebSDK from "@appbuilder/web";

AppBuilderWebSDK.setCamera(/* deviceId: */ "<id-of-the-device>");

setSpeaker( deviceId: deviceId ): Promise<void>

Allows user to programatically set the audio output device.

info

Only works on Google chrome and other chromium based browsers.

react-sdk
web-sdk

import AppBuilderReactSDK from "@appbuilder/react";

AppBuilderReactSDK.setSpeaker(/* deviceId: */ "<id-of-the-device>");

import AppBuilderWebSDK from "@appbuilder/web";

AppBuilderWebSDK.setSpeaker(/* deviceId: */ "<id-of-the-device>");

on( eventName: keyof sdkEventsMapInterface ,callback: sdkEventsMapInterface[eventName] ): unsubscribe

Allows attaching callbacks to events emitted by the Embed-SDK. A list of all events along with necessary callbacks can be found here.

react-sdk
web-sdk

import AppBuilderReactSDK from "@appbuilder/react";

...

useEffect(() => {
  const unbind = AppBuilderReactSDK.on("leave", () => {
    console.log("App Builder room left");
  });

  return () => {
    unbind();
  };
}, []);

import AppBuilderWebSDK from "@appbuilder/web";

const unbind = AppBuilderReactSDK.on("leave", () => {
  console.log("App Builder room left");
});

...

unbind();

Returns:

unsubscribe(): void

Unsubscribes from the method

login( token: string ): void