“Chat with us now!”

We’ve all seen those popups on popular websites, letting you know that if you have a question or need some help there is someone (or something) that you can turn to. Sometimes though chat is just not the right medium for getting your question answered or the support you need. For a higher fidelity experience, stepping it up to video is the best option.

In this post I’ll show you how using Twilio Video and a little bit of JavaScript and PHP, you can build a Video Chat plugin for WordPress, the world’s most popular CMS system. Never built a WordPress plugin? Don’t worry, it’s a straight-forward and simple process. Want to head straight for the finished product? No problem. Grab the complete code for the plugin from this Github repository. Otherwise, let’s get building!

Getting Setup

Before we get coding we’ll need to gather a few items that we’ll use to build our plugin. First, you’ll need an installation of WordPress that allows plugins. This can be either installed on your local machine, or remotely on a hosting provider like DigitalOcean. Unfortunately WordPress.com does not allow you to upload custom plugins.

Next, you’ll need a Twilio account. If you don’t already have one go right now and sign up for free!

With a WordPress install and Twilio account in hand we can begin building our plugin.

Start with Structure

WordPress plugins are bits of PHP code, JavaScript and CSS that can extend and expand the functionality of your WordPress site. When you install a plugin, WordPress places the assets of that plugin in a new directory under the /wp-content/plugins/ folder of your WordPress installation. That’s where we will start building our new plugin, by creating the folder and file structure that we need.

Create a new folder named twilio-video under the plugins directory. In that directory, create a folder and file structure that matches the list below. For now you can leave the files empty, we’ll add content to them as we go along.

/wp-content/plugins/twilio-video twilio-video.php randos.php twilio-video.html /js twilio-video.js /css twilio-video.css /lib



With the basic plugin structure in place let’s start adding some content. Grab the CSS styles for the plugin from the Github repository and place them in the twilio-video.css file.

Now is also a good time to add the twilio-php helper library to our project. Because Twilio Video is still in beta, you’ll need to grab the help library from either the Twilio Video for JavaScript’s PHP quickstart starter app, or from the edge-release branch of the twilio-php repository in Github. Once you have the helper library files copy them into /lib folder.

Finally, we’ll need one final prepared resource. A random name picker which we will use later on to assign an identity to each customer who connects to an agent. Open randos.php and drop the code from the corresponding Github file into it.

Awesome. We’re now ready to write some code for our plugin. To begin we need to create a plugin header which is simply metadata that WordPress uses to know some stuff about our plugin. That metadata goes into the twilio-video.php. Open that file in your favorite editor and add the following: