Sendbird JavaScript API

Integrate Sendbird chat using the WebToNative JavaScript API. Enable real-time messaging and communication in Android and iOS apps.

Add real-time in-app messaging and push notifications to your app — powered by Sendbird's native SDKs.

Sendbird is a communication platform that provides pre-built chat UI, real-time messaging, and push notifications. Instead of building a messaging system from scratch — handling message delivery, read receipts, typing indicators, offline queuing, and notification routing — Sendbird handles all of it through its SDKs and cloud infrastructure.

WebToNative's Sendbird plugin integrates the official Sendbird iOS and Android SDKs directly into your app. This gives your users a native messaging experience with a full-featured chat UI, group channels, user management, and push notifications via APNs (iOS) and Firebase Cloud Messaging (Android) — all controllable from your web layer through the JavaScript bridge.

Why use the native Sendbird plugin?

Embedding a web-based chat widget inside a WebView leads to poor performance, unreliable push notifications, and a UX that feels out of place on mobile. The WebToNative Sendbird plugin uses Sendbird's native UI kit, which means your users get a chat experience that looks and performs like a first-class native feature — smooth scrolling, native push delivery, and proper background behavior.

Prerequisites: Import the WebToNative JavaScript bridge into your website before using any of the functions below. See the Getting Started guide.

Key Concepts

Before diving into setup, here are a few terms you'll encounter throughout this guide:

Application ID (appId) — Identifies your Sendbird application. The SDK needs it to initialize. You'll find it in your Sendbird dashboard under your application's overview.

Group Channel — A channel where multiple users can chat. Creating one returns a channelUrl that you use to open the channel in the native UI.

Distinct Channel (isDistinct) — When set to true, if a group channel with the exact same members already exists, Sendbird reuses it instead of creating a duplicate. Useful for 1-on-1 conversations.

Step 1 — Set Up Your Sendbird Account

1.1 Create a Sendbird Application

Sign up or log in at the Sendbird Dashboard.
Create a new application (or use an existing one).
Copy your Application ID from the application overview page — you'll need this for the WebToNative dashboard.

1.2 Configure Push Notifications in Sendbird

To deliver push notifications when users receive messages while the app is backgrounded, you need to provide Sendbird with your push credentials.

Navigate to Settings → Push Notifications in your Sendbird dashboard, enable push notifications, and add the following credentials:

For iOS (Apple Push Notification service):

Credential

Where to find it

App Bundle ID

WebToNative Dashboard → App Info

.p8 or .p12 authentication token

Apple Developer Portal → Certificates, Identifiers & Profiles

Key ID

Apple Developer Portal → Keys section

Team ID

Apple Developer Portal → Membership details

For Android (Firebase Cloud Messaging):

Credential

Where to find it

Service Account Key (HTTP v1)

Firebase Console → Project Settings → Service Accounts → Generate New Private Key

google-services.json

Firebase Console → Project Settings → General → Your Apps → Download

If you don't have a google-services.json file yet, follow the Firebase Notification Integration Guide to create one.

Step 2 — Configure the Plugin in WebToNative

Open your WebToNative Dashboard → Add-ons → Sendbird and configure the following settings:

2.1 Enable Sendbird

Turn on the Enable Sendbird toggle to activate the plugin.

2.2 Enter Your App ID

Enter the Sendbird Application ID you copied from the Sendbird dashboard in Step 1.

2.3 Upload Firebase Service JSON (Android)

Firebase Cloud Messaging requires a google-services.json file embedded in your Android build for push notifications to work.

Click "Click to upload" and select the google-services.json file you downloaded from the Firebase Console.

Note: The google-services.json file is required for push notifications on Android. It is not required for iOS.

2.4 Disable Notification in App Foreground (Optional)

When enabled, push notifications will not appear while the user is actively using the app. This prevents disruptive notification banners during an active chat session.

2.5 Ask for Notification Permission on Launch

When enabled, the app will request push notification permission from the user the first time the app is launched.

If you disable this setting, you can request permission later using a Trigger URL — a specific URL path that, when visited by the user inside the app, triggers the notification permission prompt. This gives you control over when and where in your app flow the user sees the permission dialog.

2.6 Save and Rebuild

After configuring the settings, click Save & Rebuild to generate a new build with the Sendbird plugin enabled.

JavaScript API Reference

Initialize

Initializes the Sendbird SDK with a user ID and connects the user. You can optionally set a nickname and profile image at the same time.

window.WTN.SendBird.sendbirdInitialize({
  userId: "user123",
  nickname: "John",
  profileurl: "https://example.com/avatar.png",
  callback: function (response) {
    if (response.error) {
      console.error("Init failed:", response.error);
      return;
    }
    console.log("Sendbird initialized for user:", response.userId);
  },
});

import { sendbirdInitialize } from "webtonative/SendBird";

sendbirdInitialize({
  userId: "user123",
  nickname: "John",
  profileurl: "https://example.com/avatar.png",
  callback: (response) => {
    if (response.error) {
      console.error("Init failed:", response.error);
      return;
    }
    console.log("Sendbird initialized for user:", response.userId);
  },
});

Parameters:

Key

Type

Required

Description

userId

String

Yes

The unique user ID to connect with. If the user doesn't exist in Sendbird, a new user is created.

nickname

String

Display name for the user.

profileurl

String

URL of the user's profile image.

callback

Function

Function invoked with the initialization response.

Is Initialized

Checks whether the Sendbird SDK has been initialized. Useful on app resume or page load to determine if you need to call sendbirdInitialize again.

window.WTN.SendBird.sendbirdIsInitialized({
  callback: function (response) {
    if (response.initialized) {
      console.log("SDK ready, appId:", response.appId);
    } else {
      console.log("SDK not initialized — call sendbirdInitialize()");
    }
  },
});

import { sendbirdIsInitialized } from "webtonative/SendBird";

sendbirdIsInitialized({
  callback: (response) => {
    if (response.initialized) {
      console.log("SDK ready, appId:", response.appId);
    } else {
      console.log("SDK not initialized — call sendbirdInitialize()");
    }
  },
});

Response:

Key

Type

Description

initialized

Boolean

true if the Sendbird SDK has been initialized.

appId

String

The Sendbird Application ID (present only if initialized).

Is Connected

Checks whether the user is currently connected to the Sendbird server. A user can be initialized but temporarily disconnected (e.g. after calling sendbirdDisconnect).

window.WTN.SendBird.sendbirdIsConnected({
  callback: function (response) {
    console.log("Connected:", response.connected);
  },
});

Response:

Key

Type

Description

connected

Boolean

true if the user is connected to Sendbird.

Get User ID

Retrieves the user ID of the currently connected user.

window.WTN.SendBird.sendbirdGetUserId({
  callback: function (response) {
    console.log("Current user:", response.userId);
  },
});

Response:

Key

Type

Description

userId

String

The current user's Sendbird user ID.

Update User Info

Updates the current user's nickname and/or profile image URL in Sendbird.

window.WTN.SendBird.sendbirdUpdateUserInfo({
  nickname: "New Display Name",
  profileurl: "https://example.com/new-avatar.png",
  callback: function (response) {
    if (response.success) {
      console.log("User info updated");
    }
  },
});

import { sendbirdUpdateUserInfo } from "webtonative/SendBird";

sendbirdUpdateUserInfo({
  nickname: "New Display Name",
  profileurl: "https://example.com/new-avatar.png",
  callback: (response) => {
    if (response.success) {
      console.log("User info updated");
    }
  },
});

Parameters:

Key

Type

Required

Description

nickname

String

The new display name for the user.

profileurl

String

The new profile image URL for the user.

callback

Function

Function invoked with the response.

Response:

Key

Type

Description

success

Boolean

true if the user info was updated.

Create Group Channel

Creates a new group channel with the specified users. Returns the channelUrl which you can use with sendbirdShowChannelUI to open the channel directly.

window.WTN.SendBird.sendbirdCreateGroupChannel({
  name: "Project Chat",
  userIds: ["user1", "user2", "user3"],
  isDistinct: true,
  callback: function (response) {
    if (response.success) {
      console.log("Channel created:", response.channelUrl);
      // Open the channel immediately
      window.WTN.SendBird.sendbirdShowChannelUI({
        url: response.channelUrl,
      });
    }
  },
});

import {
  sendbirdCreateGroupChannel,
  sendbirdShowChannelUI,
} from "webtonative/SendBird";

sendbirdCreateGroupChannel({
  name: "Project Chat",
  userIds: ["user1", "user2", "user3"],
  isDistinct: true,
  callback: (response) => {
    if (response.success) {
      console.log("Channel created:", response.channelUrl);
      sendbirdShowChannelUI({ url: response.channelUrl });
    }
  },
});

Parameters:

Key

Type

Required

Description

name

String

Display name for the channel.

userIds

String[]

Yes

Array of user IDs to add to the channel. At least one user ID is required.

isDistinct

Boolean

If true, reuses an existing channel with the exact same members instead of creating a duplicate. Default: false.

callback

Function

Function invoked with the response.

Response:

Key

Type

Description

success

Boolean

true if the channel was created (or reused).

channelUrl

String

The URL identifier of the group channel.

Show UI

Opens the full Sendbird native chat UI, showing the user's channel list. From here, users can enter channels, create new channels, and navigate back.

window.WTN.SendBird.sendbirdShowUI({
  callback: function (response) {
    console.log("UI status:", response.status);
  },
});

Response:

Key

Type

Description

success

Boolean

true if the UI was shown successfully.

status

String

Status of the UI display operation.

Show Channel UI

Opens the Sendbird native chat UI and navigates directly to a specific channel by its URL.

window.WTN.SendBird.sendbirdShowChannelUI({
  url: "sendbird_group_channel_123",
  callback: function (response) {
    console.log("Opened channel:", response.channelUrl);
  },
});

import { sendbirdShowChannelUI } from "webtonative/SendBird";

sendbirdShowChannelUI({
  url: "sendbird_group_channel_123",
  callback: (response) => {
    console.log("Opened channel:", response.channelUrl);
  },
});

Parameters:

Key

Type

Required

Description

url

String

Yes

The channelUrl of the channel to open.

callback

Function

Function invoked with the response.

Response:

Key

Type

Description

success

Boolean

true if the channel UI was shown.

status

String

Status of the UI display operation.

channelUrl

String

The URL of the displayed channel.

UI Closed Callback

Define this function on your webpage to run custom logic when the user closes the Sendbird native UI (e.g. navigates back from the channel list). This is a global callback, not a parameter.

function wtn_sendbird_uiclosed() {
  console.log("Sendbird UI was closed");
  // Navigate back, refresh data, etc.
}

Disconnect

Disconnects the current user's session from Sendbird. The user remains logged in — their details stay saved on the device, and the device continues to receive push notifications. Use this for temporary disconnections (e.g. switching tabs, backgrounding).

To reconnect, call sendbirdInitialize again.

window.WTN.SendBird.sendbirdDisconnect({
  callback: function (response) {
    if (response.success) {
      console.log("Disconnected (session preserved)");
    }
  },
});

import { sendbirdDisconnect } from "webtonative/SendBird";

sendbirdDisconnect({
  callback: (response) => {
    if (response.success) {
      console.log("Disconnected (session preserved)");
    }
  },
});

Response:

Key

Type

Description

success

Boolean

true if the disconnect was successful.

Logout

Fully logs out the current user from Sendbird. This disconnects the session, unregisters the device's push notification token, and clears all stored Sendbird data from the device. Use this when the user is signing out of your app.

Disconnect vs. Logout: sendbirdDisconnect is a soft pause — the user stays logged in and push continues. sendbirdLogout is a full cleanup — push is unregistered and all local Sendbird data is cleared.

window.WTN.SendBird.sendbirdLogout({
  callback: function (response) {
    if (response.success) {
      console.log("Logged out — push unregistered, data cleared");
    }
  },
});

import { sendbirdLogout } from "webtonative/SendBird";

sendbirdLogout({
  callback: (response) => {
    if (response.success) {
      console.log("Logged out — push unregistered, data cleared");
    }
  },
});

Response:

Key

Type

Description

success

Boolean

true if the logout was successful.

Typical Implementation Flow

Here's how a typical Sendbird integration works end-to-end:

App launch — Call sendbirdIsInitialized() to check if the SDK is already set up.
Initialize — If not initialized, call sendbirdInitialize() with the user's ID, nickname, and profile image. This both initializes the SDK and connects the user.
Show chat — Call sendbirdShowUI() to open the full channel list, or sendbirdCreateGroupChannel() followed by sendbirdShowChannelUI() to create and open a specific channel.
Handle UI close — Define wtn_sendbird_uiclosed() on your page to run logic when the user exits the Sendbird UI.
User signs out — Call sendbirdLogout() to fully clear the session and unregister push. If the user is just switching views, use sendbirdDisconnect() instead.

Recipe: Create a Channel and Open It

This common pattern creates a group channel (or reuses an existing one if isDistinct is true) and immediately opens it in the native chat UI:

window.WTN.SendBird.sendbirdCreateGroupChannel({
  name: "Support Chat",
  userIds: ["support_agent", "customer_42"],
  isDistinct: true,
  callback: function (response) {
    if (response.success) {
      window.WTN.SendBird.sendbirdShowChannelUI({
        url: response.channelUrl,
      });
    } else {
      console.error("Failed to create channel");
    }
  },
});

import {
  sendbirdCreateGroupChannel,
  sendbirdShowChannelUI,
} from "webtonative/SendBird";

sendbirdCreateGroupChannel({
  name: "Support Chat",
  userIds: ["support_agent", "customer_42"],
  isDistinct: true,
  callback: (response) => {
    if (response.success) {
      sendbirdShowChannelUI({ url: response.channelUrl });
    } else {
      console.error("Failed to create channel");
    }
  },
});

Implementation Checklist

Sendbird Dashboard

Created a Sendbird application and copied the Application ID
Enabled Push Notifications under Settings → Push Notifications
Added APNs credentials (iOS): .p8/.p12 token, Key ID, Team ID, Bundle ID
Added FCM credentials (Android): Service Account Key (HTTP v1)

WebToNative Dashboard

Enabled the Sendbird add-on
Entered the Sendbird Application ID
Uploaded google-services.json (required for Android push notifications)
Configured Disable Notification in App Foreground based on your preference
Configured Ask for Notification Permission on Launch (or set a Trigger URL for deferred permission)
Clicked Save & Rebuild to generate a new build

Your Website

Imported the WebToNative JavaScript bridge
Implemented sendbirdInitialize() with user ID on login
Implemented sendbirdShowUI() or sendbirdShowChannelUI() for chat access
Defined wtn_sendbird_uiclosed() callback for UI close handling
Implemented sendbirdLogout() in your sign-out flow
Tested push notifications on a real device (both iOS and Android)

Frequently Asked Questions

What's the difference between disconnect and logout?

sendbirdDisconnect is a soft pause — the user stays logged in, their data is preserved on the device, and push notifications continue to be delivered. Use it for temporary disconnections like backgrounding or switching views. sendbirdLogout is a full cleanup — it disconnects the session, unregisters the device's push token, and clears all local Sendbird data. Use it when the user signs out of your app.

Push notifications aren't arriving. What should I check?

Verify the following in order: (1) Push notifications are enabled in the Sendbird dashboard under Settings → Push Notifications. (2) Your APNs or FCM credentials are correctly added in the Sendbird dashboard. (3) For Android, google-services.json is uploaded in the WebToNative dashboard. (4) The user is logged in (not logged out) — sendbirdLogout unregisters the push token. (5) You're testing on a real device, not a simulator.

Do I need to call sendbirdInitialize on every page load?

Not necessarily. Once initialized, the SDK persists across the app session. Use sendbirdIsInitialized() on page load to check — if it returns initialized: true, the SDK is already connected and you can proceed directly to showing UI or managing channels.

What happens if I call sendbirdCreateGroupChannel with isDistinct: true and the channel already exists?

Sendbird returns the existing channel's channelUrl instead of creating a duplicate. This is the recommended approach for 1-on-1 conversations or any scenario where you want to avoid duplicate channels between the same set of users.

Can I control when the notification permission prompt appears?

Yes. If you disable Ask for Notification Permission on Launch in the WebToNative dashboard, you can set a Trigger URL instead. The permission prompt will appear when the user navigates to that specific URL path inside the app. This lets you ask for permission at a contextually appropriate moment (e.g. when the user first opens the chat section).

Can I test Sendbird in a simulator?

The messaging UI and channel management work in simulators. However, push notifications require a physical device with APNs (iOS) or FCM (Android) support — simulators cannot receive push notifications.

Is google-services.json required for iOS?

No. The google-services.json file is only required for Android push notifications via Firebase Cloud Messaging. iOS push notifications use APNs credentials configured directly in the Sendbird dashboard.

Feature taken live on 30/03/26

PreviousPasscode NextUnified User Session

Last updated 1 month ago