This package has been deprecated

Author message:

Please use 'twilio-frame-chat' package instead

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

0.1.1 • Public • Published

Twilio 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 => {
            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 Frame

You can consume the library from NPM:

npm install twilio-frame

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="//"></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="//" type="text/css"></link>
<script src="//"></script>




npm i twilio-frame

DownloadsWeekly Downloads






Last publish


  • twilio-labs-ci