Connecting to user devices using a 6-digit support code flow is a reliable way to begin sessions. You can review ways to connect to users here: how do I connect to the right device?
The general flow happens as follows:
- Agent directs user to take an action on your website or mobile app. This action is decided by you.
- User takes the action and is presented with a 6-digit support code.
- The support code is passed to the agent, usually by:
- customer reading it out over the phone
- customer typing into the live chat
- you programmatically pass the code to the agent as part of your technical integration
- Once the agent has the code, they enter it into the Cobrowse UI and the session consent flow begins. This can be done using our default user interface, or through your own custom integration.
We focus on steps 1 and 2 in this article. Business and technical resources from your team may need to work together to find the best solution for your company.
How to generate the support code (UX)
You should decide how users can generate codes. Some considerations for this are:
- Keep the steps simple. Examples include:
- A clearly-labelled button click (hyperlink) in the footer of your website, e.g. Agent Assist, Support/Care Code, Screen share, etc.
- A standalone Cobrowse/Screen share webpage with a support code button as a single clear call to action
-
- A support page in your mobile application
- Choose a method which supports all platforms your users are on, e.g. use web APIs that support all major web browsers (including mobile browsers, if your users are on mobile web)
We have some example ideas on web platforms at the below page:
https://cobrowse-sdk-js-examples.cbrws.io/support-code-examples.html
with source code available at:
https://github.com/cobrowseio/cobrowse-sdk-js-examples/blob/master/support-code-examples.html.
Our technical documentation for 6-digit codes can be found at this page: https://docs.cobrowse.io/sdk-features/6-digit-codes.
How to display the support code (UI)
You should decide what is displayed to users after they take the action to generate the code. All UI can be customized to meet your branding and requirements. Some considerations are:
- Make the support code clear and visible
- Make sure users know what to do with the support code, e.g. they should be in conversation with an agent to use the code if your supported channel is voice
- You might want to inform users about what will happen when they use the code. We have seen clients include:
- that this is a flow to begin a Cobrowse session, and what that means
- legal or privacy notices
- what will and will not be seen by agents
- that this 6-digit code prompt is completely separate from the session consent prompt, and so you may decide that different information is appropriate in this UI versus the consent.
We have two different UI examples on our sample pages:
https://cobrowse-sdk-js-examples.cbrws.io/support-code-examples.html
https://cobrowse-sdk-js-examples.cbrws.io/standalone-support-code.html
Source code: https://github.com/cobrowseio/cobrowse-sdk-js-examples/blob/master/standalone-support-code.html.
Example text (based on a production deployment)
The following example is based on a web-only deployment with a voice support channel, which has our redaction feature implemented and our remote control feature disabled.
After a hyperlink footer click labelled as Agent Assist, the below modal appears with the text:
Share Screen
- This process allows you to share your screen with a customer service agent for support purposes.
- You must currently be interacting with an agent.
- Only specific web pages and fields are visible to the agent.
- The agent will not see your user name, password or other sensitive information, nor will they be able to take control or make any changes.
- If you are currently on-line with an agent and would like to proceed, please follow their instructions for next steps.
- For additional information about how we process your data, please review our Privacy Statement.
Any questions?
Please email us at hello@cobrowse.io!