twilio-frame-chat
TypeScript icon, indicating that this package has built-in type declarations

0.3.1 • Public • Published

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>
  1. 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>

Readme

Keywords

none

Package Sidebar

Install

npm i twilio-frame-chat

Weekly Downloads

1

Version

0.3.1

License

MIT

Last publish

Collaborators

  • twilio-labs-ci