Adding a click to call button to your website is a great resource to allow your customers to contact your call center for free, avoiding the costs of international or toll-free phone numbers. Besides, your customers won't have to remember your phone number.
Toky, allows you to easily install a click to call widget on your website by adding a portion of code to your HTML or installing our Click to call plugin for Wordpress if your website runs on this CMS. This button works very well at a page level, but you may need to provide your visitors with specific buttons or links to call you.
Imagine that you have an e-commerce website and you want to allow your visitors to call you to ask about a specific product. In this case, you want to add a call button to each product listing, so when the visitor clicks it a call with the sales team in charge of that category will start. The same case applies for real estate websites, where customers may need to call asking about a house, apartment, offices or housing projects.
Adding a click to call button with HTML and Javascript
To achieve this, you may need your development team to help modify the code of your website. To execute this case, in addition to a Toky account, you require the following:
- JQuery to handle the HTML elements of your website.
- Featherlight to generate a pop-up window or lightbox where the code executes the call.
1. Getting the Toky call link
Toky allows you to generate a call link, which works like a page that you can share with your customers or with whom you want to call you. You can generate call links in these ways:
- At the company level: You can get this link in your company profile.
- At the agent level: This call link can be found in your own profile or the settings of each agent.
- At the telephone menu level: When you set up your live call widget, you can create telephone menus and associate them with your agent groups, this way you can assign the desired team to each link. In the case of an e-commerce website, for example, you could create groups and telephone menus for your main product categories and associate the most suitable agents to handle requests from each one.
After choosing the call link you want to use, we can start modifying the HTML and Javascript code. In our example, we can use the link of our testing company: https://app.toky.co/tokydev
2. Adding the required javascript libraries
- Adding JQuery: First you must validate if your website has this library already installed, because it is very common. If you do not have it, you must add it to your website and for this we recommend you do it from the official CDN: https://code.jquery.com/. Select the JQuery version you want to use and add the following code before the
</body>tag.
<script src="//code.jquery.com/jquery-3.4.0.min.js"></script>
- Adding Featherlight:On the Featherlight site you can check the documentation to use this library properly, also the CDN you can use. For our case we added this code before the
</body>tag as well.
<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet">
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
3. Adding CSS classes to the buttons that we can use as click to call
On the desired page, you must add the CSS class .callbutton to each link or button you want to start a call with. In our example the links will look like this:
<a class="btn btn-primary btn-product callbutton"><span class="glyphicon glyphicon-earphone"></span> Call for details</a>
4. Adding the Javascript code that generates the click to call
The following code generates a popup and initiates a live call each time a visitor clicks on the button or link with the CSS class .callbutton. In our case, the popup displays the company call link.
<script src="//code.jquery.com/jquery-3.4.0.min.js"></script>
<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet">
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script>
//Adds a lightbox with an IFrame to every element with the CSS class .callbutton
$(".callbutton").featherlight({
iframe: 'https://app.toky.co/tokydev?callnow',
iframeWidth: 300,
scrolling: 'no',
allow: 'microphone',
iframeHeight: 550,
frameborder: 'no'
});
//IMPORTANT: Enable the michrophone access for the generated IFrame
$(".callbutton").attr('data-featherlight-iframe-allow', 'microphone');
//Removes scrollbars
$(".callbutton").attr('data-featherlight-iframe-scrolling', 'no');
</script>
This code must be added before the </body>, so the full code snippet will look like this:
<script src="//code.jquery.com/jquery-3.4.0.min.js"></script>
<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet">
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script>
//Adds a lightbox with an IFrame to every element with the CSS class .callbutton
$(".callbutton").featherlight({
iframe: 'https://app.toky.co/tokydev?callnow',
iframeWidth: 300,
scrolling: 'no',
allow: 'microphone',
iframeHeight: 550,
frameborder: 'no'
});
//IMPORTANT: Enable the michrophone access for the generated IFrame
$(".callbutton").attr('data-featherlight-iframe-allow', 'microphone');
//Removes scrollbars
$(".callbutton").attr('data-featherlight-iframe-scrolling', 'no');
</script>
You can also add this code in a separate javascript file; your developer can help you define this. You must add the call link you chose in the iframe field, which for our example is:
$(".callbutton").featherlight({
iframe: 'ADD YOUR CALL LINK HERE',
iframeWidth: 300,
scrolling: 'no',
allow: 'microphone',
iframeHeight: 550,
frameborder: 'no'
});
If you want the call to start immediately after the visitor clicks the button, you must add the option ?Callnow at the end of the link, otherwise the window opens and the visitor has to click again to call. In conclusion, for our link:
- https://app.toky.co/tokydev?callnow This link starts the call immediately.
- https://app.toky.co/tokydev This link displays the call options, the visitor must click the green button to contact your call center
If you want to see a working example of this code you can see this jsfiddle:
Besides call links and click to call buttons, with Toky you can have phone numbers, SMS and many other features that can help you improve communications with your customers. Try Toky for free.