This is a sample chat widget built using using the SendBird SDK. It can be used to add a functional chat widget to any website.
You can try out a live demo from the link here. Click on the button at the bottom-right corner of the webpage to try out the widget. Choose any 'User ID' and 'Nickname' to log in and participate in chats.
- The
body
must have adiv
element whose id issb_widget
.
<body>
<div id="sb_widget"></div>
</body>
- Import the
SendBird SDK
. - Import the
widget.SendBird.js
file.
<script src="SendBird.min.js"></script>
<script src="build/widget.SendBird.js"></script>
If you refresh your browser window, you need to reconnect to SendBird. To retain connection on browser refresh, you must implement an appropriate event handler
.
If you wish to issue an access_token
for your user, modify the connect function
in src/sendbird.js
.
Require that you have Node installed.
-
Install npm
npm install
-
Modify files.
npm run start-dev
-
Start sample.
npm start
If you want to connect other application, you need to change variable appId
in index.html
.
...
<script src="SendBird.min.js"></script>
<script src="build/widget.SendBird.js"></script>
<script>
var appId = '<APP_ID>';
sbWidget.start(appId);
</script>
</html>
If you want to start this sample with user connect, you can using startWithConnect()
.
...
<script src="SendBird.min.js"></script>
<script src="build/widget.SendBird.js"></script>
<script>
var appId = '<APP_ID>';
var userId = '<USER_ID>';
var nickname = '<NICKNAME>';
sbWidget.startWithConnect(appId, userId, nickname, function() {
// do something...
});
</script>
</html>
If you want to open chat, you can using showChannel()
.
...
var channelUrl = '<CHANNEL_URL>';
sbWidget.showChannel(channelUrl);
...
|-- build
|-- widget.SendBird.js - SendBird Widget Bundle file
|-- node_modules
|-- ... - (node packages)
|-- src
|-- js
|-- elements
|-- elements.js - elements root class
|-- spinner.js - spinner element
|-- widget-btn.js - widget button element
|-- popup.js - popup element
|-- list-board.js - channel list element
|-- chat-section.js - chat element
|-- consts.js - const variables
|-- utils.js - util functions
|-- sendbird.js - sendbird functions
|-- widget.js - widget functions
|-- scss
|-- mixins
|-- _border-radius.scss - border radius mixin
|-- _box-shadow.scss - box shadow mixin
|-- _state.scss - element state mixin
|-- _transform.scss - transform mixin
|-- _reset.scss - clean css mixin
|-- _mixins.scss - import mixin
|-- _variables.scss - css variables
|-- _animation.scss - animation
|-- _icons.scss - icon
|-- widget.scss - main css
|-- .eslintrc.js - lint setting
|-- webpack.config.js - webpack setting
|-- package.json - npm package
|-- SendBird.min.js - SendBird SDK
|-- index.html - sample file
|-- README.md