How to build a webcall to connect a live chat support agent with a customer
Introduction: How to build a webcall
The simplest way for a chat support agent to invite a customer to a call is to create a webcall. What is a webcall? A webcall is a voice or video call taking place online via a website. Webcalls are important because they can send the context of the customer’s browsing session to a chat support agent and allow marketers to understand the context of the call in the customer journey. They are also a cost-effective tool.
In this tutorial, you will learn how to create a URL for webcalling that a customer support agent can share to invite a customer to a webpage hosting the video call. This tutorial uses the Sendbird Calls Javascript SDK – which is built on Sendbird’s WebRTC-based, 6-AWS region, voice and video communication platform – to implement the support call solution.
To create a webcall, we will:
Set up the web app
Create and decode a room URL link
Extract the necessary data to connect to Sendbird
Authenticate
Enter the group call room
Note that this tutorial emphasizes a minimalistic approach, but other functionalities can be added. We recommend that you check out the full code for the sample web app. Please clone the repo, run ‘npm install’, and then ‘npm run’.
Prerequisites
Familiarity with JavaScript, JSON, and HTML
Background information about proxy servers, covered in this tutorial
Let’s begin! 💻
Flow diagram & implementation: Getting started with a webcall
The goal of the webapp is for an agent to create a link and share it with a merchant. For our purposes, a merchant is simply the customer with whom a customer support agent wishes to speak. The merchant clicks on a link and a website opens, which easily allows the merchant to be in a Sendbird Group Call with an agent.
Step 1
Note: If you haven’t already, please go through this tutorial for background information about service users in Sendbird; you’ll learn what service users are, why service users are needed, and how to create a service user.
First, we need to create a room URL link. Create a room URL link as per the instructions seen regarding the proxy server in this tutorial.
An example URL link can look like this:
Step 2
Init and decode the URL, and extract all the data needed to connect to Sendbird and enter a group call room from the hosted web app. The URL is then base64 decoded in the web app to a JSON data string that looks like this:
The URL is decoded as below.
The above parsed URL is fetched during the init process, which is started by the user clicking a button. The returned data allows the user to first authenticate to Sendbird and then to enter the room.
Step 3
Now the user can enter the Sendbird room. Note that this code is stripped back to the bare minimum and there are other functionalities available. For example, other room events are available.
The service uses a very simple HTML page.
Conclusion
And that’s it! You can now create a URL for web calling that will make it easy for a customer support agent can share to invite a customer to a web call. Note that by using a room to host a one-to-one call, call recording becomes a viable function. This allows the live support agent to keep a record of the service provided. Visit our docs to learn more about our cloud recording API and capabilities.
Live agent web support over chat and video calls is an effective way to resolve issues quickly and for any brand to show how much they value customer relationships. To improve CSAT, and learn how to integrate live agent chat support into your support platform solution, check out our Salesforce and Zendesk tutorials. We also recommend checking out our Salesforce Connector, a way to supercharge live chat support within your existing Salesforce account.
Happy calls building!💻