Installation

Overview

UserView can be installed using one of the following methods:

1. Installing via Script Tag - Directly add the code snippet to your web page.
2. Installing via NPM - Ideal for projects using a Node.js environment.
3. Installing via React - For React-based applications.

Choose the method that best fits your project's requirements.

npm install --save @upscopeio/react

import { UpscopeProvider } from '@upscopeio/react';
<UpscopeProvider apiKey="<public_api_key>" enabled={true/false}>
  {/* rest of your app */}
</UpscopeProvider>

<UpscopeProvider apiKey="<public_api_key>" enabled={true} uniqueId={user.email}>
  {/* Your application code here */}
</UpscopeProvider>

import { useUpscope } from '@upscopeio/react';
function YourComponent() {
  const {
    Upscope,       // SDK object
    shortId,       // Connected shortId or undefined
    getLookupCode, // Asynchronous function to get lookup code
    listen,        // Event listener function
    reset,         // Reset function
    isSharing      // Boolean indicating active session
  } = useUpscope();
  // Your component logic here
}

import { Masked, NoRemoteControl } from '@upscopeio/react';
function YourComponent() {
  return (
    <>
      <Masked>
        {/* Sensitive Info */}
      </Masked>
      <NoRemoteControl>
        {/* Control Elements */}
      </NoRemoteControl>
    </>
  );
}

import { NoRemoteControl } from '@upscopeio/react';
function YourComponent() {
  return (
    <>
      <NoRemoteControl>
        <label>
          Accept Terms of Service
          <input type="checkbox" />
        </label>
      </NoRemoteControl>
    </>
  );
}

Testing on a Local or Staging Environment

When you test on your own computer or in a staging environment that is not publicly accessible, you might notice some odd rendering issues.

This is because our proxy server is unable to reach your CSS and media files and therefore can't properly edit them to render on the Agent side.

We try to automatically detect if you are on a URL that looks like localhost (e.g. http://127.0.0.1/, http://localhost/, etc.), and send the content of CSS files directly from the Visitor's browser to the Agent's browser.

You can add more URLs for browser proxying in your dashboard settings.

Iframe Support

UserView will work with iframes without you needing to do anything when these are hosted on the same domain. This means that the part of the URL between :// and the first / is exactly the same (i.e. app.acme.com and dashboard.acme.com are considered different domains).

In this case, you only need to add the script to the outermost frame (i.e. the parent page).

You don't need to do anything to make UserView work cross-domain if iframes aren't involved.

When You Have a Lot of Visitors

If your website has a lot of Visitors (i.e. over 5,000 connected at once), you might want to only connect Visitors who actually need help.

You can easily do this by passing autoconnect: false to the configuration, like this (or by turning this off in the dashboard):

// Rest of the installation code...
Upscope('init', {
 autoconnect: false
})

The visitor will be connected automatically if they have recently been in a Session, and will also automatically connect if they are shown the lookup code through any means.

You can also manually connect the Visitor by calling Upscope('connect');

CSP Rules

If you use Content Security Policy rules to protect your website, you'll need to add the following URLs to allow UserView to work correctly.

script-src 'self' https://code.upscope.io https://js.upscope.io;
connect-src wss://*.upscope.io https://*.upscope.io;
media-src https://js.upscope.io;
img-src https://app.upscope.io https://app-cdn.upscope.io;

Prototype.js

To make UserView compatible with some older versions of Prototype, include the following code before the installation code.

<script>
  if (window.Prototype) {
    delete Object.prototype.toJSON;
    delete Array.prototype.toJSON;
    delete Hash.prototype.toJSON;
    delete String.prototype.toJSON;
  }
</script>