Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

Integrate a Custom Chat Client with Flex


(information)

Info

This guide is for Flex UI 1.x and channels that use Programmable Chat and Proxy. If you are using Flex UI 2.x or you are starting out, we recommend that you build with Flex Conversations.

You may have already built a custom chat experience with Programmable Chat or from scratch. You can integrate these chat experiences with Flex and hand off incoming Chat messages to your agents.

(information)

Info

Custom chat integrations require a Flex Flow ChannelType of custom.


How to Integrate Your Chat Application with Flex

how-to-integrate-your-chat-application-with-flex page anchor

First, initialize the Twilio Chat SDK using an access token that links a user with a unique identity - for example: abc123. The Chat SDK is going to help you pass messages back and forth with Flex.

(warning)

Warning

Make sure this identity uniquely identifies your end user and avoid using personally identifiable information like names.

Creating an Access Token (Chat)

creating-an-access-token-chat page anchor
Node.js
Python
C#
Java
Go
PHP
Ruby

_32
const AccessToken = require('twilio').jwt.AccessToken;
_32
const ChatGrant = AccessToken.ChatGrant;
_32
_32
// Used when generating any kind of tokens
_32
// To set up environmental variables, see http://twil.io/secure
_32
const twilioAccountSid = process.env.TWILIO_ACCOUNT_SID;
_32
const twilioApiKey = process.env.TWILIO_API_KEY;
_32
const twilioApiSecret = process.env.TWILIO_API_SECRET;
_32
_32
// Used specifically for creating Chat tokens
_32
const serviceSid = process.env.TWILIO_CHAT_SERVICE_SID;
_32
const identity = 'user@example.com';
_32
_32
// Create a "grant" which enables a client to use Chat as a given user,
_32
// on a given device
_32
const chatGrant = new ChatGrant({
_32
serviceSid: serviceSid,
_32
});
_32
_32
// Create an access token which we will sign and return to the client,
_32
// containing the grant we just created
_32
const token = new AccessToken(
_32
twilioAccountSid,
_32
twilioApiKey,
_32
twilioApiSecret,
_32
{identity: identity}
_32
);
_32
_32
token.addGrant(chatGrant);
_32
_32
// Serialize the token to a JWT string
_32
console.log(token.toJwt());

Now you need to:

  1. Ensure you have a relevant Message Handler. You can add Studio to the communication flow, immediately create a task, or do something else entirely depending on how you've configured your Flex Flow .
  2. Create a Flex Chat Channel (or reuse one if this is a return customer and you're using Long Lived channels)

    1. Creating a Channel will also automatically create a Chat User and place it in the Channel.

This configuration could require a minimum of four API requests, but with Flex you can do everything with a single request to Flex Chat Channels API.

Create a Flex Chat Channel

create-a-flex-chat-channel page anchor
Node.js
Python
C#
Java
Go
PHP
Ruby
twilio-cli
curl

_16
// Download the helper library from https://www.twilio.com/docs/node/install
_16
// Find your Account SID and Auth Token at twilio.com/console
_16
// and set the environment variables. See http://twil.io/secure
_16
const accountSid = process.env.TWILIO_ACCOUNT_SID;
_16
const authToken = process.env.TWILIO_AUTH_TOKEN;
_16
const client = require('twilio')(accountSid, authToken);
_16
_16
client.flexApi.v1.channel
_16
.create({
_16
target: 'abc123',
_16
identity: 'abc123',
_16
chatUserFriendlyName: 'Jane',
_16
chatFriendlyName: 'Chat with abc123',
_16
flexFlowSid: 'FOXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
_16
})
_16
.then(channel => console.log(channel.sid));

Output

_10
{
_10
"flex_flow_sid": "FOXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
_10
"account_sid": "ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
_10
"sid": "CHXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
_10
"task_sid": "WTXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
_10
"user_sid": "USXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
_10
"date_created": "2016-08-01T22:10:40Z",
_10
"date_updated": "2016-08-01T22:10:40Z",
_10
"url": "https://flex-api.twilio.com/v1/Channels/CHXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
_10
}

Bringing it all together

bringing-it-all-together page anchor

Now you can use the Twilio Chat SDK to manage communications on the Chat Channel you created with Flex:

  • When a message comes in , you'll receive a messageAdded event and can render it in your custom UI.
  • When you need to send a message , the SDK includes a sendMessage() method that you can use to publish media over the Twilio Chat Channel.

Rate this page: