0.3.1 • Published 7 years ago
twilio-frame-chat v0.3.1
Twilio Chat Frame
Chat Frame
Chat Frame is a library to help you bootstrap Twilio Chat SDK and render a Channel using only a few lines of code.
Instantiating and using Chat Frame
To use the Chat Frame you need to have a Twilio Programmable Chat Client instance and a Channel instance from it. You can use the Twilio Programmable Chat SDK to create and join channels.
Chat Frame instantiation and loading looks as follows, just make sure you have a div with id "chatContainer" where the Chat Frame will be loaded:
function loadFrame(client, channel) {
// Configuration for Chat Frame
const frameConfiguration = {
channel: {
chrome: {
closeCallback: channelSid => {
chatFrame.unloadChannelBySid(channelSid);
}
},
visual: {
colorTheme: 'DarkTheme'
}
}
};
// Create the Chat Frame instance
const chatFrame = Twilio.Frame.createChat(client, frameConfiguration);
chatFrame.loadChannel(containerSelector, channel);
}
// Create a Chat Client
Twilio.Chat.Client.create(token).then(client => {
// Add channel joined listener
client.on('channelJoined', channel => {
loadFrame(client, channel);
});
// Create a new channel
return client.createChannel();
})
// Join the created channel
.then(channel => {
return channel.join();
});
Consuming Chat Frame
You can consume the library from NPM:
npm install twilio-frame-chat
For browser you can use the version from CDN. There are two packages: 1. Frame bundle which includes the JS code and CSS style sheet.
<script src="//media.twiliocdn.com/sdk/js/frame-chat/v0.3/twilio-frame-chat.bundle.min.js"></script>
- Frame JS and CSS style sheet as separate files. You need to include CSS style sheet separately (or create your own).
<link rel="stylesheet" href="//media.twiliocdn.com/sdk/js/frame-chat/v0.3/twilio-frame-chat.css" type="text/css"></link>
<script src="//media.twiliocdn.com/sdk/js/frame-chat/v0.3/twilio-frame-chat.min.js"></script>