November | 2019
As the role of technology continues to expand in everyday life, it is crucial that customers feel supported in their digital experiences.
Co-browsing has become an ingenious tool to accomplish just that. By providing step-by-step guidance in real time, virtual agents can surf along with customers until their query is completely resolved, guiding them through the entire process. The ability to see and control a customer’s online experience allows an agent to troubleshoot complex transactions, processes, forms, demos and more.
While text chat, phone and Interactive Voice Response (IVR) calls are great starting points for humanized customer experience, visual engagement takes customer interaction to the next level by resolving query effectively and efficiently. This creates a better journey for the customer, leading to higher conversion rates, and ultimately shaping a greater level of success for your business.
As per the research study conducted by Baymard, 70% of customers abandon a company’s digital presence because they feel that the company does not care about them. Enterprises are looking continuously to improve their process/system which can help to achieve high customer satisfaction and onboarding.
Technologies that enable visual engagement
Co-browsing and screen sharing allow organization to enhance the customer experience. In this paper, we will discuss what these technologies are, how they differentiate from each other, how they work to resolve customer queries, and which ones best drive conversions.
Both Co-browsing and screen sharing technology enables the user and advisor or expert to collaborate in real-time for resolving the issues that user is facing. Advisor can see how user is navigating from one page to other, making selection, entering data on the form fields etc. Advisor can highlight on specific area and annotate.
Visual engagement technology helps to resolve issues quickly, leading to a reduction in call duration and frequency. Adding these capabilities along with conversational interface, using voice or text, can add a valuable human touch to the customer experience.
Consider an example of online shopping- if the customer cannot figure out how and where to apply the promotional offer, he/she may abandon a sale and will move to competitor’s website. In most of the financial or insurance industry website, there are some cumbersome application processes where customer needs to provide information in order to obtain a quote or apply for KYC (Know your customer). In such scenario, the agent/advisor can guide the customer visually using a co-browsing or screen sharing session, thereby closing the sale.
Co-Browsing vs. Screen sharing
A co-browsing solution allows the customer to cede control of their mouse and keyboard to an agent, who can in turn see what the customer is seeing and move around within the browser. With no download necessary, they’re instantly ready to share.
Co-browsing can also alleviate concerns of privacy and security. Any customer data is shared over an encrypted connection and the customer has the ability to mask sensitive fields. The screen sharing solution differs from co-browsing, in that it allows a prospect or customer to instantly see what is on the agent’s screen—just a click of a button and the demo is off and running
Here are some data points on the differences between co-browsing and screen sharing:
How Co-Browsing works
Co-browsing solutions enable agents and customers to be on the same page — literally. It works on the principle of updating the Document Object Model (DOM) and then propagates the changes from the host device to a remote device using one relay server. Potential interactions include form input, cursor click cloning, cursor navigation, text-based messaging (chat), Web Real-Time Communication (WebRTC) based audio call, user presence, adding multiple agents and more to enhance the experience of collaboration. Using draw and annotation features, an agent can visually guide the user in resolving the query related to a particular web page. All this can be accomplished by simply adding a few lines of JavaScript code in the web application, which exemplifies its capability to boost the power of a website with the fastest possible turnaround time.
The Hub Server communicates with the web server for sharing the DOM objects. Any changes that occur on Client 1 are replicated via DOM on Client 2, which produces the co-browsing experience.
The co-browsing client listens for the event and updates the DOM object, which is then reflected at the other client application.
Limitations with Angular Application
We have noticed few limitations while working with the Angular Web Application. Angular 6 works on shadow DOM and only listens to the changes happening within the angular zone. When a third-party library, like TogetherJS, updates DOM, corresponding changes do not affect angular components, as they are not subscribed to the changes happening in actual DOM native element. This could be by design, considering security for custom view rendering.
Addressing technical challenges
Several challenges may arise with co-browsing implementations:
During the co-browsing session, both endpoints must share and exchange information in real time. Some of this information is stored locally on the client platform. Since updating and synchronizing the browser is a slightly slower process, storing large data is not recommended. Any action that occurs on the user side should be immediately exchanged to the agent side before any change happens on the current page location. Otherwise it will try to simulate the change on the incorrect page. The change replication may fail due to the absence of the desired target element on the current page.
In most co-browsing scenarios, the agent follows the user. During this collaboration session, due to some internal and external events, either endpoint might route to a new page out-of-sync. In such case, co-browsing will fail. In order to avoid this, both sides should maintain heartbeat mechanism and exchange the current location. In case of discrepancy, the agent must return to the page that the user is viewing.
As part of a co-browsing solution, multiple modules collaborate with each other to simulate the same set of views on both sides of the occurrence of both internal and external events. Developers should keep in mind that cyclic dependencies between these modules must be resolved properly. In most solutions, developers leverage this modular approach and invoke a specific module as necessary. But, in case of intertwined modules, one should check that all the modules are loaded fully before the co-browsing starts.
In order to achieve co-browsing for authenticated users we need a one-time cookie exchange between the user and the agent so that the very next request the agent sends to the webserver gets authenticated. Post successful authentication, the agent shall receive new cookies and can use them for successive requests.
The next generation frameworks like ReactJS, VueJS and Angular have security features which protect the DOM by not listening to external events. Any changes received outside of their zone are invalidated. This behavior causes many co-browsing solutions to fail due to the inability to validate when the agent attempts to change input data field. Our proposed solution uses a unique way to tackle this which involves directive-based approach. This allows both entities to make simultaneous changes and reflect those which were unsuccessful due to validation failures like opening a sub menu based on the input parameter, sorting and searching.
Conclusion
By incorporating co-browsing capability, businesses can improve the online shopping experience, resulting in higher buyer certainty, reduced cart abandonment rate and increased prospect indices. As product description queries can be resolved on the spot, customer expectations will be met, and product returns (and the associated costs) will decrease. Many senior citizens, first time visitors generally face problems while using the web-based application. The co-browse solution can help domain experts to collaborate with users in real-time. This will lead to improvement in customer on-boarding rate. Co-browsing can alleviate challenges like portal bugs, page time-outs, complicated forms and other issues that can lead customers to choose a competitor instead. With the help of co-browsing capability, businesses can get an edge over competitors with enhanced customer satisfaction that can drive substantial business growth.
Pandurang Naik (Pradeep)
DMTS Sr. Member, CTO office Wipro Technology
Pradeep has 26+ years of experience in consulting, innovation, architecture development and implementation. As Sr. Principal Consultant, Pradeep currently heads Interactive Experience (iX) Platform Engineering for development of the multi-modal interaction platform. His core expertise is on distributed database, data analytics, cloud architect, and architecting the multi-modal interaction system. He has published papers and has participated as a speaker in the international conferences.
Gaurav Srivastava
Solution Architect, CTO office Wipro Technology
Gaurav is having more than a decade long experience in industry and currently working on developing “Visual Engagement” platform of Interactive Experience (iX) practice involving Remote Collaboration, Augmented Reality, Co-browsing, Speech recognition etc. He has past experience of developing large scale platform for a Telemedicine client. He has been a vivid speaker on multiple technical forums and various colleges.
Locations
