Create React App is a great tool for getting a React application up and running. It's a little less clear when you're building or prototyping an application that requires a server side component, like generating access tokens for Twilio Video or Chat, though. I've found it easiest to work with a server within the same project so that you can start everything up with one command.

By the end of this post you will learn how to set up an Express server that runs alongside a React app. If you can't wait then you can jump straight into the starter project on GitHub.

How it works

There is an option that you can set in Create React App's package.json that proxies non text/html requests through to an alternative back end. You can use this feature to proxy to applications running elsewhere, but today we want to be ...

Call tracking involves saving a phone number and recording related the information about the calls made by that number. The metrics can then be used to measure the impact of marketing efforts on lead generation and sales.

Say that you are an entrepreneur or the marketing head of an organization and your main source of leads are phone calls. To spend your marketing dollars wisely, you will have to know which of your campaigns generate the maximum number of calls. This can be done using a call tracking system.

Call tracking systems used to be very expensive and cumbersome. However, in this blog post we will create an easy call tracking system that combines the powers of Twilio and Google Analytics to give you a very detailed picture of the calls and locations of these calls.

Configuring Google Analytics

Start by logging into your Google Analytics account or signing up ...

The Web Audio API is a powerful browser API for creating, manipulating and analysing audio. I'm no musician, so I'll leave the creating and manipulating to the experts. Instead, in this post we're going look at analysing audio. To make things extra interesting, we're going to see how to visualise the audio in a React component with <canvas>.

When we're done we'll have a React application that can listen to the microphone on your computer and show a waveform to visualise the data.

Getting started

We'll need Node.js to run the application, so make sure you have it installed. I've started the application for us, so follow these instructions to get it running:

1. Clone or download the repo from GitHub

1. Change into the directory and install the dependencies with npm

1. Start the application

With Twilio’s services you can manage your own group SMS application for Scheduling business meetings, planning wedding activities, parties, or a dinner get together. A friend of mine uses group SMS for family communications among his siblings and parents.

Don’t like Facebook? Or someone you want to include in your group doesn’t use Facebook or WhatsApp? No worries, use SMS. Yes, everyone with a mobile phone has an SMS app because your phone comes with an SMS app. You’re Group SMS app ready for group messaging.

The blog, How To: Set Up SMS Broadcasts in Five Minutes, says, “SMS messages are opened 98% of the time within minutes of being received. When you need to reach your constituents quickly and consistently, there’s no better medium than SMS.”

This blog gives you the configuration steps to communicate quickly and effectively with your friends, colleagues or customers ...

Vue.js is a powerful and approachable JavaScript framework that focuses on building user interfaces. One of the reasons why I like Vue is because it is easily adoptable. In this article, I will show you how to build a video chat application using Vue.js and Twilio Programmable Video. In the app, the participants will provide a username to get access to the chat app, then join a room (on the left of the screenshot below) to start chatting.

Here is a preview of what we'll be building:

Prerequisites

Basic knowledge of the following will be useful, but extensive knowledge is not required:

• Vue.js
• JavaScript
• Node.js (version 8 or above)

Before you continue, make sure you have Node.js installed on your system.

Getting Your Twilio API Keys

The first step to using Twilio Programmable Video chat is to get an access token. Twilio will generate a ...

The npm ecosystem is vast by now with almost 750k packages published. Naturally, you’ll find yourself often trying to look up a package you don’t remember. The npm search is great for that but what if you just want to quickly look up a package on the go? Let’s build a bot that can look up the packages for us using Twilio’s API for WhatsApp integration.

Requirements

Just like with Twilio Programmable SMS we’ll need a webhook that will respond to incoming HTTP requests with every message sent to our WhatsApp bot. The webhook then has to reply with TwiML to reply to these messages.

We’ll build our webhook using Twilio Functions. This allows us to write Node.js code and host it in a serverless function directly on Twilio.

To get started make sure you have:

• A Twilio account (sign up for a ...

I 💖 emojis, so when I heard about the new Twilio API for WhatsApp I wanted to build something emojiriffic. Inspired by Monica Dinculescu’s to_emoji Twitter bot and emoji translator I decided to build a WhatsApp text-to-emoji translator. You can try it out now by sending your message to our WhatsApp number +441745472072.

Here’s how you too can build this app.

🛠 Tools

I decided to build this project using Node.js, following in the footsteps of Monica’s projects. WhatsApp messages via Twilio result in webhooks, much the same as receiving an SMS message to a Twilio number, so if you’ve built a Twilio SMS application before this will be familiar. For ease of deploying this, I’m going to build this as a Twilio Function.

If you want to follow along with building the emoji translator you’ll need:

• A Twilio account (sign up for a free ...

Twilio Sync for IoT provides two sets of API to build end-to-end experiences with your embedded and wearable devices using the same Sync primitives used for mobile devices and web browsers. Sync for IoT lets you expand your real time applications to the Internet of Things. 

Let’s set up the demo system shown in the main photo, which includes a browser interface and an ESP32 board with a humidity and temperature sensor attached. We’ll use JavaScript, Node.js, the Twilio Sync Rest API and the Twilio Sync JavaScript Client Library to interact with the Sync resource on our IoT device and our web server and browser clients at the same time.

If you just want to see the finished code, see this Github repository. It has been verified to work with Chrome, Firefox and IE and with an ESP-wrover-kit.

Prerequisites for Our Sync for IoT Build

To follow ...

Two years ago, Alexander Kallaway created an online movement called #100DaysOfCode. The purpose was to get out of “tutorial purgatory” and start building real projects to advance himself as a programmer.

The challenge is simple: commit to coding for 100 days and tweet about your progress using the hashtag #100DaysOfCode. Sounds fun, right?

It totally is, until you lose track of what day you’re on. That’s where this comes in. We’re going to build a simple Node app using Twilio, Firebase and Twitter to help you easily track your progress.

Prep Local Environment

The very first thing we’re going to want to do is install Node v8.11.3 and npm v5.6  – link to installation. The reason we’re using Node is because we’re going to be working with multiple APIs and working on the server-side. Node provides a great JavaScript-powered backend.

Before we ...

Access to customer context is key to a great customer experience in voice and messaging flows. As it lets you customize your interactions specific to that customer and address their needs promptly.

In this blog post, we will walk through the steps involved in connecting to Salesforce CRM database with Twilio Studio. This means, that when a customer calls into your contact center, in realtime, we can ask the CRM for more details about the caller based on their phone number.  With this additional context, we can present an IVR tailored to their needs or use that information to intelligently route their call.

Before we get started, if you haven’t yet used Studio, I recommend taking a look at this getting started with Studio guide.

Flows in Studio are built with widgets which is a state or transition in our flow. In this post we will mainly use the ...