By 
When building a video chat, Twilio Video provides you with the SDKs and APIs to build video apps that connect your users. However, it is un-opinionated about your interface. With a bit of CSS, we can create effects to make your video chat stand out.
In this post we'll see how to overlay items like a logo or a user's name over a video. Over the course of the post, we'll turn a plain video into something that looks like this:
Getting started
To create these effects we won't build an entire video chat. Instead, we'll take the Twilio Video library and use it to get the camera and put it on the page as if it was a video chat – then style that video.
Create three new files in the same directory to write this application in: index.html, script.js and style.css. Open index.html and fill in …
Under the strange circumstances of the coronavirus we have seen some wonderful stories of communities getting together virtually to support each other. One way to support a local community is to set up a message group so that neighbours can easily offer or ask for help. Doing this with a regular group message could get messy as it's a pain to add or remove people from a group message.
In this post we'll see how to use Google Sheets, Twilio Functions, and Programmable SMS to administer a community SMS broadcast group. We will create a Google Sheet that lists the people in our group and a phone number that can be used to contact all of them by SMS. When you send an SMS to the number it will forward that message on to everyone else in the group.
If you want to skip straight to the …
When you need to get a bunch of remote people to talk together, a conference call is the simplest way to do so. Everyone dials a number and in seconds they are talking to each other. In this post we'll build a conference line that anyone can join using Twilio and Ruby on Rails.
What you'll need
In order to build this conference line you will need:
- Ruby and Bundler installed
- A Twilio account (if you don't have one yet,sign up for a new Twilio account here and receive $10 credit when you upgrade)
- A Twilio phone number that can receive incoming calls
- ngrok for testing webhooks with our local application
With those tools gathered, we can get started.
Getting started with a Rails application
For this post we will create a new Rails app. If you want to add this capability to an existing application, you …
If you're building a mobile application and you need access to the user's contacts you wouldn't give it a second thought, but on the web this feature was missing. The Chrome team saw this gap and got to work on an API that makes users' contacts available to developers with the security and privacy expected on the web. That API is now available in Chrome 80 on Android M or later.
In this post we will investigate the new Contact Picker API and put it to use it in a Twilio Client application to add contact selection for making browser phone calls.
The Contact Picker API
The Contact Picker API consists of the ContactsManager object, available as the contacts property on the navigator object. As it is only supported on Chrome on Android for now, the first thing we should concern ourselves with is checking for support. We can do …
We've seen how to write a text chatbot using the Twilio API for WhatsApp using Ruby, but WhatsApp also supports sending and receiving location data via their API. In this post we are going to see how to build a WhatsApp bot that can receive and respond to location messages.
We'll build a weather bot so that you can send your location to the bot to get your local weather forecast.
What you'll need
To code along with this post and build your own location-aware WhatsApp bot you will need:
- Ruby and Bundler installed
- ngrok so we can expose our local endpoints so that we can receive incoming webhooks
- A WhatsApp account
- A free Dark Sky API account to make weather forecast requests
- A Twilio account (if you don't have one, sign up for a new Twilio account here and receive $10 credit when you upgrade)
Configure …
Chatbots are programs that communicate some way with humans. They can be very basic, responding to keywords or phrases, or use something like Twilio Autopilot to take advantage of natural language understanding (NLU) to provide a richer experience and build out more complicated conversations.
In this tutorial we are going to see how easy it is to get started building chatbots for WhatsApp using the Twilio API for WhatsApp and the Ruby web framework Sinatra. Here's an example of the conversation we're going to build:
What you'll need
To build your own WhatsApp bot along with this tutorial, you will need the following:
- Ruby and Bundler installed
- ngrok so we can expose our local …
The Web Speech API has two functions, speech synthesis, otherwise known as text to speech, and speech recognition, or speech to text. We previously investigated text to speech so let's take a look at how browsers handle recognising and transcribing speech with the SpeechRecognition API.
Being able to take voice commands from users means you can create more immersive interfaces and users like using their voice. In 2018, Google reported that 27% of the global online population is using voice search on mobile. With speech recognition in the browser you can enable users to speak to your site across everything from a voice search to creating an interactive bot as part of the application.
Let's see how the API works and what we can build with it.
What you'll need
We're going to build an example app to experience the API, if you want to build along …
There are plenty of opportunities for friction in the user experience when logging in, particularly while entering a two factor authentication code. As developers we should be building applications that support the need for account security but don't detract from the user experience. Sometimes it can feel as though these requirements are in a battle against each other.
In this post we will look at the humble <input> element and the HTML attributes that will help speed up our users' two factor authentication experience.
The default experience
When you implement two factor authentication for a web application, perhaps with the Authy two factor authentication API, you will need a form for your user to input the one time password you are going to send them. You might create something similar to the following HTML:
<form action="/sessions/check-2fa" method="POST"> <div> <label for …
It happened! I've been waiting for the moment I needed to send a fax since Twilio launched the Programmable Fax API back in 2017 and this week it finally happened! I won't go into detail about what I needed to send, but it's safe to say the medical profession could consider their communication choices for the future.
I could have sent the fax by uploading a PDF to Twilio Assets and using the API explorer, but that wouldn't have been as fun as over-engineering an entire application to send and track the fax to make sure it arrived and be prepared for any future fax situations.
In this post I'll share how to build an application for sending and tracking faxes, but if you have faxes to send and want to jump straight into using it, you can find all the source code on GitHub.
Weapons of choice …
When your application sends emails it is useful to know what happens to those emails, like whether it has been delivered or opened. Or, sometimes more importantly, whether it bounced. The Twilio SendGrid email API doesn't just send emails, it can also send you events via webhook that tell you what happened to your emails.
In this post we'll build a small application using Ruby on Rails to send emails and update their status based on the Twilio SendGrid event webhooks.
What you'll need
In order to build this application along with this post, you will need:
- Ruby and Bundler installed
- ngrok - my favourite way to tunnel webhooks to my local machine
- A Twilio SendGrid account (if you don't have one, you can sign up for a free SendGrid account now)
If you have all of that, then you're ready to get building.
Preparing the example application
I …