Send your first message

With Sendbird Chat SDK for JavaScript, you can efficiently integrate real-time chat into a client app. On the client-side implementation, you can initialize and configure the chat with minimal effort. On the server side, Sendbird ensures reliable infra-management services for the chat service within your app.

This page demonstrates how to install the Chat SDK in your app so that you can send your first message in just a few simple steps. In addition, try building your app on top of our sample app to jumpstart your build.

Note: To learn about how to build a chat app using React Native and Hooks, see our React Native chat tutorial.

The following table lists browsers and their versions we support.

Note: The Sendbird server supports Transport Layer Security (TLS) from version 1.0 up to 1.3. For example, in the server regions where TLS 1.3 isn't available, lower versions, sequentially from 1.2 to 1.0, are supported for secure data transmission.

In this quickstart guide, you will be installing Sendbird SDK, implementing codes to create a open channel with a user, and send a message within a few minutes. Before you start, you need to have the following:

• Sendbird application on Sendbird Dashboard
• A user in the Sendbird application

A Sendbird application comprises everything required in a chat service including users, messages, and channels. You need the Application ID of your Sendbird application from the dashboard when initializing the Chat SDK.

1. Go to Sendbird Dashboard and create an account for a free trial. If you already have a Sendbird account, sign into your account.

2. Create a new application by clicking Create + at the bottom right of your screen.

3. Enter a name for your application. Choose a Product Type and Region. Then, click Confirm.

4. Click the application you just created under Applications. You will see the application's Application ID which you will need when initializing the Chat SDK.

Note: Each Sendbird application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.

In order to send a message, you need a user in a channel. You can either create a user on the Sendbird dashboard first or you can use a new unique ID that hasn’t been taken by any of your Sendbird application users. In the latter case, a new user is automatically created in your Sendbird application before being connected.

In this guide, we will create a user on the Sendbird dashboard first.

1. Go to the Users menu on the left-hand side of the dashboard and click Create user+.

2. Enter the User ID and Nickname. It is recommended that you check the box next to Issue access token for user authentication. Then, click Create.

Note: Sendbird supports user authentication through access token for stronger security. However, on the dashboard, you can also configure the token permission in Settings > Application > Security > Access token permission to allow users without a token to access our functionalities. To learn more, see Authentication.

3. Copy and store the user ID. You will use it to connect to the Sendbird server.

UIKit is a Sendbird Chat SDK add-on with user interfaces that enable an easy and fast integration of standard chat features into new or existing client apps.

If you would like a sample app with embedded UIs, see UIKit Overview for React.

Sendbird provides various access control options when using the Chat SDK. By default, the following attributes are turned on to avoid unexpected errors when creating sample apps and sending your first message:

• Allow retrieving user list
• Allow updating user metadata
• Allow creating open channels
• Allow creating group channels

However, this may grant access to unwanted data or operations, leading to potential security concerns. To manage your access control settings, you can turn on or off each option in Settings > Application > Security > Access control list on Sendbird Dashboard.

To send a message in a client app, build and configure an in-app chat using Sendbird Chat SDK. The SDK can be installed through either a web sample project or React Native project. Sendbird Chat SDK v4 supports both TypeScript and JavaScript.

Installing Sendbird Chat SDK is simple if you're familiar with using external libraries or SDKs in your projects. The Chat SDK can be installed through either npm or a script element.

Note: If you use a script tag to embed the Chat SDK, we recommend a module import to guard against a security breach.

You can install the Chat SDK with npm using the following command.

$ npm install --save @sendbird/chat

The Chat SDK has type definition files that include third-party library dependencies like @react-native-async-storage/async-storage to provide accurate type support.

If you don't use such third-party libraries or prefer to not check the types of the Chat SDK when compiling, enable the skipLibCheck option in your tsconfig.json file.

// your tsconfig.json
{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

You can directly include the SDK in your webpage by downloading sendbird.min.js from the SDK repository. Note that sendbird.min.js doesn't take advantage of tree-shaking.

<script type="text/javascript" src="your_path_to_sdk/sendbird.min.js"></script>

The Sendbird SDK instance, which contains all exported components, is made available globally with the use of a script element. The following is an example of how to import SDK components.

var {
    SendbirdChat,
    GroupChannelModule,
} = Sendbird;

var sendbird = SendbirdChat.init({
    appId,
    modules: [
        new GroupChannelModule(),
    ],
});

If you use a script tag to embed the SDK, you may be vulnerable to cross-site scripting (XSS) attacks which could open you up to further attacks such as spoofing. To better protect your app against malicious attacks, import the SDK as a module or build your app with a bundler such as webpack to not expose the SDK.

Importing the SDK as a module requires higher browser versions than those supported by our SDK. The higher browser versions prevent the module from being accessed globally. Visit this page to see which browser versions support modules.

The following is an example of a module import.

<!-- your_webpage.html -->
<script type="module" src="your_app.js"></script>

// your_app.js
import SendbirdChat from 'your_path_to_sdk/sendbird.js';
import { GroupChannelModule } from 'your_path_to_sdk/groupChannel.js';

const sendbird = SendbirdChat.init({
    appId,
    modules: [
        new GroupChannelModule(),
    ],
});

Now, initialize Sendbird Chat SDK in the app to allow the Chat SDK to respond to changes in the connection status in JavaScript client apps. Initialization requires your Sendbird application's Application ID, which can be found on Sendbird Dashboard.

The SendbirdChat.init() method must be called across a client web app at least once. We recommend that you initialize the Chat SDK at the top of your JavaScript file.

Depending on which chat feature you would like to use, add either OpenChannelModule or GroupChannelModule to create an open channel or a group channel respectively.

import SendbirdChat from '@sendbird/chat'
import { OpenChannelModule, SendbirdOpenChat } from '@sendbird/chat/openChannel';

const sb = SendbirdChat.init({
    appId: APP_ID,
    modules: [
        new OpenChannelModule(),
    ],
});

You need a user connected to the Sendbird server first before sending a message to a channel.

• If you already have a user in your Sendbird application: In connect(), specify a user ID from the user list in your Sendbird application.

• If you don't have an existing user: Specifying a unique userId in connect() will automatically generate a new user in your Sendbird application before being connected.

Note: Sendbird supports user authentication via access tokens, but defaults to allowing access without a token for ease of initial use. For enhanced security, we recommend adjusting access settings under Settings > Application > Security > Access token permission on the dashboard for new users. To learn about access token and authentication, see the Authentication guide.

try {
    const user = await sb.connect(USER_ID);
    // Use the ID of a user you've created on the dashboard.
    // If there isn't one, specify a unique ID so that a new user can be created with the value.
} catch (err) {
    // Handle error.
}

Create an open channel. Open channels are where all users in your Sendbird application can easily participate without an invitation.

The following codes show how to create an open channel.

try {
    const params = { // OpenChannelCreateParams can be imported from @sendbird/chat/openChannel.
        // ...
    };
    const channel = await sb.openChannel.createChannel(params);

    // An open channel is successfully created.
    // Through the openChannel parameter of the callback function,
    // you can get the open channel's data from the result object that the Sendbird server has passed to the callback function.
    // ...
} catch (err) {
    // Handle error.
}

You can also create a group channel to send a message. To learn more, see the create a channel page.

Enter the open channel to send and receive messages.

try {
    // The following sample code continues from Step 4.
    const params = { // OpenChannelCreateParams can be imported from @sendbird/chat/openChannel.
        // ...
    };
    const channel = await sb.openChannel.createChannel(params);

    await channel.enter();
    // The current user successfully enters the open channel
    // and can chat with other users in the channel by using APIs.
    // ...
} catch (err) {
    // Handle error.
}

Finally, send a message to the channel. To learn about the message types you can send, refer to Message overview in Chat Platform API.

You can check the message you've sent in Sendbird Dashboard. To learn about receiving a message, refer to the receive messages through a channel event handler page.

const params = { // UserMessageCreateParams can be imported from @sendbird/chat/message.
    message: TEXT_MESSAGE,
};

channel.sendUserMessage(params)
    .onPending((message) => {
    // The pending message for the message being sent has been created.
    // The pending message has the same reqId value as the corresponding failed/succeeded message.
    })
    .onFailed((err, message) => {
    // Handle error.
    })
    .onSucceeded((message) => {
        // The message is successfully sent to the channel.
        // The current user can receive messages from other users through the onMessageReceived() method of an event handler.
    });