Setting up co-browsing

With our co-browsing feature, you can browse the same web page together with your customer, and see exactly what they see. So you can solve complex queries faster, or give them the right advice and help them complete a customer journey. You can learn more about the co-browsing feature here. 

 

This article covers:

• Website requirements for co-browsing
• Activating co-browsing in 24sessions
• How to activate co-browsing on your website
• Hiding sensitive information from the co-browsing session through CSS classes
• Configuring co-browsing sessions

Requirements

The co-browsing widget can be deployed to websites where doctype is set to HTML 4.1/strict or HTML 5.

The widget has been developed for desktop use. However, it does work on mobile devices but the user experience is not optimized for mobile use.

Activating co-browsing in 24sessions

The co-browsing add-on will be available in the marketplace of your 24sessions instance if it is activated, if it is not, you can ask your customer success manager to enable this for you. If it is enabled, you can find the market under Add-ons in the sidebar. From there, look for the add-on that is named Co-browsing. Click Enable, then navigate back to the market tab, because you'll need another Add-on! Look for the add-on that is named Omnichannel, you'll need this to set up the widget on the website where you want to cobrowse. Click Enable, and that's it! 

Activating co-browsing on your website

The co-browsing feature is a part of the 24sessions omnichannel widget. It can be enabled by adding the omnichannel code snippet to your website.

First, fetch the code snippet from 24sessions following these steps: 

1. Login to your 24sessions instance
2. Under Add-ons, select Omnichannel
3. Configure the widget to your needs. You can choose to enable only cobrowsing or include other features as well, you can find more about the different options of the omnichannel widget here.
4. Click on the get widget code button, a pop-up will come up where you can copy the code snippet, as pictured below.

Insert the code snippet to the HTML of your webpage, preferably before the closing body sign. This ensures that loading the widget will not interfere with loading the visible content of your page. Please note that you will need to add this code snippet to every page that you want to enable co-browsing for.

You can confirm the widget is working by navigating to the page and confirming the presence of the widget icon, as pictured below. The icon will be located in the bottom right of the screen. Clicking this icon will open the omnichannel widget menu.

Hiding sensitive information through CSS classes

If you have any fields you would want to hide from the co-browsing agent, like fields that show credit card information or other sensitive data, you can easily do this by configuring the co-browsing session to block certain CSS classes.

To get started, open the co-browsing widget configuration page from the Add ons section in the toolbar. In the first part of the configuration, add CSS classes that you want to hide, this can be any element you would want to hide, like images, text, buttons: essentially anything that is able to have a CSS class!

For example, you have a field on a form to add a social security number and you want to hide this. On the website, you see the following HTML:

<input type=”text” class=”social-security-number”/>

To hide this information, add the class to the configuration like:  social-security-number  

It's important to note that the CSS class to be hidden should be added without the leading dot.

Configuring co-browsing sessions

You can find the settings for co-browsing under Add-ons in the sidebar. There you can configure hiding sensitive information through CSS classes, as explained above. You are also able to block certain actions. For instance, if you don't want the agent to be able to click or type for the guest or draw over the guest's screen, you are able to disable it there with the click of a button!

Finally, you can also configure a default link to show for a link-based session. In a link-based session, a link would be generated and shared with the guest. For more info on what type of sessions there are and how to use co-browsing please check this article. 

You can see a brief overview of what co-browsing could look like once implemented in our video below.