Note: The following getting started guide uses Sendbird UIKit, a set of rich, prebuilt UI components, which you can use to create a modern messenger experience in your app in under 10 minutes. Of course, you can also use the Sendbird Chat SDK with your own custom UI.

Send your first message

Explore how easy it is to set up chat in your JavaScript (JS) application and send your first message using Sendbird UIKit.

Don’t code in JS? See how easy it is to send your first message using Sendbird UIKit for Android and iOS. 

To send your first message, you will need to achieve two milestones.

1. Create a Sendbird account and chat users in the Sendbird environment.
2. Import Sendbird UIKit dependencies and integrate the Sendbird UIKit component in your application.

This guide will cover both steps in detail and is meant for developers of any level of proficiency so they can easily send the first message in their application. We will cover:

• How to create a Sendbird account
• Creating users in Sendbird’s dashboard
• Add the UIKit Dependency
• Connect UIKit to your app
• Test the integration

Let’s get started!

Create a Sendbird Account

1. Sign up for a free Sendbird account.

Sign up screen for Sendbird

2. Create an account using your email id or Continue with Google.

3. Setup your Organization by entering Organization name and Phone number.

Set up your organization

4. Create your Sendbird application after choosing Product type, and entering your Application Name, Region.

Create your Sendbird application

5. You will be directed to the main page of the Sendbird Dashboard to get started with implementing Sendbird Chat SDK and API in your product.

6. Copy your unique applicationID from the Application section and paste it in your clipboard.

Copy your Sendbird applicationID

Create users in Sendbird Dashboard

1. Navigate to Users section in the left navigation of the dashboard.

Create users in Sendbird Dashboard

2. Click Create user + icon on the top right.

3. Create a new user by filling out the following fields:

• ID
• Nickname
• Profile URL – Optional
• Issue access token – Optional

Users in Sendbird Dashboard

Create at least two users in your application so they can chat with one another.

Add Sendbird UIKit Dependency

We will use an online integrated development environment (IDE) called codesandbox.io to mimic your development environment but you can feel free to directly start adding Sendbird UIKit dependencies to your application.

1. Set up environment

1. You can either go to codesandbox.io > click Create sandbox > select React.

OR

If you’re building chat in your application please run the following code to install sendbird-uikit.

npm install sendbird-uikit --save

2. You will be presented with 3 default files App.js, index.css, style.css.

App.js

Index.js

Style.css

2. Import sendbird-uikit dependency

1. Click Add dependency.

2. Search sendbird-uikit.

Adding Sendbird UIKit dependencies

Sendbird UIKit dependencies are connected

3. Import sendbird-uikit component

1. In App.js, add the following code

import { App as SendbirdApp } from 'sendbird-uikit'
import "sendbird-uikit/dist/index.css";

Connect Sendbird UIKit to your application and create a user

1. Add the following code in App.js file. This will create variables for applicationID and userID to be passed to the sendbird-uikit component.

• Pass the applicationID of the Sendbird application you created earlier in the dashboard to initialize the Sendbird Chat SDK.
• i.e. your applicationID will look similar to this: 45612F31-4304-4FC4-9FD9-C35B5FCDCE30

const APP_ID = "Your APP ID"
const USER_ID = "Any User ID"

2. Populate the channel list and the channel view

1. Add the following code to App.js.

2. For styling add the following code in style.css.

height: 100vh;

Test your integration

1. If you are working in codesandbox.io environment, your code should compile automatically and run for you.

2. If you are working in your local application, you will need to run the npm command.

npm start run

3. Create a channel.

You can now create a channel for users to chat in your application:

• Click the “+” button in the left section of the view to create a group channel.
• Invite users to the channel.

Create a channel

Add users to the channel

Open the channel

4. Send your first message

Try typing a message and hit send. You should be able to successfully send your first message in the newly built chat in your application.

Send your first message

Congratulations!

You are ready to send and receive messages in your application with Sendbird UIKit.

For additional information on UIKit, other JS SDKs and features, check out our JS docs.

That’s how easy it is to get chat up and running in your application. If you’re not building in JS,  get started with sending your first message with Sendbird UIKit for Android and iOS.

We’re rooting for you as you build something great.

Happy chat building!