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
  • By Ashley Boucher
    Send an SMS with Svelte and Twilio Functions sveltesms.png

    In this article you’ll learn how to send an SMS from your Svelte app. Because Svelte is a client-side framework, you’ll need to have a backend server that can handle sending the message, otherwise your Twilio credentials would be exposed. For this, you’ll create an API using Twilio Functions.

    To demonstrate these concepts, you’ll build a Svelte app with a button. When the button is clicked, a POST request will be made to your API. The API will send a message and then return a response back to your Svelte app.

    Prerequisites

    In order to follow along with this tutorial, you’ll need these tools and technologies:

    • npm or yarn
    • Node.js installed on your machine
    • If you’re using VS Code, you might want to snag this Svelte extension
    • A free Twilio account (if you sign up with this link, we’ll both get $10 in Twilio credit when you upgrade!)
    • A …
    Read More
  • By Ashley Boucher
    React vs. Svelte: Comparing the Basics svelte vs react.png

    When it comes to JavaScript frameworks, Svelte is the new kid on the block. I’ve been hearing a lot of buzz about it, so I decided to give it a try and see how it feels compared to React.

    This article is going to talk a little bit about the differences between Svelte and React, and then show you how to build a basic app with both frameworks. The goal is to demonstrate a few core concepts that cover:

    • Structuring components
    • Initializing state
    • Passing props
    • Lifting state
    • Event listeners
    • Dynamic styling

    There’s a lot more to discuss, including conditional rendering, lifecycle methods, and other cool concepts, but for this article I’ll focus on the basics and give my gut check feeling along the way.

    Prerequisites

    To get started with this tutorial, you should have the following tools and technologies ready to go:

    Read More
  • By Ashley Boucher
    Sending WhatsApp Notifications with Templates: Initiate Messages with Node.js whatsapp_notifications.png

    To initiate a conversation with your user using WhatsApp, one of the following two conditions must apply:

    WhatsApp message templates are message formats that have been pre-approved by WhatsApp. These pre-approved message formats can leave space for “dynamic content”, or customizations, that are relevant to your recipient, like specific appointment times, receipt totals, etc.

    Once a user has opted in and agreed to receive communications from you via WhatsApp, you’re allowed to send them notifications using message templates whenever you want to. These message templates have strict requirements that disallow marketing, promotional, or subscription type content.

    A message template with a clear purpose, however, can help you initiate two-way conversation with your user. Once your user has replied, a 24-hour window opens in which you’re allowed to send them free form …

    Read More
  • By Ashley Boucher
    Building Twilio Apps with React: A Guide for Frontend Developers react.png

    Of all the JavaScript application frameworks, React.js continues to be the most popular among JavaScript developers.

    For developers building Twilio apps, however, learning how to make use of the different Twilio JavaScript SDKs inside React can be a complex process, and there aren’t always easy answers.

    In this post, you’ll get a birds eye view of the different Twilio JavaScript SDKs and see examples of how you can utilize them in a React app to make your next project easier.

    Prerequisites

    To make the most of the resources in this post, you should have:

    • A free Twilio account (if you sign up with this link, we’ll both get $10 in Twilio credit when you upgrade your account)
    • A working knowledge of React
    • Node.js installed on your machine
    • npm, yarn, or another package manager

    The Twilio JavaScript SDKs

    Twilio offers several JavaScript SDKs that are used to develop …

    Read More
  • By Ashley Boucher
    Quit talking over each other! Muting and Unmuting in your Twilio Programmable Video App with React.js muteunmute (1).png

    An important part of any video calling app is the participants' ability to mute and unmute themselves. In this article, you will learn how to add this functionality to a React video chat app powered by Twilio Programmable Video.

    Prerequisites

    To make the most of this tutorial, you’ll need to have the following tools, technologies, and accounts:

    Project installation and configuration

    Clone the repository

    This tutorial is an extension of the Build a Custom Video Chat App with React article. If you followed that post, you can use the code you wrote for that project (but there is updated CSS in the GitHub repo). Otherwise, you’ll want to clone the starter project from GitHub:

    git clone https://github.com/ahl389/video-chat-base.git
    cd …
    Read More
  • By Ashley Boucher
    Add Muting and Unmuting to Your Video Chat App in 30 Seconds muteunmute.png

    Part of developing a high quality video call app is enabling participants to mute and unmute themselves as needed on the call.

    This article is going to show you the way to make this happen in your Twilio Programmable Video apps that are built with the JavaScript SDK. You won’t be learning how to build a video chat app from scratch, but you will learn how to implement muting and unmuting quickly in your own app.

    The basics of Tracks

    Every participant in a video room can publish an audio and/or video track that captures the stream from their local media device (like a webcam or microphone) and sends it to all other participants on the call that are subscribed to those tracks. Don’t worry - these subscriptions happen automatically, unless otherwise specified. Tracks are how participants can see and hear each other on a call.

    Access …

    Read More
  • By Ashley Boucher
    Add Holiday Themed Filters and Overlays to Your React Video Chat App with Twilio's DataTrack API holiday.png

    This article is going to teach you how to use the Twilio Programmable Video DataTrack API to add shareable holiday themed filters and overlays to your React video chat app. You’ll be provided with some holiday themed overlays as you carry out the tutorial, but you can apply this knowledge to make any type of filter or overlay!

    You won’t be building a new video chat app from scratch, but adding to a basic video chat app that already exists instead.

    Prerequisites

    Before moving forward, make sure you have the following accounts and tools:

    Project set up

    Clone the repository

    Your first step is to clone the existing video chat app from GitHub. Alternatively, if you followed along with the Build a Custom Video Chat App article, you can use the code you wrote …

    Read More
  • By Ashley Boucher
    Build a Custom Video Chat App with React and Twilio Programmable Video videochat.png

    In this article you’re going to build a group video chat web app with React and Twilio Programmable Video. Video chat is a great way to keep in touch with your friends, family, and colleagues, and with this post you’ll learn the basics of how to build a custom video chat app that’s perfect for you.

    Prerequisites

    The project described in this article has two parts:

    1. A React.js frontend
    2. A backend written with any language or platform.

    The backend will be used to generate an Access Token which grants authorization to users of the app, while the frontend handles all the video chat logic using Twilio Programmable Video’s JavaScript SDK. Building the backend won’t be covered in this post, but Node.js users can review these thorough instructions …

    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

    • A free Twilio account (if you sign up with this link, we'll both get $10 in Twilio credit when you upgrade)
    • Node.js and npm

    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 in …
    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
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.