Implementing Web Messaging Co-Browse for Regulated Industries with Field Masking

How-To-Articles
1

Implementing Web Messaging Co-Browse for Regulated Industries with Field Masking

What This Guide Covers

This masterclass details the implementation of Genesys Cloud Co-Browse within a Web Messaging deployment, specifically tailored for regulated industries (Finance, Healthcare, Insurance). By the end of this guide, you will be able to configure a secure co-browsing experience where agents can see the customer’s screen and provide guided navigation without ever seeing sensitive data like Credit Card numbers, SSNs, or medical records, ensuring full compliance with PCI-DSS and HIPAA.

Prerequisites, Roles & Licensing

Co-browse requires a combination of web-side deployment and platform-level security policies.

  • Licensing: Genesys Cloud CX 1, 2, or 3.
  • Permissions:
    • Co-browse > Session > View/Add
    • Messaging > Deployment > View/Edit
  • OAuth Scopes: cobrowse, messaging.
  • Infrastructure: A provisioned Web Messaging Deployment and the Co-browse SDK installed on your website.

The Implementation Deep-Dive

1. Enabling Co-Browse in the Messaging Deployment

Co-browse is not a separate channel; it is a “Plug-in” to an existing Web Messaging session.

Configuration Step:

  1. Navigate to Admin > Message > Messenger Deployments.
  2. Select your deployment and enable the Co-browse toggle.
  3. Configure the Session Start Type:
    • Agent-Initiated: The agent sends an invitation link in the chat. (Recommended for regulated industries).
    • Customer-Initiated: The customer clicks a button to start sharing.

2. Implementing CSS-Based Field Masking

The most critical security step is ensuring that sensitive fields are never transmitted to the agent. This is handled on the client-side (the browser) before the data ever leaves the customer’s device.

Implementation Pattern:
Use the genesys-cobrowse-mask class or the data-genesys-cobrowse-mask attribute on any HTML element you wish to hide.

<!-- Example: Masking a Credit Card Input -->
<input type="text" name="cc_number" class="genesys-cobrowse-mask" placeholder="Enter Card Number">

<!-- Example: Masking a full container of sensitive data -->
<div data-genesys-cobrowse-mask="true">
  <p>Account Balance: $1,245.00</p>
  <p>Tax ID: 999-00-1234</p>
</div>

Architectural Reasoning:
When a field is masked, the Genesys Cloud Co-browse service replaces the content with a placeholder (e.g., a gray box) in the agent’s view. The agent literally cannot see the underlying data because it is stripped from the DOM-mirroring stream at the source.

3. Configuring “Read-Only” vs. “Full Control”

In highly regulated environments, agents should often be restricted to a “Read-Only” view to prevent them from inadvertently clicking “Submit” on a financial transaction.

Implementation Step:
In the Co-browse Settings, disable the Control permission for the agent role. This allows the agent to use a “Laser Pointer” to guide the customer but prevents them from interacting with any form elements or buttons.

4. Handling Dynamic Content and iFrames

Co-browse works by mirroring the DOM. If your site uses third-party iFrames (e.g., a payment gateway), co-browse will not be able to see into them unless the Co-browse SDK is also installed inside that iFrame and configured with the same deployment key.

The Trap:
Assuming the agent can see “everything” on the screen.
The Solution: If the agent needs to see the payment gateway for troubleshooting, ensure the gateway provider allows the injection of the Co-browse snippet. If not, the iFrame will appear as a blank box to the agent, which is often the desired behavior for PCI compliance.

Validation, Edge Cases & Troubleshooting

Edge Case 1: Masking failing on “Shadow DOM” elements

  • The failure condition: You’ve applied the mask class, but the agent can still see the content of a custom web component.
  • The root cause: The Co-browse SDK cannot always traverse the “Shadow DOM” of complex web components.
  • The solution: Apply the data-genesys-cobrowse-mask attribute directly to the Host element of the web component or ensure the component’s internal styles do not override the visibility settings of the masking class.

Edge Case 2: Session Termination on Page Navigation

  • The failure condition: The co-browse session drops every time the customer navigates to a new page on your site.
  • The root cause: The Co-browse SDK is re-initializing on every page load and losing the session token.
  • The solution: Ensure the deploymentId and conversationId are consistent across your subdomains. Use the Messenger SDK to listen for page changes and verify that the co-browse session is “Resumed” rather than “Restarted.”

Official References