Set up a React app with a Node.js server proxy
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.
How it works
There is an option that you can set in Create React App's
package.jsonthat proxies non
text/htmlrequests through to an alternative back end. You can use this feature to proxy to applications running elsewhere, but today we want to be ...
How to Capture Call Tracking Metrics in Google Analytics with Twilio Programmable Voice
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 ...
Audio visualisation with the Web Audio API and React
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
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.
- Clone or download the repo from GitHub
git clone -b getting-started https://github.com/philnash/react-web-audio.git
- Change into the directory and install the dependencies with npm
cd react-web-audio npm install
- Start the application
npm start ...
How to Build A Twilio-Hosted Group Messaging Service with Sync, Functions and SMS
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 ...
Here is a preview of what we'll be building:
Basic knowledge of the following will be useful, but extensive knowledge is not required:
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 ...
Building an npm search bot with WhatsApp and Twilio
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.
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 ...
👉 Emoji translations with the 📞 Twilio API for 💬 WhatsApp and Node.js
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.
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.
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
Before we ...
Accessing Salesforce CRM Data within Twilio Studio
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 ...