This article is here to show you how to bake your very own ClickToCall functionality into any website, this recipe uses PHP but the method could be applied to any other language.
The list of ingredients you will need to shop for:
- PHP 5.4+, available at your local PHP retailer
- php-composer - a dependency manager for PHP, available here, and highly recommended
If not using php-composer, please download the CALLR PHP SDK from our Github, then read the file INSTALLING.php.md for more information on installing without php-composer. If you would like to read more about our API, you can check out the documentation website. The Docker project for this article is available on our GitHub.
First, we create the script submit.php to handle the submission of the ClickToCall web form:
Our CALLR credentials are stored in environment variables, along with the target telephone number and the APP_ID of an already created ClickToCall application, this can be created within the CALLR website interface or alternatively, from the CALLR API:
The creation of a ClickToCall application should be performed sparingly, as to not overload your account profile with superfluous application configurations. See the documentation here for more information on using the API to create your ClickToCall application. Next, for our customer and target phone numbers we need to create the target object which consists of 2 properties, number, and timeout.
The customer telephone number to call is taken from the $_POST array after form submission.
Within our try/catch block, we start the ClickToCall call, passing in the application id, customer phone number, and target phone number.
the returned call id can then be used to control the call using API methods such as 'clicktocall/calls.get_status'.
For the front-end, I have created a simple web page with a text field for the customer to enter their phone number, and a submit button.
Being that my backend returns JSON encoded results, I am using jquery to submit ajax POSTs to the script and show returned results.
All that is left is to enter your phone number and click 'Call me!', jquery will ajax POST the number to our submit.php script that will, in turn, call our ClickToCall API method using the predefined application id and make the connection between the customer telephone number and our target number.
If you would like to take a closer look at the code used for this and test it for yourself, check out the full Docker project here on our GitHub, it includes a more complex example that can auto create an application, and will ask you for your CALLR credentials on the webpage if they are not found as environment variables.