6-digit code screen
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:
Web
1
// A generic Alert class
2
function Alert() {
3
var container = document.createElement('div');
4
5
function content(title, description){
6
return '\
7
<div style="background: rgba(50, 50, 50, 0.4); position: fixed; z-index: 2147483647; bottom: 0; top: 0; left: 0; right: 0">\
8
<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;">\
9
<div style="text-align:center; margin-top:10px; margin-bottom:20px"><b>'+title+'</b></div>\
10
<div>'+description+'</div>\
11
<div style="float:right; margin-top:40px; color:rgb(0, 122, 255);">\
12
<a class="cobrowse-close" style="cursor:pointer; padding:10px;">Close</a>\
13
</div>\
14
</div>\
15
</div>\
16
';
17
}
18
19
this.show = function(title, description) {
20
return new Promise(function(resolve) {
21
// always replace content to remove listeners;
22
container.innerHTML = content(title, description);
23
container.querySelector('.cobrowse-close').addEventListener('click', function(){ resolve(true); this.hide() }.bind(this));
24
if (document.body) document.body.appendChild(container);
25
}.bind(this));
26
}.bind(this);
27
28
this.hide = function() {
29
if (container.parentNode) {
30
container.parentNode.removeChild(container);
31
}
32
}.bind(this);
33
}
34
35
function showSessionCode() {
36
// ensure Cobrowse is loaded
37
CobrowseIO.client().then(function() {
38
// create a code a display it to the user
39
CobrowseIO.createSessionCode().then(function(code) {
40
new Alert().show('Support Code', 'Your Support Code is '+code);
41
});
42
});
43
}
44
45
// Important: you should not create session codes until your user needs
46
// them. They will expire shortly after creation so do not create them when
47
// the page loads. Instead we provide a button the user can click to generate
48
// a new code.
49
var button = document.createElement('a');
50
button.innerHTML = '<b>Create a Support Code</b>';
51
document.body.appendChild(button);
52
button.addEventListener('click', showSessionCode);
53
Copied!
Copy link
Contents
Example UIs