Menu

Expand
Rate this page:

Programmable Chat Quickstart: Javascript

Programmable Chat will no longer be available or supported after July 25, 2022. Instead, we'll be focusing on the next generation of chat: Twilio Conversations. Find out more about the EOL process here.

If you're starting a new project, please visit the Conversations Docs to begin. If you've already built on Programmable Chat, please visit our Migration Guide to learn about how to switch.

In this guide, we will get you up and running quickly with a sample chat application you can build on as you learn more about Programmable Chat. Sound like a plan? Then let's get cracking!

Gather account information

The first thing we need to do is grab all the necessary information from our Twilio account. To set up our back-end for Chat, we will need four values from our 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

This is where the fun begins! 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:

  1. Fetch an AccessToken from the server via Ajax
  2. Initialize the Chat JavaScript SDK
  3. Join a channel called "general"
  4. 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.

Get Help

Need some extra help? Send us a note at help@twilio.com, and we'll make sure to get you running just as quick as we can. Have fun building with Chat, and make sure to let us know what you're building!

Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.

        
        
        

        Thank you for your feedback!

        Please select the reason(s) for your feedback. The additional information you provide helps us improve our documentation:

        Sending your feedback...
        🎉 Thank you for your feedback!
        Something went wrong. Please try again.

        Thanks for your feedback!

        Refer us and get $10 in 3 simple steps!

        Step 1

        Get link

        Get a free personal referral link here

        Step 2

        Give $10

        Your user signs up and upgrade using link

        Step 3

        Get $10

        1,250 free SMSes
        OR 1,000 free voice mins
        OR 12,000 chats
        OR more