Objective
Use the 8x8 Co-Browsing feature with 8x8 Contact Center chat on websites.
Applies To
- 8x8 Contact Center
- Chat
- Co-Browsing
Procedure
1a2b3c4d5e6f789 has been used as an example co-browsing license in this article and will need to be replaced with your own co-browsing license
- Add the code snippet within the <body> tags on the web page. Your code is in the following format:
<script>
(function(e,i,g,h,t,c,o,b,r,w){r=i.createElement(g);r.setAttribute(h,c);o&&r.setAttribute(o,b);
r.async=1;r.src='https://'+t+'/license'+c+'/dist/primary-bundle.js';
w=i.getElementsByTagName(g)[0];w.parentNode.insertBefore(r,w);
})(window,document,'script','data-8x8-co-browsing','<Co-browse-server-domain-and-port>','<Co-browse-license-id>','data-8x8-co-browsing-mode','<Co-browse-mode>');
</script>
- Edit the parameters with the values provided by 8x8:
<co-browsing-server-domain-and-port>: Refers to the domain and port for the Co-browsing server. Replace it with cb.8x8.com <co-browsing-license-id>: 1a2b3c4d5e6f789 <Co-browse-mode>: Refers to the Co-browsing mode. Select one of the three types—full-control, partial-control, or no-control.
- Your completed code snippet should look like this. Note: the value for co-browsing-license-id is a variable.
<body>
<script>
(function(e,i,g,h,t,c,o,b,r,w){r=i.createElement(g);r.setAttribute(h,c);o&&r.setAttribute(o,b);
r.async=1;r.src='https://'+t+'/license'+c+'/dist/primary-bundle.js';
w=i.getElementsByTagName(g)[0];w.parentNode.insertBefore(r,w);
})(window,document,'script','data-8x8-co-browsing','cb.8x8.com','1a2b3c4d5e6f789','data-8x8-co-browsing-mode','full-control');
</script>
</body>
- Save these changes to the web page. With this, you have enabled your web page with co-browsing capability.
Add a user interface link to initiate the Co-browsing session
You can add a simple help link or a help button on your website that allows website visitors to trigger the remote session. The website visitor clicks on this link to generate a unique session code. For example:
<a href="#" onclick="window.coBrowsingInstance && coBrowsingInstance.showPopup();return false;">Help </a>
Additional Information
For more information, see our product documentation on Enabling Co-Browsing.