Median provides comprehensive API access to our distributed JavaScript bundles and to our application itself for fetching data about CoBrowsing sessions and embedding sessions within your own application.
With Median's CoBrowse API, you can generate and embed CoBrowsing sessions into your own web application, seamlessly creating your own CoBrowsing product.
If you have any questions, or if anything is unclear in these docs, we'd love to chat -- drop us a line at engineering@hellomedian.com with thoughts, questions, or changes.
A Median CoBrowsing session consists of three main components:
Subaccount
A subaccount is a concept for an individual customer. Since a subaccount dictates where traffic is routed to, we recommend grouping each invividual customer or installation to its own subaccount.
For example, if you have one customer who would like to be able to CoBrowse across 5 different websites, you'd use the same subaccount for all 5 sites.
Median authorizes CoBrowse sessions using this information, provides analytics, and routes traffic according to subaccounts, and we strongly discourage sharing sub-ccounts between unrelated parties.
Subaccounts are created and managed via the Subaccount REST API.
Visitor
A visitor is the final end user that a CoBrowsing session connects to. Think of a visitor as the person that an agent is working with. They're the end customer, browsing a website, looking for assistance.
The Visitor JavaScript snippet keeps track of which visitors are available for CoBrowsing and enables CoBrowsing to happen.
Viewer
The viewer is a JavaScript SDK that allows an agent to interact with and view the browser of a visitor. Typically, a viewer is presented to a customer service or sales agent, so they can CoBrowse with the customer they're interacting with.
The viewer requires a signed token of the subaccount and visitor ID to connect to.
Median's sub-account API makes it easy to create, fetch, and update sub-accounts with RESTful API calls. Each sub-account is identified by a UUID, which is the same ID that you'll use to initialize a visitor snippet, as well as a name provided on creation.
Median's REST API uses Basic HTTP Authentication to authenticate requests against our endpoints.
In order for a successful API request to be made, they must include your API key as the username in a Basic HTTP Authentication. It doesn't matter what the password is set to, but we recommend setting it to blank.
Most REST clients and libraries support HTTP Basic out of the box, but Median will look for an Authorization header with the value of Basic :api_key to be set.
curl "https://app.hellomedian.com/{endpoint}" -u '<API KEY>:'
Header 'Authorization: Basic <ENCODED API KEY>'
| Property | Description |
|---|---|
id <String> |
The UUID of the sub-account |
dev_mode <Boolean> |
Default: False - When enabled, the viewer for this organization will disable asset proxying. |
request_permission <Boolean> |
Default: False
- When enabled, request permission from visitors before initiating a CoBrowse session. |
request_permission_text <String> |
Default: Allow agent to view your browser window?
- The text that a visitor sees when being asked to initiate a session, if request_permission is enabled. |
phone_mode <Boolean> |
Default: True
- When enabled, the visitor can press the control button five times to receive a six-digit code an agent can use to start a CoBrowsing session. |
excluded_selectors<Array<String>> |
An array of CSS classes. For any form or input on a page that matches any excluded selectors, no placeholder, value, or input text will be sent across during CoBrowse sessions. |
name <String> |
The name of a sub-account, which is used for your own internal identification purposes. In a reseller setting, we recommend setting the name to be the name of the company associated with the sub-account. |
last_socket_at <timestamp> |
The timestamp we've last seen any active connections from the visitor snippet. This, along with the sub-accounts tab in our app, is a nice way to debug installation issues. |
last_screenshare_at <timestamp> |
The timestamp of the most recent CoBrowse session |
{
"dev_mode": false,
"request_permission": true,
"request_permission_text": "Give agent permission to view your browser?",
"excluded_selectors": ["contact-form"],
"viewer_permission_description_text": "Request permission to start CoBrowsing session?",
"viewer_permission_button_text": "Request Permission",
"id": "b265871b-3d10-4ab2-9259-73018b7d0f4c",
"phone_mode": true,
"name": "Median",
"last_socket_at": "2018-05-25T16:35:46.034Z",
"last_screenshare_at": "2018-05-25T16:01:57.547Z",
"education": true
}
Lists all subaccounts attached to your provider account.
curl "https://app.hellomedian.com/v1/sub_accounts/" \
-u '<API KEY>:'
[{
"dev_mode": false,
"request_permission": true,
"request_permission_text": "Give agent permission to view your browser?",
"excluded_selectors": ["contact-form"],
"viewer_permission_description_text": "Request permission to start CoBrowsing session?",
"viewer_permission_button_text": "Request Permission",
"id": "b265871b-3d10-4ab2-9259-73018b7d0f4c",
"phone_mode": true,
"name": "Median",
"last_socket_at": "2018-05-25T16:35:46.034Z",
"last_screenshare_at": "2018-05-25T16:01:57.547Z",
"education": true
},
"<SubAccount Object{...}>"
"<SubAccount Object{...}>",
"..."
]
Creates a new Subaccount. This will return the ID of the subaccount, which you'll need in order to facilitate CoBrowsing.
| Property | Description |
|---|---|
name |
(required) Name of the Subaccount |
dev_mode <Boolean> |
(optional)
Default: False
- When enabled, the viewer for this organization will disable asset proxying. |
request_permission <Boolean> |
(optional)
Default: False
- When enabled, request permission from visitors before initiating a CoBrowse session. |
request_permission_text <String> |
(optional)
Default: Allow agent to view your browser window?
- The text that a visitor sees when being asked to initiate a session, if request_permission is enabled. |
phone_mode <Boolean> |
(optional)
Default: True
- When enabled, the visitor can press the control button five times to receive a six-digit code an agent can use to start a CoBrowsing session. |
excluded_selectors<Array<String>> |
(optional) An array of CSS classes. For any form or input on a page that matches any excluded selectors, no placeholder, value, or input text will be sent across during CoBrowse sessions. |
education <Boolean> |
(optional)
Default: True
- Education allows an agent to display their cursor and scroll the visitor's screen, as well as highlight specific elements. They may not actually take control or modify anything on the page. |
action_control <Boolean> |
(optional)
Default: False
- Action Control allows an agent to request permission to take over and control their browser window. |
curl -X "POST" "https://app.hellomedian.com/v1/sub_accounts/" \
-H 'Content-Type: application/json; charset=utf-8' \
-u '<API Key>:' \
-d $'{
"name": "New Account"
}'
{
"name": "New Account"
}
{
"dev_mode": false,
"request_permission": true,
"request_permission_text": "Give agent permission to view your browser?",
"excluded_selectors": [],
"viewer_permission_description_text": "Request permission to start CoBrowsing session?",
"viewer_permission_button_text": "Request Permission",
"id": "b265871b-3d10-4ab2-9259-73018b7d0f4c",
"phone_mode": false,
"name": "New Account",
"last_socket_at": null,
"last_screenshare_at": null,
"education": true,
"action_control": false
}
Updates a subaccount with any indivdual piece of data you'd like to update.
| Property | Description |
|---|---|
name |
(optional) Name of the Subaccount |
dev_mode <Boolean> |
(optional)
Default: False
- When enabled, the viewer for this organization will disable asset proxying. |
request_permission <Boolean> |
(optional)
Default: False
- When enabled, request permission from visitors before initiating a CoBrowse session. |
request_permission_text <String> |
(optional)
Default: Allow agent to view your browser window?
- The text that a visitor sees when being asked to initiate a session, if request_permission is enabled. |
phone_mode <Boolean> |
(optional)
Default: True
- When enabled, the visitor can press the control button five times to receive a six-digit code an agent can use to start a CoBrowsing session. |
excluded_selectors<Array<String>> |
(optional) An array of CSS classes. For any form or input on a page that matches any excluded selectors, no placeholder, value, or input text will be sent across during CoBrowse sessions. |
education <Boolean> |
(optional)
Default: True
- Education allows an agent to display their cursor and scroll the visitor's screen, as well as highlight specific elements. They may not actually take control or modify anything on the page. |
action_control <Boolean> |
(optional)
Default: False
- Action Control allows an agent to request permission to take over and control their browser window. |
curl -X "PUT" "https://app.hellomedian.com/v1/sub_accounts/{subaccount_id}" \
-H 'Content-Type: application/json; charset=utf-8' \
-u '<API KEY>:' \
-d $'{
"phone_mode": "true"
}'
{
"phone_mode": true,
}
{
"dev_mode": false,
"request_permission": true,
"request_permission_text": "Give agent permission to view your browser?",
"excluded_selectors": [],
"viewer_permission_description_text": "Request permission to start CoBrowsing session?",
"viewer_permission_button_text": "Request Permission",
"id": "b265871b-3d10-4ab2-9259-73018b7d0f4c",
"phone_mode": true,
"name": "New Account",
"last_socket_at": null,
"last_screenshare_at": null,
"education": true,
"action": false
}
Deletes a subaccount.
Note: If a subaccount is deleted while visitor snippets are still using it, CoBrowsing sessions will no longer work and the visitor may respond with 503 errors.
curl -X "DELETE" "https://app.hellomedian.com/v1/sub_accounts/b265871b-3d10-4ab2-9259-73018b7d0f4c" \
-u '<API KEY>:'
HTTP 204
Much like when Mufasa tells Simba "Everything the light touches is our kingdom," everywhere the Median visitor JavaScript snippet is installed is a location a CoBrowse session can happen.
For a CoBrowse session to happen successfully, we recommend installing Median's JS in every place you'd install a chat widget or Google Analytics. As a user moves between pages, Median will automatically re-connect that user to a session if it's active.
Median assigns a unique, random GUID to each visitor that touches a page with the snippet installed and saves it in that user's browser as a cookie called mdn_anonymous_id. This is the ID responsible for identifying a visitor within Median and continuing a session between pageviews.
This is a commented out, unminified version of Median's JavaScript Snippet.
// Start Median Loader Snippet
(function() {
// This is an unminified and commented version of our JavaScript Snippet.
var Median = window.Median = window.Median || [];
// Stop loading snippet if real Median already initialized.
if (Median._initialized) return;
// Warn if snippet loaded twice
if (Median._snippet_loaded) {
console.warn('Median Snippet loaded twice.');
return;
}
Median._snippet_loaded = true;
Median._snippet_version = 4; // Just so we know what's out there.
Median.methods = ['init', 'identify', 'endSession', 'on', 'grantPermission', 'denyPermission', 'endActionControl', 'denyAction', 'grantAction'];
// Alias all methods that Median uses and pushes them into a queue
// When Median loads, it will execute them in the order they were called.
Median.factory = function(method) {
return function() {
var args = Array.prototype.slice.call(arguments);
Median.push([method, args]);
}
};
// Stub out all methods.
for (var i = 0; i < Median.methods.length; i++) {
var method = Median.methods[i];
Median[method] = Median.factory(method);
};
// Pull down and load Median.
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = "https://js.hellomedian.com/v1/mdn-screenshare.js";
var firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(script, firstScript);
})();
// End Median Loader Snippet
It's helpful to add context when looking at a list of online visitors or when working with multiple CoBrowse sessions.
Median makes it simple to pass custom identifiers, such as email addresses, user ID's, or any other custom piece of identifying information you'd like to use.
On any page with Median's snippet installed, you can call Median.identify(); anywhere after the snippet.
The identify method accepts any string. We recommend setting the value to something easily readable by agents.
We recommend calling the identify() method on every page load that you have the Median snippet installed, but once a user is identified, we will display the previously set identity, even if identify() hasn't been called on the page.
Once identified, the provided string will appear in both Median's list of online users, as well as in the information bar at the top of a screensharing session.
Identification in the CoBrowse API Setting
We recommend that our CoBrowse API customers use the identify() method to easier associate an anoymous user with a known value. For example, if you're embedding Median within a live chat application, you'd want to use some kind of ID you're already assigning the customer.
// Use a string reconizable by your agents, such as an email address
Median.identify('visitor@hellomedian.com')
// Or, use a system string in order to string sessions together when using the CoBrowse API
Median.identify('5266871b-3dc0-4ab2-9259-73018b7c1x5d')
Median's visitor snippet requires you to initialize Median with the Subaccount GUID you'd like to bind the visitor to.
There are several optional parameters that can be passed in a configuration option in the instance that you'd like to control the specific behavior of the snippet.
The optional configuration object is as follows:
| Option | Description |
|---|---|
integrations <Boolean> |
Default: true - Median will automatically detect and integrate with 15 or so customer service producs, such as Olark and Intercom. Set to false to disable this behavior. |
window <DOM Window Object> |
In an instance where you're loading Median via an iFrame in the page, or in an instance where you'd like to specifically mirror an iFrame, you can pass in any window object that Median will CoBrowse. |
displayPermissionDialog <Boolean> |
Default: true - whether or not to use Median's default permission box. See below example for how to override this. |
displayActionPermission <Boolean> |
Default: true - whether or not to use Median's default Action Control permission box. See below example for how to override this. |
Note: If you set displayPermissionDialog or displayActionPermission to false, you must use Median's permission events to respond to and handle permission requests, otherwise a session or action controls will never start.
Median.init('b265871b-3d10-4ab2-9259-73018b7d0f4c') // Subaccount ID
By default, Median will use a window.confirm() method to request session permission from the end user.
You may wish to override this and build permissions into your own customer-facing application. This will allow you to control what happens when an agent asks to start a session with the visitor.
Median.init('b265871b-3d10-4ab2-9259-73018b7d0f4c', {displayPermissionDialog: false, displayActionPermission: false})
// Overriding Median's permission box with our own logic
// The sessionPermissionRequested event will include
// the permission text set via app or CoBrowse REST API
Median.on('sessionPermissionRequested', (permissionText) => {
console.log('Permission to start a session has been requested.')
const permission = window.confirm(permissionText)
if (permission) {
console.log('User granted permission to start a session')
Median.grantPermission()
} else {
console.log('User denied permission to start a session')
Median.denyPermission()
}
})
Median.on('actionPermissionRequested', () => {
console.log('Action Control Has Been Requested.')
const permission = window.confirm("Allow agent to control your browser window?")
if (permission) {
console.log('User granted permission to start a session')
Median.grantAction()
} else {
console.log('User denied permission to start a session')
Median.denyAction()
}
})
You may end an active Action Control session at any time with our handy-dandy endActionControl method:
Median.endActionControl();
You can bind your own event handlers to one of several events:
| Event Name | Description |
|---|---|
initialized |
Called when the snippet has been loaded. |
identifiedVisitor |
Called after a visitor has been successfully identified. Includes the identification data. |
sessionStarted |
Called when a session has begun. |
sessionEnded |
Called when a session has ended, from either party ending, or from a disconnect timeout. |
sessionPermissionRequested |
Called when an agent is requesting permission to start a session. Depending on initialization configurations, this may require you to manually grant permissions. |
sessionPermissionGranted |
Called when session permission is granted. |
sessionPermissionDenied |
Called when session permission is denied. |
actionControlStarted |
Called when Action Control has been started by the agent. |
actionControlEnded |
Called when Action Control has been started by either party. |
actionPermissionRequested |
Called when Action Control has been requested by the agent. |
actionPermissionGranted |
Called when Action Control has been granted by the visitor. |
actionPermissionDenied |
Called when Action Control has been denied by the visitor. |
You may bind as many event handlers to an event as you'd like, there isn't any one-function-handles-all strategy
Median.on('initialized', () => console.log('Median Script Loaded'));
// Once identified, this callback will include the details of the identification.
Median.on('identifiedVisitor', (details) => console.log('Identified Visitor', detail));
Median.on('sessionStarted', () => console.log('Median Session Started'));
Median.on('sessionEnded', () => console.log('Median Session Ended'));
// This includes the request_permission text set in the app or via the CoBrowse REST API
Median.on('sessionPermissionRequested', (appConfiguredPermissionText) => console.log('Requesting permission from visitor', appConfiguredPermissionText))
Median.on('sessionPermissionGranted', () => console.log('Visitor granted permission to start session'));
Median.on('sessionPermissionDenied', () => console.log('Visitor denied permission to start session'));
Median.on('actionControlStarted', () => console.log('Median actionControl Started'));
Median.on('actionControlEnded', () => console.log('Median actionControl Ended'));
Median.on('actionPermissionRequested', () => console.log('Action Permission Reuqested'));
Median.on('actionPermissionGranted', () => console.log('Action Permission Granted'));
Median.on('actionPermissionDenied', () => console.log('Action Permisson Denied'));
Median's Viewer is the opposing side of the visitor -- it's what allows agents to see and interact with visitors.
Median's viewer has several configuration options and events that allow you to customize the look and feel to match your application.
You can call the following methods on a constructed viewer object:
| Method Name | Description |
|---|---|
on(name: string, callback: Function) |
Median.on()
is the function used to bind to any viewer event. |
visitorProperties() |
Returns an object containing information about the visitor such as their user agent, anonymous ID, and time they connected to the session, and their location. |
sessionStatus() |
Indicates the current state of the session (active, disconnected, etc) |
endSession() |
Ends the active session and displays a reconnect modal. |
destroySession() |
Destroys the entire Median object and closes all active network connections. -- This is useful in single page applications who are starting and switching between multiple sessions. |
requestSessionPermission() |
Fires a request to the visitor to start a session. If a session has already been authorized, it will connect immediately. |
requestActionControlPermission() |
Fires a request to the visitor to start action control. If action control has already been authorized, it will start immediately. |
endActionControl() |
Turns off action control. |
startEducationControl() |
Start education control -- the agent's cursor and scrolling actions will be replicated to the visitor. |
endEducationControl() |
Ends education control. |
startHighlighting() |
Starts highlighting mode -- highlighing works like Chrome's dev tools and allows an agent to select a specific element that will be highlighted on the visitor's screen. |
endHighlighting() |
Ends highlighting -- note that when highlighting is enabled, it's automatically disabled once an agent has selected anything. This will end highlighting mode if the process hasn't been completed. |
You may bind as many event handlers to an event as you'd like, there isn't any one-function-handles-all strategy
You can bind your own event handlers to one of several events:
| Event Name | Description |
|---|---|
initialized |
Called when the snippet has been loaded. |
sessionStarted |
Called when a session has begun. |
sessionEnded |
Called when a session has ended, from either party ending, or from a disconnect timeout. |
sessionPainted |
Called when the initial root document of the visitor has been painted and is live on the viewer's page. This will be called each time visitor reloads or moves between pages. |
sessionPermissionRequested |
Called when session permission has been requested. |
sessionPermissionGranted |
Called when session permission is granted. |
sessionPermissionDenied |
Called when session permission is denied. |
visitorConnected |
Called when the visitor has come back online. Note: Visitors will disconnect and reconnect between pageviews. |
visitorDisconnected |
Called when the visitor goes offline. |
educationControlStarted |
Called when education control has started via API or from standard user interface. |
educationControlEnded |
Called when education control has ended via API or from standard user interface. |
highlightingStarted |
Called when highlighting has started via API or from standard user interface. |
highlightingEnded |
Called when highlighting has ended via API or from standard user interface. |
actionControlStarted |
Called when Action Control has been started by the agent. |
actionControlEnded |
Called when Action Control has been ended by either party. |
actionControlPermissionRequested |
Called when Action Control has been requested by the agent. |
actionControlPermissionGranted |
Called when Action Control has been granted by the visitor. |
actionControlPermissionDenied |
Called when Action Control has been denied by the visitor. |
requestActionPermission |
Called when the viewer is prepared and ready for a user to request action permission. |
requestSessionPermission |
Called when the viewer is prepared and ready for a user to request session permission. |
const median = new MedianViewer('<%= @token %>', {showInfoBar: false, showCollaborationUI: false, showStatusModal: false, constrainToParent: true});
// Here are all the events you can respond to.
median.on('initialized', () => console.log('median Script Loaded'));
median.on('sessionStarted', () => console.log('median Session Started'));
median.on('sessionEnded', () => console.log('median Session Ended'));
median.on('sessionPermissionRequested', () => console.log('Requesting permission from visitor'))
median.on('sessionPermissionGranted', () => console.log('Visitor granted permission to start session'));
median.on('sessionPermissionDenied', () => console.log('Visitor denied permission to start session'));
// These don't necessarily mean a session has ended -- if a visitor moves between pages in an active session, they will disconnect and reconnect from the socket server.
median.on('visitorConnected', () => console.log('Visitor has connected'));
median.on('visitorDisconnected', () => console.log('Visitor has disconnected.'));
median.on('requestActionPermission', () => console.log('requestActionPermission'));
median.on('requestSessionPermission', () => console.log('requestSessionPermission'));
median.on('educationControlStarted', () => console.log('educationControlStarted'));
median.on('educationControlEnded', () => console.log('educationControlEnded'));
median.on('highlightingStarted', () => console.log('highlightingStarted'));
median.on('highlightingEnded', () => console.log('highlightingEnded'));
median.on('actionControlStarted', () => console.log('actionStarted'));
median.on('actionControlEnded', () => console.log('actionEnded'));
median.on('actionControlPermissionGranted', () => console.log('actionControlPermissionGranted'));
median.on('actionControlPermissionDenied', () => console.log('actionControlPermissionDenied'));
window.Median = median;
You can pass in an object of options when calling:
new MedianViewer(token, {options})
| Option | Description |
|---|---|
showInfoBar: boolean |
Default: true - Hides the top informational bar when set to false. |
showCollaborationUI: boolean |
Default: true - Hides the agent action and education control toolbar when false. |
showStatusModal: boolean |
Default: true - Hides the center modal that displays connection state and permission buttons. |
constrainToParent: boolean |
Default: false - By default, the viewer will constrain itself and automatically resize itself in proportion to the document of the page it's placed on. When this is enabled, it will constrain itself to the inside of any parent element that the
median-viewer
div was placed in, allowing you to place and style it any way you please. |
Using Median's CoBrowse API requires a few steps. We'll walk through the entire process of deploying a CoBrowsing session with a visitor inside your own application.
In order to get a CoBrowsing session up and running, we'll:
Note: Accounts with CoBrowse API enabled come with a default subaccount which you can use for testing. Median also will default to that subaccount, so you can install the visitor snippet on a test site and then visit your dashboard to see how the viewer works within our app before you implement it yourself.
Median's CoBrowse API uses subaccounts to group visitors into common installations. We recommend creating a subaccount for each unique company, website, or installation you're interested in deploying Median on. We authorize CoBrowse sessions using this information, provide analytics, and route traffic according to subaccounts, and we strongly discourage sharing subaccounts between unrelated parties.
Median automatically creates a subaccount for all API customers on signup, which we provide for free as a testing tool. For the purposes of this guide, though, we'll create a new subaccount via the REST API for our use. You may also create a subaccount via the settings in our application.
Once we've grabbed our API key from Median, we'll make a REST call with a few settings. We'll give it the name "Customer A", and we'll enable requesting permission from the user before a CoBrowsing session can start.
Median uses HTTP Basic authentication for REST calls. The username must be set to your API key, and the password should be blank.
We send a POST request to https://app.hellomedian.com/v1/sub_accounts/ with a JSON encoded object:
Once posted, we'll get a 201 Created response that contains the subaccount object data:
This object contains all current settings for the subaccount, and most importantly, its ID. Store this ID, as it will be used for the Visitor snippet as well as when starting CoBrowse sessions. Check here for a list of all REST API endpoints and how to use them.
{
"name": "Customer A",
"request_permission": "true"
}
{
"dev_mode": false,
"request_permission": true,
"request_permission_text": "...",
"excluded_selectors": [],
"id": "63290b57-7387-4937-98ea-886ed2bf43fc",
"phone_mode": false,
"name": "Customer A",
"last_socket_at": null,
"last_screenshare_at": null,
"action_control": false,
"education": true,
}
After creating a subaccount, we need to implement the Visitor JS snippet. On a Page of Customer A, we'll need to load the visitor snippet and call an init method:
Note that the ID passed into the init() call is the same ID we got back after creating Customer A.
Median's visitor snippet will automatically create an anonymous GUID for the visitor, but we recommend also identifying the visitor with a unique ID associated with your system. If you're already tracking session ID's, visitor ID's, or some other kind of identifiable data, you'll want to use this by calling:
Identify accepts any valid string.
Median.init("63290b57-7387-4937-98ea-886ed2bf43fc");
Median.identify('visitor_1234');
Once we've identified a visitior (in this case with the ID visitor_1234), we'll want to start a CoBrowsing session by creating a viewer. To do so, we have to tell Median which visitor and subaccount we'd like to CoBrowse with. Median uses JSON Web Tokens, which are an open standard for signing claims with a secret key.
We'll create a simple JSON object, encoded with all relevant data relating to the viewer we wish to connect to:
| Property | Description |
|---|---|
iss |
|
sub |
|
exp |
We'll want to sign this token using HMAC-256 (HS256), the standard for JWT's. We highly recommend using one of the excellent JWT libraries found here. Also, see our detailed guide to creating and signing tokens.
{
"iss": "63290b57-7387-4937-98ea-886ed2bf43fc",
"sub": "visitor_1234",
"exp": 1520532451
}
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI2MzI5MGI1Ny03Mzg3LTQ5MzctOThlYS04ODZlZDJiZjQzZmMiLCJzdWIiOiJ2aXNpdG9yXzEyMzQiLCJleHAiOjE1MjA1MzI0NTEsImlhdCI6MTUyMDUzMTU1MX0.yLfhFY3RSXrMos0JsFCAYz7Jwygdl5I3SREXu4M6uX4"
// Signed with string'1234'
Once we have our signed token, we can use it to insert a viewer into a webpage
Median will automatically look for a div with the ID median-viewer and populate it with an iFrame that will be filled with the visitor's status and screen.
<div id="median-viewer"></div>
<script src="https://js.hellomedian.com/v1/median-viewer.js"></script>
<script>
const median = new MedianViewer(token, {options});
</script>
You can find a full Rails implementation here.
You can find a full NodeJS implementation here.