CoBrowse enables Customer Care Professionals (CCPs) and consumers to access and navigate web pages collaboratively. This ensures that complex online tasks and processes can be completed quickly and efficiently. CoBrowse is the optimal engagement solution for consumers who require security and privacy, yet expect a high level of personal contact.
With CoBrowse for Voice, phone conversations between Agents and consumers are enhanced by a real-time visual layer. This increases consumer engagement by creating a higher degree of co-presence of the agent. No plugins or downloads are required, ensuring that agents and consumers are connected in an instant.
Through the CoBrowse for Voice solution, a session can begin without a Live Chat through the LiveEngage console. Agents that are solely assigned voice can take advantage of CoBrowse functionality to enhance and expedite conversations.
Access Voice CoBrowse
1. Navigate to https://cobrowse.liveperson.net/lp-login?r edirect=/agents. The LivePerson Conversational Cloud log in page appears.
2. Input your Conversational Cloud credentials and click Sign in. The CoBrowse Agent Quickstart page appears.
3. Provide the service number displayed to the visitor over the phone.
The service number assigned is displayed on the Agent Page and is unique to each Agent.
1. Navigates to the generic CoBrowse demo Website.
To test the CoBrowse feature navigate to, http://cobrowsing.weebly.com/?domain=lptag-a.liveperson.net&tagjs=tags-a.liveperson.net&site=<SITEID>, replace <SITEID> with your Conversational Cloud account number.
The page appears.
2. Click VOICE TO COBROWSE. The enter CoBrowse service number field appears.
3. Enter the service number provided by the agent and click OK.
The CoBrowse initializes and starts on both Agent and Visitors side.
Agent's Side | Visitor's Side |
|---|
|
|
|
Click End Session on the Agents' side to end the session. The Visitor can click the X at the top to end the session.
Account Setup
To set up an account for Native CoBrowse, you must configure options for the Agent and deploy the session start code on the visitor side.
For Agent
Setting up the minimal agent UI requires adjusting the CoBrowse Backend Configuration for the CoBrowse + Phone use case.
Set up the account in Houston:
To set up the account in Houston, login to Houston and open the CoBrowse config module.
The settings are:
- Agent Session End Action: For CoBrowse for Voice this should be set to “Return to Agent Page”
- Servicenumber Length: The length of the Service ID
- Agent may not change alias: Allow agents to change their nickname
- Agent Home URI: Redirects agents directly to the specified URI after a successful login
- Invitation Flow: The invitation flow that should be used (Visitor vs. Agent enter the Service ID).
Visitor
The code below will add the Voice to CoBrowse functionality on the visitor side. To keep it simple the code uses standard browser alerts and confirm dialogs.
You must not use alert and confirm dialogs in production deployments. In case you need the dialogs to match customers CI for demos use custom dialogs.
In customer deployments it is recommended to use whatever JS framework is already deployed on the customer’s website.
The function enterServiceNumber should be invoked to start the process.
javascript:
/**
* Requests a CoBrowse session using an agent's service id. This can be used in phone-only scenarios when
* CoBrowse cannot be started via chat.
*
* Example Usage: requestCobrowse("123456");
* @param serviceId
*/
function requestCobrowse(serviceId) {
lpTag.taglets.cobrowse.loadApi(function (visitorApi) {
console.log("CoBrowse visitor API loaded");
visitorApi.once("sessionRejected", function () {
alert("The service number is invalid.");
});
visitorApi.once("sessionOffered", function (event) {
console.log("Agent answered the request and offers a CoBrowse session");
var automaticallyAcceptOffer = true; // Set to false if you would like to ask the visitor to confirm the session start.
if (automaticallyAcceptOffer || confirm("Would you like to start a CoBrowse session with '" + event.agentAlias + "'?")) {
visitorApi.acceptSupportOffer(event);
} else {
visitorApi.cancelSupportOffer(event);
}
});
function sessionReadyCallback(startEvent) {
if (startEvent) {
console.log("Session is ready and will be started shortly.");
}
}
visitorApi.requestSupport({serviceId: serviceId}, sessionReadyCallback);
});
}
/**
* Example: Display a simple dialog for entering the service number. In non proof-of-concept
* deployments the prompt should be replaced with a dialog that reflects the CI of the brand.
*/
function enterServiceNumber() {
var serviceId = prompt("Please enter the CoBrowse service number in the field below.");
if (serviceId) {
requestCobrowse(serviceId);
}
}
This section described the most common flow where the Visitor enters the ServiceID received from the Agent. It is also possible to do it the other way around, also known as the alternative flow.
Alternative Flow (Agent enters Service Number)
To use this flow, set the configuration option in Houston to “Agent Enters Service Number / Display Service Number to Visitor”.
The code below should be added to the website:
javascript:
/* call this function to generate a ServiceID on Visitor side */
function generateServiceID(){
// loads the CoBrowse Vistior API
lpTag.taglets.cobrowse.loadApi(function(api) {
//callback that is called once the Agent entered the number and offers a session
api.once("sessionOffered", function (event) {
/* (optional) This would be the place to ask the user if he/she wants to
start a session
*/
//accept the offer
api.acceptSupportOffer(event);
// use api.cancelSupportOffer(event); to cancel the offer
});
// initializes the CoBrowse Visitor API
api.iCM();
// create the ServiceID
api.createServiceId(function(sid){
/* Showing the ServiceID in an alert for demo purposes. Please don't use
this in production
*/
alert("The Service ID is: " + sid);
});
});
}
Native CoBrowse is primarily designed to enhance the customer experience for phone agents, providing them with the capability to utilize CoBrowse as an extra visual channel. This functionality serves as a valuable means for engaging with digital callers, defined as individuals who are concurrently online and navigating the customer's website while engaged in a phone conversation with an Agent/CCP.
