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.
13 or higher
16 or higher
11 or higher
7 or higher
12.1 or higher
7 or higher
4.4 (Kitkat) or higher
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.
Before installing Sendbird Chat SDK, you need to create a Sendbird application on Sendbird Dashboard, which 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.
Go to Sendbird Dashboard and create an account for a free trial. If you already have a Sendbird account, sign into your account.
Create a new application by clicking Create + at the bottom right of your screen.
Enter a name for your application. Choose a Product Type and Region. Then, click Confirm.
Click the application you just created under Applications. You will see the application's Application ID on the overview page which you will need when initializing the Chat SDK.
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.
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.
Note: If you use a
scripttag 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.
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
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.
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.
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.
Depending on which chat feature you would like to use, add either
GroupChannelModule to create an open channel or a group channel respectively.
You will need a user in order to send a message to a channel. You can either create a user on our dashboard or use a unique ID that hasn't been taken by any of your Sendbird application users. In the latter case, a new user will be automatically created in your Sendbird application before being connected.
To learn about using a token to authenticate a user, go to the authentication page.
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.
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.
Finally, send a message to the channel. To learn more about the message type you can send, see the messages page.
onMessageReceived() channel event handler using the
addOpenChannelHandler() method so that you can receive the message you just sent to the channel. You can also see the message on our dashboard.