Objective
You want to know what co-browsing is, and how you can leverage it to improve customer/member engagement and provide more clarity during appointments facilitated through Coconut Connect video calls.
NOTE: Co-browsing is an optional add-on. Please connect with your Customer Success contact to get started.
Overview
Co-browsing is an available add-on for Coconut Connect video calls. This allows all participants on the call to collaborate on a supported webpage. This can be used to provide more clarity to customers/members during appointments during activities that require customers/members to interact with webpages, as staff can visually indicate important information.
Technical requirements
To enable co-browsing, please reach out to your Customer Success contact.
The following are required to utilize co-browsing:
URLs must be added in the Settings page before a call starts in order to co-browse a page on the call
A javascript snippet added to the page to be co-browsed is required to support co-browsing
Managing Co-browsing
Admins in Coconut can manage co-browsing through the secure settings section of Coconut by navigating to Settings and then Coconut Connect.
The script tag required to support co-browsing can be copied from the Coconut Connect settings page. The script tag will be based on the version that is selected. It is best practice to use the most recent version. Once this script tag has been installed on your webpage, that page will be enabled for co-browsing.
In the Coconut Connect settings page, Admins can set up co-browse URLs to be listed in a Coconut Connect video call. Any URL provided will need to be a secure URL and will also need to have the co-browsing javascript installed. If these conditions are not met, there will be errors when attempting to start a co-browsing session for the web page.
The co-browsing section in Coconut settings
Installing the script tag
The script tag copied from the Coconut settings area will need to be added to the code of the webpage that you want to enable co-browsing on.
The script tag can be placed inside either the head tag (<head>) or body tag (<body>) of the page. The most common practice is to place library scripts within the head tag.
Use co-browsing during a Coconut Connect call
Starting a co-browsing session
Participants of a Coconut Connect video call have the option to start a co-browsing session that will include all the participants currently admitted to the call. The co-browsing session can be started for a predetermined list of webpages set up by an Admin in Coconut.
To begin, open the menu in Coconut Connect and choose Co-browse a Webpage. From the menu, choose one of the preset co-browsing options. The co-browsing session will begin for all participants on the call.
Once a co-browsing session has begun, the layout of the Coconut Connect video call will adjust to have the main focus on the webpage that is being co-browsed.
By default, any participant in a Connect call can initiate a co-browsing session. This can be customized by admins in the Participant Actions section of the Coconut Connect settings page.
Interacting with a co-browsing session
During a co-browsing session, all participants can see the webpage and follow along with the navigator of the session. The navigator will have a regular cursor that can be used to interact with the webpage. Observing participants will have a marker to add annotations that will be visible to all participants.
Any participant that is currently observing will be able to take over as navigator to assume control of the page interactions. To take control of a co-browsing session, a participant can click Take over as Navigator. All other participants will receive a notification to indicate which participant has become the navigator.
Stopping a co-browsing session
A participant that is part of a co-browsing session can choose to stop the session at any time. This option is available by clicking Stop co-browsing in the session information bar at the top right of the screen.
Co-browsing audits
Co-browsing can be a powerful tool that empowers anyone on the call to interact with the co-browsable content. With this there can arise the risk of someone interacting in a non-compliant way. To help mitigate this risk, Coconut Connect will keep track of form interactions that happen during a co-browsing session.
Below is a list of data points that will be captured for each form interaction during the co-browsing session:
Timestamp
Website address/page title
Which participant was in control when the action occurred
-
What form element was interacted with
-
The identifier will be dependant on what Coconut can access while in the co-browsing session
e.g., label, id
-
-
What happened
e.g., text entered, checkbox checked/unchecked, form submitted
Co-browse audits can be accessed in the same way as other assets generated from a Coconut Connect call:
Navigate to Clients, and search for a client that was part of the Coconut Connect meeting.
Click Activity
Click the Coconut Connect tab
Navigate to the record you want to review
Click Download
Select the Co-browse log option
Security
Co-browsing utilizes iframes to allow participants to collaboratively browse a website within a Coconut Connect call. Coconut strongly suggests adding two headers to your website which will neutralize any potential threats. The two main threats to allowing a website to be opened in an iframe are cross-frame scripting and phishing.
The primary defense against these threats is to implement a Content-Security-Policy that uses a frame-ancestors directive. An example policy is provided below with the necessary entries to allow Coconut Connect to function properly:
Content-Security-Policy: default-src 'self'; script-src 'self' https://assets.coconutsoftware.com; frame-ancestors https://connect.us.coconutsoftware.com https://connect.demo.coconutsoftware.com;
Note that you will likely need to expand upon this based on what your website(s) is loading.
In order to protect your regular website visitors who use older browsers, you need to go one step further. As a fallback for older browsers, using an X-Frame-Options header with the appropriate value will prevent older browsers from being susceptible to the same style of attacks mentioned above (based on the configuration you supply in that header). An example header is provided below:
X-Frame-Options: DENY; NOTE:
If
X-Frame-Optionsis set toDENYorSAME-ORIGINthen co-browsing in Connect will not work unless the Content-Security-Policy is adjusted to include the connect URLs as frame-ancestors (as listed above).If a current
Content-Security-Policyexists and includes anyframe-ancestorsthen co-browsing in Connect will not work unless the Content-Security-Policy is adjusted to include the connect URLs as frame-ancestors (as listed above).
Known limitations
Co-browsing is a tool that is relying heavily on how a web page is structured. Given that there are many technologies, languages, and methods for developing a web page, there may be some issues using the co-browsing feature.
This is a list of the current known limitations with using co-browsing:
Forms in embedded iframes are not supported
-
The webpage used for the co-browsing session is loaded in an iframe within the Coconut Connect call
This can cause issues if the webpage also uses iframes to embed content such as forms
HTML5 form validation will always be displayed for the participant that initiated the co-browsing session but may not be displayed to other participants
Page elements that rely on a script being executed, such as custom dropdowns instead of standard select elements, will not work for participants that did not initiate the co-browsing
A note on access and visibility
When co-browsing is enabled, Admins within Coconut are able to set up co-browse URLs that will be accessible in the Coconut Connect video call.