Loading...

JavaScript SDK

Listening for Events

Listening for events

You can listen for events by running the following code.

Upscope('on', ...eventNames, callbackFunction);

List of events

Event Name

Additional arguments

Description

agentsAvailable

Indicates that agents are available and waiting for requests on the Upscope dashboard.

agentRequestUpdate

status: "pending" | "accepted" | "available" | "canceled"

Gives you updates about the status of the current agent request.

callAccepted

An audio call has been accepted by the visitor.

callEnd

An audio call has ended.

callStart

An audio call has started.

connection

The connection has been established with Upscope's servers.

connectionReset

The connection has been reset, and there will be a new visitor created.

newObserver

observerId: string, observerData: {

id: string;

name: string | null;

screenWidth: number;

screenHeight: number;

}

Someone new is now observing as an agent.

observerGone

observerId: string

observerId is no longer observing.

observerContentVisible

observerId: string

observerId can now see the content (it is no longer loading).

observersCount

count: number

Provides an accurate tally of the number of people currently observing

sessionEnd

A session has ended.

sessionRequest

An agent is asking to start a session.

sessionContinue

A session is continuing from a previous pageview

sessionStart

A session has started.

waitingForCall

The visitor has gotten to the page from an agent's personal link.

customMessage

sender: { observerId: string }, message: Record<string, any>

A custom message sent by observerId.

Example

Here's an example of how to use the events API to show a message to the visitor when a session is active.

<div id="upscope-active" style="display: none;">
  Screen sharing active.
</div>
<script>
  const activeElement = document.getElementById('upscope-active');
  Upscope('on', 'sessionStart', 'sessionContinue', () => {
    activeElement.style.display = 'block';
  });
  Upscope('on', 'sessionEnd', () => {
    activeElement.style.display = 'none';
  });
</script>


Tracking event data such as clicks

All events that originate from the agent will have a isUpscopeBrowserInstruction attribute set to true.

For example:

button.addEventListener("click", evt => console.log("Clicked by", evt.isUpscopeBrowserInstruction ? "agent" : "user"))