Programmable Chat Quickstart: Javascript

(error)

Programmable Chat deprecated

Programmable Chat has been deprecated and receives no support. Twilio has turned its focus to the next generation of chat: Twilio Conversations. Find out more about the EOL process.

To start a project, see Conversations.
To switch from Programmable Chat, see the Migration Guide to learn about how to switch.

This quickstart gets you up and running with a sample chat application you can build on as you learn more about Programmable Chat.

Gather account information

To set up your back-end for Chat, you need four values from your Twilio account:

Config Values	Description
Service Instance SID	A service instance where all the data for our application is stored and scoped. Generate one in the console here.
Account SID	Your primary Twilio account identifier - find this in the console here.
API Key	Used to authenticate - generate one here.
API Secret	Used to authenticate - just like the above, you'll get one here.

Download, configure, and run the starter app

Choose a download package for your server-side language of choice. If you're primarily a front-end developer and don't have a strong preference, Node.js will probably get you up and running the fastest.

Follow the instructions in the README for each starter application to configure and run it on your machine, using the four values we created above:

Explore the starter app

When you visit the homepage of the starter application, verify that everything looks good with your settings, and then click the green chat button at the bottom.

You have been assigned a random user identity and have joined a channel called general. If you open this page in another browser window or tab, you should be able to have a rousing conversation with yourself!

The HTML and CSS in the starter application aren't terribly interesting, but the JavaScript code driving this application has a few very important jobs:

Fetch an AccessToken from the server via Ajax
Initialize the Chat JavaScript SDK
Join a channel called "general"
Handle UI events to send messages or display new incoming messages

We explore how to manage your users in our user identity guide, how to generate an access token, and cover everything you can do with a channel object in the channels and messages guide.

Next steps

Now that you have completed the Chat quickstart, you can continue building your application. To learn how Programmable Chat works, see the user identity guide and the channels and messages guide.