Add one touch click-to-call to your own web app

Christina Dechent
Christina Dechent
  • Updated

It takes 5 minutes to enable one touch click-to-call in your own web app. You just add a standard attribute to HTML elements that you want to turn into click-to-call buttons.


STEP 1: In your web app code

Wherever you want a clickable item to start a call, just add the "tel:" attribute in the HTML something like this:

<a href="tel:+4915188778877"><button type="button">Call now</button></a>

That's it. It is the href="tel:...." part that matters here. You can do the button or link anyway you want.

Once you have the "tel:" there and put in the number to be called in full international format, if an agent logs in to babelforce using the Chrome Extension, everything will work out-of-the-box.

STEP 2: Use babelConnect Chrome Extension with agent login

You can add the new extension here:

Note if your team members are using babelforce through another app already, that will continue to work and the calls will be visible in both. 

Here are instructions on how to install and configure the browser phone extension

Important: To use babelConnect you need to be invited to be an agent by your babelforce account administrator.

Here are instructions on how to invite an agent and how the agent gets access credentials.


STEP 3: Some simple settings for click-to-call in the Chrome extension

Just open the extension settings view in Chrome like this:


Then open babelConnect extension "Details".

Then open "Extension options" section and it will look something like this:




As you'd expect, if the "detect phone numbers marked with "tel:" attribute?" is enabled, then the click-to-call buttons and links will work.

If you want calls to start immediately when an employee clicks the link, then enable "Start call immediately on click?" also.


The finished result

Your web app will present one-click call links or buttons like this:


If the agent turns the chrome extension off in the top right corner of the browser, then the clickable link feature will disappear and reappear again when turned on.

Further questions and capabilities

My agents work for different brands or teams with different public numbers

Yep, that will work. The agent simply selects the "Display number" number from the drop-down list:



How "Display as" numbers work:

  • Once a number is selected in "Display number", it will be used as the number presented to the person called (the end-user or callee) for outbound calls.


  • If the agent forgets to select the display number, the attempted outbound call will not start.


  • The agent can select a different "Display number" number from the list.

Was this article helpful?




Please sign in to leave a comment.