Cobrowse.io Docs
  • Getting started
  • SDK Installation
    • Web
    • iOS
    • Android
    • React Native
    • Flutter
    • .NET Mobile
    • macOS
    • Windows
  • SDK Features
    • Account config
    • Identify your devices
    • Use 6-digit codes
    • Redact sensitive data
    • Viewing PDFs
    • Universal Cobrowse
    • Customize the interface
      • Active session controls
      • 6-digit code screen
      • User consent dialog
      • Remote control consent dialog
      • Full device consent dialog
      • Localization / translation
    • Initiate sessions with push
    • Listening for events
    • Full device capabilities
      • Full device screen sharing
      • Full device remote control
      • Managing full device mode
    • Advanced configuration
      • Starting and stopping the SDK
      • Declaring capabilities
      • Intercepting mobile SDK network requests
      • Web
        • IFrames support
        • IE 11 polyfills
        • Cross-domain session support
        • Ignore Views
      • iOS
        • Alternate render method
        • Custom touch handling
      • Android
        • Backporting TLS to older Android versions
  • Agent-side integrations
    • Agent-side overview
    • Platform integrations
      • Zendesk
      • Salesforce
        • Migrating from legacy to v2
        • Salesforce (Legacy)
      • Genesys
        • Genesys Cloud
        • Engage Workspace Web Edition (WWE)
        • Engage Workspace Desktop Edition (WDE)
      • Intercom
      • Freshworks
      • Talkdesk
      • NICE
    • Custom integrations
    • Agent SDK
      • API Reference
      • Sample code snippets
    • Authentication (JWTs)
      • JWT Policies
    • Authentication (SAML 2.0)
    • IFrame embeds
  • Enterprise self-hosting
    • Self-hosting overview
    • Docker Compose
    • Helm chart
      • Image Pull Secret
      • Environment Variables
      • Optional recording components
      • Pod Annotations
    • AWS terraform
      • AWS metrics configuration
    • Azure terraform
      • Azure metrics configuration
    • GCP terraform
      • GCP metrics configuration
    • Sizing guidelines
    • Running your instance
      • Adding a superuser
      • Limiting account creation
      • Limiting magic link recipients
      • Configuring SMTP
      • Managing your deployment
    • Monitoring your instance
      • Available metrics
      • Self-Hosted Prometheus
    • Advanced configuration
      • Air gap configuration
      • Pin web SDK version
      • L7 firewall configuration
      • Docker proxy configuration
    • Troubleshooting
Powered by GitBook
On this page

Was this helpful?

  1. SDK Features
  2. Customize the interface

6-digit code screen

Cobrowse SDK features. If you want to customize the interface, here's how to to use a custom UI for the 6-digit code screen.

PreviousActive session controlsNextUser consent dialog

Last updated 3 months ago

Was this helpful?

For details on how to generate a 6-digit code, please see this page:

Example UIs

Here's some examples of how you can use a custom UI to display a 6 digit code:

// A generic Alert class
function Alert() {
  var container = document.createElement('div');

  function content(title, description){
    return '\
      <div style="background: rgba(50, 50, 50, 0.4); position: fixed; z-index: 2147483647; bottom: 0; top: 0; left: 0; right: 0">\
        <div style="color: #333; font-family:sans-serif; line-height:140%; position:fixed; padding:25px; background:white; border-radius:15px; z-index:2147483647; top:50px; left:50%; width:75%; max-width:350px; transform:translateX(-50%); box-shadow:0px 0px 15px #33333322;">\
          <div style="text-align:center; margin-top:10px; margin-bottom:20px"><b>'+title+'</b></div>\
          <div>'+description+'</div>\
          <div style="float:right; margin-top:40px; color:rgb(0, 122, 255);">\
            <a class="cobrowse-close" style="cursor:pointer; padding:10px;">Close</a>\
          </div>\
        </div>\
      </div>\
    ';
  }

  this.show = function(title, description) {
    return new Promise(function(resolve) {
      // always replace content to remove listeners;
      container.innerHTML = content(title, description);
      container.querySelector('.cobrowse-close').addEventListener('click', function(){ resolve(true); this.hide() }.bind(this));
      if (document.body) document.body.appendChild(container);
    }.bind(this));
  }.bind(this);

  this.hide = function() {
    if (container.parentNode) {
      container.parentNode.removeChild(container);
    }
  }.bind(this);
}

function showSessionCode() {
  // ensure Cobrowse is loaded
  CobrowseIO.client().then(function() {
    // create a code a display it to the user
    CobrowseIO.createSessionCode().then(function(code) {
      new Alert().show('Support Code', 'Your Support Code is '+code);
    });
  });
}

// Important: you should not create session codes until your user needs
// them. They will expire shortly after creation so do not create them when
// the page loads. Instead we provide a button the user can click to generate
// a new code.
var button = document.createElement('a');
button.innerHTML = '<b>Create a Support Code</b>';
document.body.appendChild(button);
button.addEventListener('click', showSessionCode);

An example can be seen at

See this in action: .

Use 6-digit codes
https://github.com/lassana/cobrowse-sdk-android-examples/blob/master/standalone/src/main/java/io/cobrowse/standalone/ui/sessioncode/CobrowseCodeFragment.java
https://github.com/cobrowseio/cobrowse-sdk-js-examples#standalone-support-code-example