Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now
Build the future of communications.
Start building for free

JavaScript posts

  • By Huzaima Khan
    Build a Chat App with Twilio Programmable Chat and React.js chatapp.png

    This tutorial will teach you how to build a chat app in React using Twilio’s Programmable Chat API. After finishing this tutorial, you will have developed a web app to chat with other participants.

    Prerequisites

    Getting started

    React project setup

    Create a new directory on your computer called chat-app and change directory into it:

    mkdir chat-app
    cd chat-app
    

    Your new chat-app directory will house both the backend and frontend components of the app. To create a new React project for the frontend, run the following command in your terminal:

    npx create-react-app react-chat
    

    Change directory to the newly crea …

    Read More
  • By Rachel Black
    Building an SMS notification service with Serverless. Using Node.js, Serverless and Twilio’s SMS API to write a notification service for Ethereum gas prices.

    Ethereum is a blockchain with a cryptocurrency. As with Bitcoin, it costs users to send ethereum transactions, or interact with a smart contract (an on chain programme). The cost of these transactions is called gas, and the price can vary depending on usage. If lots of people are using the network, gas prices can get very high. Read more on gas prices, and how they skyrocketed earlier this summer here. Savvy users wait for lower gas prices to interact with Ethereum smart contracts. Twilio’s SMS API is the perfect tool to keep you updated on prices.  I am going to show you how to write a serverless application to send SMS notifications when gas fees are below a certain level.

    If you aren’t interested in gas prices, the flow in this tutorial can be used to query and connect any https REST api via Serverless to Twilio’s SMS api. …

    Read More
  • By Ashley Boucher
    How to Send a WhatsApp Message in 30 Seconds with JavaScript whatsapp.png

    Just like Memphis Raines figured out how to steal fifty cars in one night, you’re going to learn how to send one WhatsApp message in thirty seconds (using JavaScript!).

    Buckle up, cause here we go.

    GIF of Nicholas Cage in Gone in Sixty Seconds saying "Okay let's ride"

    Prerequisites

    Get your development environment setup

    Create a new directory on your computer, change into it, and initialize a new Node.js project:

    mkdir whatsapp
    cd whatsapp
    npm init -y
    

    Install the Twilio Node Helper Library and the dotenv package:

    npm install twilio dotenv
    

    Create two new files inside your new whatsapp directory:

    touch index.js && touch .env
    

    Open the .env file and add two environment variables to sto …

    Read More
  • By Ashley Boucher
    Generate an Access Token for Twilio Chat, Video, and Voice using Twilio Functions accesstoken.png

    Twilio offers client-side software development kits (SDKs) for several of its products including Programmable Video, Programmable Voice, Programmable Chat, and Conversations.

    To make use of these SDKs, you need to generate Access Tokens. As described in the Twilio docs, Access Tokens are short-lived tokens to authenticate Twilio Client SDKs like Voice, Chat and Video. You create them on your server to verify a client's identity and grant access to client API features.

    In this article you’ll learn how to generate an Access Token using Twilio Functions. You’ll be able to replicate this setup again and again in your future projects, allowing you to save time and focus on the fun stuff!

    Prerequisites

    Install dependencies

    Your first goal is to get setup with Twilio Functions. Twilio Functions …

    Read More
  • By Miguel Grinberg
    Add Text Chat To Your Video Calls With The Twilio Conversations API Add Text Chat To Your Video Calls With The Twilio Conversations API

    If you implemented a video calling application using the Twilio Programmable Video API, you may find that during a call you want to share textual information with the other participants. This could be a link to a document, or even a reaction emoji. In this article you are going to learn how to take your video application to the next level by adding a chat room with the Conversations API.

    Video call with chat demo

    Tutorial requirements

    This is the third article in my series of Programmable Video tutorials, so we are going to take advantage of the video chat application built in the previous two installments and add the chat room feature to it. This application uses a vanilla JavaScript front end and a Python back end. To run this application on your computer you need the following requirements:

    • Python 3.6 or newer. If your operating system does not provide a Python …
    Read More
  • By Isabel Hildebrand
    Sending Automated Congratulations with Google Sheets, Twilio, and n8n n8n-congrats (1).png

    It was your colleague’s, relative’s, or friend’s birthday, but in between all your busy day-to-day operations you missed an opportunity to send them a heartwarming message? You want to automatically send birthday messages to all your regular customers, but you don’t know how to?

    Why not hand over this task to an n8n (pronounced “n-eight-n”) workflow? n8n provides extendable workflow automation that integrates with over 90 different apps, including Twilio Messaging.

    In this post you’ll learn how to automate sending personalized congratulations and never forget a birthday and anniversary again. You won’t need to do any programming to build the solution: n8n provides a visual workflow designer and Twilio Messaging can be set up from the Twilio user interface.

    You’ll enter your contact list for congratulation messages in Google Sheets to keep the maximum flexibility. As your list of contacts grows and the variety of messages you send increases …

    Read More
  • By Miguel Grinberg
    Build a Multi-Room Web Chat Application with Flask, React and Twilio Conversations Build a Multi-Room Web Chat Application with Flask, React and Twilio Conversations

    The Twilio Conversations API is a great way to build a unified messaging solution that works across SMS, MMS, WhatsApp, web and mobile chat. In this tutorial you will learn the basics of the Conversations API by creating a web chat application with support for multiple chat rooms.

    Project demo

    The main features of the application we will build are:

    • A Flask backend that logs users in.
    • A command-line interface to manage your chat rooms.
    • A Rect front end that allows your users to chat on the different chat rooms.

    Requirements

    To follow this tutorial you need the following components:

    • Python 3.6 or newer. If your operating system does not provide a Python interpreter, you can go to python.org to download an installer.
    • Node.js 14 or newer. Review the installation instructions for your operating system.
    • The Yarn package manager for Node.js. Review the installation instructions for your operating system.
    • A Twilio account. …
    Read More
  • By Fikayo Adepoju
    An Introduction to Building Desktop Applications with Electron electron.png

    Slack - (almost) the defacto team collaboration software, Visual Studio Code - one of the most popular code editors on the market at the time of writing, and the desktop version of WhatsApp all have one thing in common: they were all built with Electron.js. With these powerful companies adopting Electron.js over native desktop software development methods, Electron.js has established itself as a trustworthy framework for developing desktop applications.

    In this tutorial, you will learn what Electron.js is all about and how you can use it to power your next amazing idea.

    At the end of this tutorial, you will have developed a desktop application that:

    • Is built from the ground up with web technologies
    • Communicates between the Main and the Renderer processes
    • Makes use of Electron.js APIs to access features that are not available in the browser API
    • Displays desktop notifications

    Project Requirements

    Get to Know Electron.js

    Simply …

    Read More
  • By Jamie Corkhill
    Integrate TypeScript with Twilio Functions and Twilio Programmable SMS typescript.png

    Sometimes, when cost, resources, and time-to-market are factors, it can be worth considering going the serverless route. And, if a development team has decided upon a Node.js stack for the back-end, the benefits of TypeScript are enormous for safety, developer productivity, and new developer onboarding.

    TypeScript is an extension of pure JavaScript - a “superset”, if you will - and adds static typing to the language. It enforces type safety, makes code easier to reason about, and permits the implementation of classic patterns in a more “traditional” manner. As a language extension, all JavaScript is valid TypeScript, and TypeScript is compiled down to JavaScript.

    With Twilio Functions, you can easily create “serverless” applications that are natively integrated with the Twilio ecosystem. That means support for SMS messages, for example, is first-class. You won’t have to manage infrastructure or provision servers, and you can very quickly move from development to production. …

    Read More
  • By Sam Agnew
    Getting Started with OpenAI's GPT-3 in Node.js Copy of Generic Blog Header 3(3).png

    OpenAI's API for their new GPT-3 model provides a very versatile, general-purpose “text in, text out” interface, making it applicable to virtually any language task. This is different from most other language APIs, which are designed for a single task, such as sentiment classification or named entity recognition.

    Let's walk through how to unlock the capabilities of this API with Node.js.

    Taking care of dependencies

    Before moving on, you will need an up to date version of Node.js and npm installed.

    Navigate to the directory where you want this code to live and run the following command in your terminal to create a package for this project:

    npm init --yes
    

    The --yes argument runs through all of the prompts that you would otherwise have to fill out or skip. Now that we have a package.json for our app, run this command in the same directory to install the Got …

    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.