Add a Click To Call Button & SMS Chat to Your Joomla Site

Add a Click To Call Button & SMS Chat to Your Joomla Site

As a Joomla community volunteer, I am always looking for opportunities to help my favorite CMS grow and add new features. Following these ideas, Twilio and Joomla are a perfect match to bring the possibilities of a first-level communication platform to small and medium-size organizations. In this blog post, I am going to create the required extensions for Joomla to incorporate a simple communication channel to a website by creating a click to call button.

I have planned a series of articles about the topic of implementing a communication solution for Joomla based on Twilio. In this first installment, I provide a ready-to-use extension for Joomla and the detailed steps to implement it (no coding skills are required). Later on, I’ll publish the rationale behind the development process.

If you are looking for a simple solution, you can just download the latest release and deploy it on your site.

For this tutorial you will need a basic website configuration:

• Local installation of Joomla (preferably version 3.8 or superior). The full detail of CMS requirements can be found here.
• PHP 5.5 or superior. PHP 7.2 is highly recommended.
• MySQL 5.1 or superior. MySQL 5.5.3 + is recommended.

A ready-to-use extension for Joomla

To start using the extension, you can download the latest release from the Github repository: https://github.com/anibalsanchez/XT-Twilio-for-Joomla/releases

The package includes each of the elements ready to be used. The following steps show the steps to configure and use the solution from the point of view of a Joomla administrator (no coding skills required).

Step 1: Install the extension

Once you download the extension, you can install it in the Extension Manager (Extensions / Install).

Step 2: The Twilio Account Configuration

Before implementing the Joomla solution for Twilio, you need to configure the Account. You will need your Twilio Account API Credentials to implement the user-facing functionality:

• LIVE Credentials
  • ACCOUNT SID
  • AUTH TOKEN
• TEST Credentials
  • ACCOUNT SID
  • AUTH TOKEN

The credentials can be found here: https://www.twilio.com/console/project/settings

A Note About Twilio Credentials:

In the account configuration, the Twilio Phone Number and other phone numbers are going to be managed. Please, take note of the following points:

• Each phone number, SMS message, and phone calls have an associated cost.
• Twilio has strict controls over permissions and capabilities.
• The Twilio Phone Number must have the SMS and/or Voice capabilities.
• If you are going to start testing with a Trial account, it only allows one Twilio Phone Number per account.
• Remember, Phone Numbers must have the Country Code (even if you are testing in your local area).

Step 2: Configure the account in the Ajax plugin

At this point of the project, you have the account API credentials and can configure them in the plugin that communicates the website frontend with Twilio backend. To configure the plugin from the Joomla admin menu, navigate to Extensions > Plugins >  Ajax - XT Twilio for Joomla and input the credentials from Step 1.

The plugin stores the Twilio API Credentials internally in the site database to connect the site with the REST API.

A note about phone numbers:

• The Twilio Phone number is provided in your Account administration in E.164 format. E.164 is the international telephone numbering plan that ensures each device on the PSTN has a globally unique number. You can find more information about the format here: What is E.164?
• The Salesman Phone Number is your own number or a verified number that Twilio service is going to call establishing connections. You can find your Account verified numbers here: Verified Caller IDs

Step 3: Configure the module to contact customers by SMS

The module functionality allows visitors to enter their phone number and a message, and with the click of the “Send SMS” button; the action sends an SMS to the backend operator to provide help or support.

To test the contact form: Fill in the fields and submit it to receive an SMS. In this way, you will validate the account configuration and complete the circle. Before testing the module in the front-end, be sure that the module is assigned and enabled in a visible position of your template. To configure the module from the Joomla admin menu, navigate to Extensions > Module > Twilio for Joomla - Contact by SMS module.

Step 4: Contact customers with a click 2 call button

The Click-2-Call module shows a form to ask for the customer phone number and a button to initiate a Click to Call operation. The action uses the Twilio Programmable Voice functionality to call the user, confirm the first leg of the communication and then calls the sales phone number to complete the conference setup.

To test the contact form: Fill in the phone field and click on the button. In this way, you will validate the account configuration and connect a user phone with a sales phone. As always, before testing the module in the front-end, remember to assign the module in a visible position of your template and enable it in the backend. To configure the module, from the Joomla admin menu, navigate to Extensions > Module > Twilio for Joomla - Click 2 Call.

Next Steps

After completing the previous configuration, Joomla is ready to send SMS messages, or support a Click2Call workflow between users and the sales area. In this article, I have presented the case of an administrator configuring a simple solution to start using the Twilio solution for SMS and Voice Cloud Messaging.

I have published the XT Twilio for Joomla in the extension directory (JED), and you can also download the code from this repository.

https://github.com/anibalsanchez/XT-Twilio-for-Joomla.

Basically, the package includes the following extensions that work together to integrate Twilio and Joomla:

• Twilio for Joomla - Library: This extension is a wrapper of the official Twilio PHP SDK to install the SDK at the system level.
• Twilio for Joomla - Ajax plugin: This plugin is going to allow the communication between the following modules and Twilio REST API.
• Twilio for Joomla - Contact by SMS module: This module is going to provide a contact form to send SMS messages to a backend phone number.
• Twilio for Joomla - Click 2 Call module: This module is going to establish a call between the customer a the backend phone number.

All of them are going to be packed and distributed in a single package for the extension.

Based on this initial version of a Twilio implementation for Joomla, a world of possibilities are open. We can continue implementing features of the Twilio SDK and explore the synergies of the different services within the ecosystem of extensions.

To the moon!

References

• XT Twilio for Joomla in the extension directory (JED)
• Source code repository: https://github.com/anibalsanchez/XT-Twilio-for-Joomla
• Twilio PHP SDK
• Joomla! (https://www.joomla.org) is an award-winning content management system (CMS), which enables you to build websites and powerful online applications.

About Anibal

Anibal Sanchez is a technology geek, with a pinch of an entrepreneur. Aníbal is the team leader of Extly Tech. He helps businesses in rapid web development, implementing DevOps processes, quality assurance practices and project management methodologies. Anibal contributes to the Joomla! community as a member of the Leadership Team, JED’s Assistant Manager and Joomla! Magazine author.

• Twitter: @anibal_sanchez
• Github: anibalsanchez