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 Platform API with your own custom UI.
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.
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:
Let’s get started!
1. Sign up for a free Sendbird account.
2. Create an account using your email id or Continue with Google.
3. Setup your Organization by entering Organization name and Phone number.
4. Create your Sendbird application after choosing Product type, and entering your Application Name, Region.
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.
1. Navigate to Users section in the left navigation of the dashboard.
2. Click Create user + icon on the top right.
3. Create a new user by filling out the following fields:
Create at least two users in your application so they can chat with one another.
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. 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
1. Click Add dependency.
2. Search sendbird-uikit.
1. In App.js, add the following code
import { App as SendbirdApp } from 'sendbird-uikit'
import "sendbird-uikit/dist/index.css";
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.
const APP_ID = "Your APP ID"
const USER_ID = "Any User ID"
1. Add the following code to App.js.
2. For styling add the following code in style.css.
height: 100vh;
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:
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.
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!