Qiscus SDK helps you build Web Chat Application easy and fast. It uses qiscus server backend for the API.
There's two version of the SDK. The SDK Core Only version which you can use to build a custom chat app without opinionated view layer.
The other version is the one with View
layer already integrated in it (in this case we're using VueJs, other view layer already on TODO list).
You can download files you need by navigating to the release section.
You can get AppId
by registering one from dashboard.qiscus.com
This version let you add a chat widget directly into your existing HTML web pages.
You just need to include the javascript and css files from the build directory.
And you also need to append <div id="qiscus-widget"></div>
tag before closing body tag. Here's sample HTML:
You can just copy and paste this into your html file and it'll work directly.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css>
<link rel="stylesheet" type="text/css" href="https://s3-ap-southeast-1.amazonaws.com/qiscus-sdk/web/v1.7.3/css/qiscus-sdk.1.7.3.css">
<!-- add this CDN for emojione if you intend to support emoji -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/lib/js/emojione.min.js"></script>
</head>
<body>
<div id="qiscus-widget"></div>
<script src="https://s3-ap-southeast-1.amazonaws.com/qiscus-sdk/web/v1.7.3/js/qiscus-sdk.1.7.3.js"></script>
<script>
qiscus.init({
AppId: 'DRAGONGO',
options: {
// When we're success login into qiscus SDK we'll have a 1-on-1 chat to guest2@qiscus.com
// You can change this to any user you have on your AppId, e.g: contact@your_company.com, etc
loginSuccessCallback(data) { qiscus.UI.chatTarget('guest2@qiscus.com') },
// function below will be called when there's new message
newMessagesCallback(data) { console.log("new message : ", data) }
}
});
qiscus.setUser('guest@qiscus.com', 'password', 'Qiscus Demo');
</script>
</body>
</html>
We're using two CDN here, one for emoji support and one for the icon, in this case we're using FontAwesome. The emojione is optional though.
If you already registered for your own AppId, just replace dragongo
with your own AppId
. In the example above we automatically open a chat roow with guest2@qiscus.com
assuming that user already registered on dragongo
AppId, if the user is not registered then it will be failed.
On the code snippet above, we can pass several callbacks to init options, in the example we're using loginSuccessCallback
which will be called when login is success. It'll automatically open 1-1 chat room with guest2@qiscus.com
. There's also newMessagesCallback
where in the example it just log what the messages are.
Here are list of available callbacks:
- loginSuccessCallback
- loginErrorCallback
- newMessagesCallback
- chatRoomCreatedCallback
- groupRoomCreatedCallback
- headerClickedCallback
Here's a video showing how you can set up sample app for qiscus SDK
The javascript file introduce a new global variable called qiscus
. We'll use that to initiate our chat widget.
qiscus.init({
AppId: 'DRAGONGO',
options: {
// put your callback here, see below on list of available callbacks
loginSuccessCallback(data) { },
newMessagesCallback(data) { }
}
});
qiscus.setUser ( email, key, username, avatar_url )
email
email used by currently logged in userkey
secret key for current userusername
username to be displayed to other participantavatar_url
user avatar, fallback to default avatar if not provided
How to use:
qiscus.setUser('guest@qiscus.com', 'password', 'Qiscus Demo');
qiscus.setUser('guest@qiscus.com', 'password', 'Qiscus Demo', 'https://imageurl.com/image.png');
Same like above, you need to call the setUser
method then re-init the SDK by calling qiscus.init
(see below)
qiscus.UI.chatTarget('guest2@qiscus.com')