In this article I am aiming to share the experience and the technical know-how on how we made it possible to call customers right within the chat widget. We've developed various instruments to simplify the process for future integrations, which I will overview and illustrate with concrete examples within the article.

Our feature takes just one click to install.

Why give an agent the ability to call customers inside chat ?

Written communication, and chat in particular, is really a great channel to help and guide existing and potential customers. However, in some situations adding a voice channel possibility inside the chat could really enhance the experience. Chat is a fully digital mean of communication and voice is currently not (customers need a phone number or have to request a callback to have a voice interaction with a business). Standard customer support and sales KPIs could really be greatly improved with the help of  voice directly -integrated inside the chat. When these observations accumulated internally in SnapCall, we got in touch with the LiveChat team and started the discussion on, how we could combine our technologies to offer an impeccable experience to chat users (agents and customers)? We started thinking how we could seamlessly integrate click-to-call solution inside the chat.

Calling inside the chat experience: for customers and agents.

Integration concepts

When our team started working on the integration, there were 3 things we wanted the integration to be: quick, effortless and relevant. As the SnapCall team was building an integration with LiveChat, we designed a process to easily fit into other products roadmaps. It was a truly exciting experience for both SnapCall developers and LiveChat product managers.

Quick: it took us 5 days to integrate click-to-call solution inside the chat.

Effortless: we've  created a partner API, ready and super easy to use.

Relevant: we built a new experience complementing core chat functionalities.

The steps of the project

As mentioned before, we've developed a public partner API, to easily integrate our solution inside any chat platform. We will see what would be some core functions needed for that using this API, however we strongly believe that in this case less is more. I will share the steps that are crucial to building the first operative version below.

1- Account activation

method: 'POST',    path: '/partner/activate-account',

To begin with exploring the service, you need an account. Each time you want to enable a click-to-call functionality to one of your users, you have to activate their account. This endpoint needs an email and will return an API key useful for the next steps.

{
    "id": 464,
    "email": "thomas@snapcall.io",
    "api_key": "8861e7f5f65d4697bbfc365c4c31340c"
}

2- Call button creation

method: 'POST',    path: '/partner/agent-button',

At this step, we are starting the call process. For that, we need a call button id, linked to a specific agent. The agent-button function needs an agent email plus the previous api_key and return a call button id like the one in the example below : 530bb4d0afbc11ea8e686d0846c11109.

{
    "id": 227489,
    "bid_id": "530bb4d0afbc11ea8e686d0846c11109",
    "queue_id": 1,
    "call_id": "2523001",
    "caller_id": null,
    "routing": "queue",
    "name": "thomas-chat@snapcall.io",
    "display_page": "all",
    "cart_value": "0",
    "config": {
        "btnBgColor": "#4CD964",
        "btnShowClose": true,
        "startDocked": false,
        "shouldDock": true,
        "useCobrowsing": false,
        "btnPosition": {
            "top": 97,
            "left": 95
        },
        "containerId": "",
        "containerStyle": "",
        "btnGaId": "",
        "showNumber": "",
        "collapsed": false
    },
    "active": 1,
    "schedule": [
        {
            "endingDay": "Sunday",
            "endingTime": "23:59",
            "startingDay": "Monday",
            "startingTime": "00:00"
        }
    ],
    "schedule_template_id": 2194,
    "calls": 46,
    "closed": false
}
the agent-button endpoint return

Once the button id is known, the agent can start the call by sending a "call message" to the customer.

Sending a message that displays a digital call button to a customer

3- Display a call button to the customer

A customer will receive a rich message displaying the right call button using button id you've generated previously. The rich message should contain an iframe to display a web page containing the right SnapCall button.

Customer call button inside an iframe

4- Building a call feature inside agent console

A other part of the job is to design an agent call console to easily manage customer calls. To facilitate this process we've developed an agent app module in react.

5- Build a mini dashboard

method: 'POST',    path: '/partner/stats',

This function provides you with the opportunity to display call statistics. The idea is to help chat customers to easily assess agents call activity (such as total number of calls, call duration, agent list, etc.)

SnapCall dashboard inside LiveChat

A quick summary

All things considered, building a click-to-call solution inside the chat has been a pretty straight forward process. In terms of product, we added a truly valuable feature to the LiveChat experience. Agents can now easily jump on a call with a customer right inside the chat conversation, and managers can effortlessly follow the call activity of their team. For the technical part, we've created the partner API that would help our future chat partners to quickly integrate the SnapCall product inside their own roadmap.