# UserView Documentation
> UserView is a no-download screen-sharing tool that enables customer support teams to view and assist users on their website in real-time.
Source: https://userview.com/docs
## Table of contents
- [Getting Started](https://userview.com/docs/getting-started.md)
- [Implementation Overview](https://userview.com/docs/getting-started/implementation-overview.md)
- [Invite Your Team](https://userview.com/docs/getting-started/invite-team.md)
- [Co-Browsing FAQ](https://userview.com/docs/getting-started/co-browsing-faq.md)
- [SDK Documentation](https://userview.com/docs/sdk.md)
- [Web SDK](https://userview.com/docs/sdk/web.md)
- [Installation](https://userview.com/docs/sdk/web/installation.md)
- [Configuration Options](https://userview.com/docs/sdk/web/configuration-options.md)
- [SDK Functions](https://userview.com/docs/sdk/web/sdk-functions.md)
- [Listening for Events](https://userview.com/docs/sdk/web/listening-for-events.md)
- [Multi-Language Support](https://userview.com/docs/sdk/web/translations.md)
- [iOS SDK](https://userview.com/docs/sdk/ios.md)
- [Installation](https://userview.com/docs/sdk/ios/installation.md)
- [Configuration Options](https://userview.com/docs/sdk/ios/configuration-options.md)
- [SDK Functions](https://userview.com/docs/sdk/ios/sdk-functions.md)
- [Listening for Events](https://userview.com/docs/sdk/ios/listening-for-events.md)
- [Full Device Screen Sharing](https://userview.com/docs/sdk/ios/full-device-screen-sharing.md)
- [Android SDK](https://userview.com/docs/sdk/android.md)
- [Installation](https://userview.com/docs/sdk/android/installation.md)
- [Configuration Options](https://userview.com/docs/sdk/android/configuration-options.md)
- [SDK Functions](https://userview.com/docs/sdk/android/sdk-functions.md)
- [Listening for Events](https://userview.com/docs/sdk/android/listening-for-events.md)
- [Full Device Screen Sharing](https://userview.com/docs/sdk/android/full-device-screen-sharing.md)
- [Flutter SDK](https://userview.com/docs/sdk/flutter.md)
- [Installation](https://userview.com/docs/sdk/flutter/installation.md)
- [Configuration Options](https://userview.com/docs/sdk/flutter/configuration-options.md)
- [SDK Functions](https://userview.com/docs/sdk/flutter/sdk-functions.md)
- [Listening for Events](https://userview.com/docs/sdk/flutter/listening-for-events.md)
- [Full Device Screen Sharing](https://userview.com/docs/sdk/flutter/full-device-screen-sharing.md)
- [React Native SDK](https://userview.com/docs/sdk/react-native.md)
- [Installation](https://userview.com/docs/sdk/react-native/installation.md)
- [Configuration Options](https://userview.com/docs/sdk/react-native/configuration-options.md)
- [SDK Functions](https://userview.com/docs/sdk/react-native/sdk-functions.md)
- [Listening for Events](https://userview.com/docs/sdk/react-native/listening-for-events.md)
- [Full Device Screen Sharing](https://userview.com/docs/sdk/react-native/full-device-screen-sharing.md)
- [Element Masking](https://userview.com/docs/sdk/element-masking.md)
- [Identifying the Visitor](https://userview.com/docs/sdk/identifying-the-visitor.md)
- [The Lookup Code](https://userview.com/docs/sdk/the-lookup-code.md)
- [Setup](https://userview.com/docs/setup.md)
- [How to Connect Your SAML Provider](https://userview.com/docs/setup/connect-saml.md)
- [Embedding UserView Agent view on Another Page Using an Iframe](https://userview.com/docs/setup/crm-embed.md)
- [Integrate your Live Chat Platform](https://userview.com/docs/setup/integrate-live-chat.md)
- [On-premise](https://userview.com/docs/setup/on-premise.md)
- [Using UserView](https://userview.com/docs/using-userview.md)
- [Initiating a Session](https://userview.com/docs/using-userview/initiate-session.md)
- [UserView Session Basics](https://userview.com/docs/using-userview/userview-session-basics.md)
- [UserView App](https://userview.com/docs/using-userview/initiate-session/userview-app.md)
- [Lookup Code](https://userview.com/docs/using-userview/initiate-session/lookup-code.md)
- [Request Agent Button](https://userview.com/docs/using-userview/initiate-session/agent-request-button.md)
- [Troubleshooting](https://userview.com/docs/using-userview/initiate-session/troubleshooting.md)
- [Browser-to-Browser Audio Calls](https://userview.com/docs/using-userview/audio-calls.md)
- [Multi-Agent Session](https://userview.com/docs/using-userview/multi-agent-session.md)
- [Picture-in-Picture](https://userview.com/docs/using-userview/picture-in-picture.md)
- [Session Recording](https://userview.com/docs/using-userview/session-recording.md)
- [Customization](https://userview.com/docs/customization.md)
- [Integrations](https://userview.com/docs/integrations.md)
- [Build Your Own Request Button](https://userview.com/docs/customization/custom-request-button.md)
- [Chatra](https://userview.com/docs/integrations/chatra.md)
- [Drift](https://userview.com/docs/integrations/drift.md)
- [Freshchat](https://userview.com/docs/integrations/freshchat.md)
- [Front](https://userview.com/docs/integrations/front.md)
- [HelpScout](https://userview.com/docs/integrations/helpscout.md)
- [Intercom](https://userview.com/docs/integrations/intercom.md)
- [JivoChat](https://userview.com/docs/integrations/jivochat.md)
- [LiveChat](https://userview.com/docs/integrations/livechat.md)
- [Olark](https://userview.com/docs/integrations/olark.md)
- [Re:amaze](https://userview.com/docs/integrations/reamaze.md)
- [Salesforce](https://userview.com/docs/integrations/salesforce.md)
- [Tawk.to](https://userview.com/docs/integrations/tawkto.md)
- [Tidio](https://userview.com/docs/integrations/tidio.md)
- [Trengo](https://userview.com/docs/integrations/trengo.md)
- [Zendesk](https://userview.com/docs/integrations/zendesk.md)
- [Setup](https://userview.com/docs/integrations/intercom/setup.md)
- [Adding UserView to your Intercom Sidebar](https://userview.com/docs/integrations/intercom/adding-userview-to-your-intercom.md)
- [User Guide](https://userview.com/docs/integrations/intercom/user-guide.md)
- [Troubleshooting](https://userview.com/docs/integrations/intercom/troubleshooting.md)
- [Salesforce Chat](https://userview.com/docs/integrations/salesforce/salesforce-chat.md)
- [Salesforce CRM](https://userview.com/docs/integrations/salesforce/salesforce-crm.md)
---
## Getting Started
Source: https://userview.com/docs/getting-started
Welcome to the Getting Started Guide for UserView! This comprehensive guide will help you understand, set up, and leverage this powerful tool, designed to transform the way you interact with users on your website. UserView allows you to provide unparalleled customer support, onboarding experiences, and product tours by offering instant, no-download screen-sharing capabilities.
### Implementation Overview
Source: https://userview.com/docs/getting-started/implementation-overview
Implementing UserView is straightforward and can be completed quickly. This guide provides an overview of the steps involved in getting started with UserView.
#### Timeframe
Most implementations involve simply installing the code onto your site, which takes a **matter of minutes**. This requires one of your developers to copy and paste the installation code onto your backend.
#### Trial
You'll have two weeks for a trial and a month for a Proof of Concept (POC). During this time, you'll have access to all features to test them out.
**Contact Sales:**
For more information about the trial and POC, please contact our sales team.
#### Team Training
UserView is intuitive, and training your team on how to use it shouldn't take long. You can customize and send the following team training guide to your team. We're happy to help you customize it; just reach out to us!
[View Team Training Doc](https://docs.google.com/document/d/1CDrsA23QT8h8EUTGaH7bIc94gxD0MejdcIlu24wjttk/edit?usp=sharing)
#### Development
#### Installation
The level of development depends on the customization you are looking for. Installing the code itself is a simple copy and paste onto the pages you would like access to during a Co-Browsing session and will take minutes.
#### Masking Sensitive Information
You can hide parts of the page from your support agents. Elements like passwords and credit card credentials are automatically hidden, but if there are other parts of the page you want to omit, you can set this up.
[Element Masking](https://userview.com/docs/sdk/element-masking)
#### REST API
If you’re looking to embed Co-Browsing functionality into custom-made software either for your own team or to resell to your clients, you can use the Co-Browsing API. This will require more time and development.
[REST API Documentation](https://cobrowsingapi.com/docs/rest-api)
#### Integrations
Start sessions from your Live chat window and see what customers were doing before they reached out with automated screenshots. The typical integration can take 5 minutes to connect; however, there are a couple that require additional steps. Note that **all integrations still need the JavaScript code installed**.
Browse our list of integration partners to see how to connect yours.
#### App Customization
There are various customization options, such as the level of access your team has, as well as the app experience. You can explore and change these in your settings.
[App Customization Settings](https://app.upscope.io/settings/teams/_/co_browsing)
#### Functionality
- Enable or disable session clicking, scrolling, and typing
- Enable or disable audio calling
- Session notes
- Enable or disable session recording
#### Security
- Mask elements
- Prevent clicking on specific elements
- Enable or disable the ability to navigate to third-party sites
- Connect to specific database regions
#### App Experience
- Customize text throughout the experience for agents and users
- URL redirects
#### Team Members
- Authentication options like SSO, MFA, and login session expiration
- Give your team different levels of access to the application, allowing them to view reporting, billing, app settings, team management, session history, and client data.
#### Implementation Package
For a smooth journey, let us guide you through start to finish and beyond.
[What the Implementation Package Includes](https://www.canva.com/design/DAF2Hqncqaw/8RMRup3_nwHVsfFEcvhECw/view?utm_content=DAF2Hqncqaw&utm_campaign=designshare&utm_medium=link&utm_source=editor)
### Invite Your Team
Source: https://userview.com/docs/getting-started/invite-team
You can choose to:
1. Directly invite them by entering their email into the `Team` section in the left-hand menu.
2. Alternatively, enable the option in your **[general settings](https://app.upscope.io/settings/teams/_/team)** to let anyone with the same domain name sign up without an invite. For example, if you work at Snap.com, anyone with an email address @snap.com can sign up themselves once this option is enabled.
#### Add Teammates Without Being Charged
If you're on a payment plan with a set number of agents, you can still add additional teammates for managing team members or billing without extra charges. They're only counted as agents if they actively screen share.
**Changing Team Owner:**
If you'd like to transfer your team's ownership to another user, the team owner can select `Team` from the left-hand menu, click on the three dots to the right of the team members name they want to transfer ownership to, and click the button `Transfer Ownership`.
You will receive an email where you can confirm the transfer, and then you'll be converted to a regular user.
#### Team Access Levels
Not all team members require the same type of permissions. If you're a team owner, you can set up team permissions and assign specific access to team members within your UserView app.
To do this, go to `Team` on the left-hand menu. Beside each team member, there are 8 icons indicating the types of permissions. To activate or deactivate each one, simply click on it to turn it green or red.
##### Icon Descriptions
- **UserView usage:** User can start UserView sessions.
- **Content:** User can remove visitor's data.
- **Reporting:** User can view reporting and usage analytics.
- **User Management:** User can manage the team's users.
- **Billing:** User can pay for the team and manage the billing settings.
- **General Settings:** User can access general settings and make changes.
### Co-Browsing FAQ
Source: https://userview.com/docs/getting-started/co-browsing-faq
#### Is there a timeout for sessions?
The session will end:
- After 10 minutes of inactivity from the agent
- After 1 minute of the user closing the tab
#### Is my customer's data secure?
Yes, UserView sessions are encrypted. We are SOC2 and ISO27001 certified, and GDPR and HIPAA compliant.
There are data masking options to hide elements like passwords and credit card numbers, ensuring the information doesn't leave their browser.
#### What if the user goes to another tab?
If the user navigates to another tab where UserView isn't installed, the session will continue. When they move to a tab where UserView is installed, your page automatically follows them.
#### Can I have more than one person on a session?
You may have multiple members of your team on the same session. However, since you are viewing one user's screen, you aren't able to invite another user.
#### Does UserView record everything?
Recording is optional. Once enabled, every co-browsing session is recorded. It only starts when a co-browsing session is initiated; anything a user does prior to you sending a co-browsing request is not captured in the recording.
#### Can I have multiple sessions open at the same time?
Yes, you can have more than one co-browsing session with multiple users running.
## SDK Documentation
Source: https://userview.com/docs/sdk
UserView needs to be installed on any web page or app you want to be visible to agents.
Choose your platform to get started with the SDK:
- **[Web](https://userview.com/docs/sdk/web/)** - JavaScript SDK for web applications
- **[iOS](https://userview.com/docs/sdk/ios/)** - Native iOS SDK for Swift/SwiftUI apps
- **[Android](https://userview.com/docs/sdk/android/)** - Native Android SDK for Kotlin apps
- **[Flutter](https://userview.com/docs/sdk/flutter/)** - Flutter SDK for cross-platform apps
- **[React Native](https://userview.com/docs/sdk/react-native/)** - React Native SDK for cross-platform apps
Once installed, check out these guides:
- **[Identifying the Visitor](https://userview.com/docs/sdk/identifying-the-visitor.md)** - Set user identities for agent search
- **[Element Masking](https://userview.com/docs/sdk/element-masking.md)** - Hide sensitive content during sessions
- **[The Lookup Code](https://userview.com/docs/sdk/the-lookup-code.md)** - Quick connection codes for agents
### Web SDK
Source: https://userview.com/docs/sdk/web
#### Installation
Source: https://userview.com/docs/sdk/web/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.
**Installing via Script Tag:**
You'll find your installation code within your UserView dashboard. Simply add the code anywhere on your webpage, or, if you prefer, add it to a JavaScript file by removing the `` tags from the code.
**Recommendation:** Make sure that the code loads as fast as possible by adding it as one of the first things that execute on the page.
**Warning:**
While you can install UserView through Google Tag Manager or Segment, the preferred method is to paste the installation code directly on your website, as this will result in faster load times.
Installation remains the same whatever front end framework you use. UserView works fine with React, Angular, and most other modern JavaScript frameworks. All you need to do is add the code to the page.
**Installing via NPM:**
1. Install the SDK
```shell
npm install --save @upscopeio/sdk
```
2. Import the Upscope Object
```javascript
import Upscope from '@upscopeio/sdk';
```
3. Initialize
```javascript
Upscope("init", {
apiKey: ""
});
```
**Note:** You can use the Upscope object wherever required, and call the same functions that are available with the regular installation. Initialization (`init`) needs to be called first and must include your public API key.
###### Public API Key
You can find yours in the installation page of your UserView dashboard.
###### Pinning a Specific Version
By default, the package downloads the latest version of the UserView code, so you are always up to date without reinstalling. If you prefer to run the exact version you installed from npm, import from `@upscopeio/sdk/static` instead:
```javascript
import Upscope from '@upscopeio/sdk/static';
```
The static import works exactly like the default one, but no remote code is downloaded: only your account configuration is fetched, and the UserView code that runs is the one bundled with the installed package version. This also makes it suitable for environments that disallow remote code, such as Manifest V3 browser extensions.
**Get notified about new versions:**
When pinning a version, updates only reach your users when you update the package and redeploy. Add your email address on the installation page of your UserView dashboard to be notified when a new version is released.
**Installing via React:**
###### Installation
To incorporate UserView into your React project, first install the React-specific package using npm:
```shell
npm install --save @upscopeio/react
```
Import the `UpscopeProvider` component and wrap your main application component with it.
```javascript
import { UpscopeProvider } from '@upscopeio/react';
{/* rest of your app */}
```
**Entire page shared:**
UserView will share the entire page, regardless of where the `UpscopeProvider` is added in your component hierarchy. To only share a specific part of your content, see [Sharing Only Part of the Page](#sharing-only-part-of-the-page).
###### Pinning a Specific Version
By default, the package downloads the latest version of the UserView code, so you are always up to date without reinstalling. If you prefer to run the exact version you installed from npm, import from `@upscopeio/react/static` instead:
```javascript
import { UpscopeProvider } from '@upscopeio/react/static';
```
All the other exports (`useUpscope`, `Masked`, `NoRemoteControl`) are available from the same path. The static import works exactly like the default one, but no remote code is downloaded: only your account configuration is fetched, and the UserView code that runs is the one bundled with the installed package version. This also makes it suitable for environments that disallow remote code, such as Manifest V3 browser extensions.
**Get notified about new versions:**
When pinning a version, updates only reach your users when you update the package and redeploy. Add your email address on the installation page of your UserView dashboard to be notified when a new version is released.
###### Configuration
###### Public API Key
You can find yours in the installation page of your UserView dashboard.
The `UpscopeProvider` accepts props that you can use for additional configuration settings. These settings are similar to the ones you would specify using the `init` function in the standard SDK. For example, to specify a unique identifier for a user, you can do:
```javascript
{/* Your application code here */}
```
###### Using Functionality in Components
To use UserView features in your individual components, you can use the `useUpscope` hook:
```javascript
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
}
```
###### Additional Utilities: Masking and Disabling Remote Control
UserView offers utility components to mask sensitive data and disable remote control on specific UI elements.
To mask sensitive information:
```javascript
import { Masked, NoRemoteControl } from '@upscopeio/react';
function YourComponent() {
return (
<>
{/* Sensitive Info */}
{/* Control Elements */}
);
}
```
To disable remote control on a particular element:
```javascript
import { NoRemoteControl } from '@upscopeio/react';
function YourComponent() {
return (
<>
);
}
```
By following these steps and guidelines, you can fully integrate UserView into your React application and leverage its features effectively.
##### 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.
###### Different Domains
To make UserView work when you have iframes on different domains/subdomains, you'll need to add the code to all the iframes. This is the code you get from your dashboard's installation page.
The iframes will connect automatically.
**Using the SDK:**
The code will behave differently in the iframe, and you can't use SDK within it.
That means that if you want to identify the user you'll need to do so in the outermost frame.
###### Sharing Only Part of the Page
By default, UserView shares the entire page. If you only want to share a specific part of your content (for example, a document viewer or a preview area), place that content in a **same-origin iframe** and pass the iframe's `contentWindow` as the `sharingRoot` configuration option. Only the iframe's document will be shared — everything outside it stays private.
```html
```
```javascript
const iframe = document.querySelector('#shared-content');
iframe.addEventListener('load', () => {
Upscope('init', {
sharingRoot: iframe.contentWindow
});
});
```
Make sure the iframe has finished loading before initializing, as shown above, so that `contentWindow` points to the final document.
If you're using React, pass `sharingRoot` as a prop to the `UpscopeProvider`, enabling it once the iframe is available:
```javascript
function SharedContent() {
const [contentWindow, setContentWindow] = useState(null);
return (
```
### Integrate your Live Chat Platform
Source: https://userview.com/docs/setup/integrate-live-chat
UserView co-browsing is available for a number of live chat systems, and the installation is a simple copy and paste in most cases. There are multiple ways of starting a session, so determine how your company has implemented the solution.
#### Step 1: Get Your Installation Code
1. Sign up for the free UserView trial on the home page ([https://userview.com/signup](https://userview.com/signup)).
2. Get your installation code from your settings by navigating to `Settings` » `Installation Code` ([https://app.upscope.io/install](https://app.upscope.io/install)).
#### Step 2: Install the Code
Paste the UserView installation code on the same page as the live chat code. This will need to be done by someone on your development team or whoever has access to your website code. For more details, visit the [UserView Installation](https://userview.com/docs/sdk/web/installation.md) page.
#### Step 3: Connect the Integration
1. Look either in your live chat marketplace or within your UserView settings to connect the integration.
2. Follow the steps to complete the integration setup.
#### Additional Steps
Due to the way some APIs work, you might have to perform additional steps to get the integration going. Browse our [Integrations](https://userview.com/docs/integrations.md) page to find out if this applies to your case.
**Integration Apps:**
In some cases, UserView offers a more complete integration in the form of a custom-built app, which you can typically add to the live chat system via their marketplace. Currently, UserView has custom apps for Intercom, Zendesk, LiveChat, and Frontapp. You can search their marketplaces for the "UserView Co-Browsing" integration and add it. Each live chat system contains details on how to install the custom app if available.
Visit the [Integrations](https://userview.com/docs/integrations.md) page for more complete instructions on how to integrate UserView with the live chat tool you are using.
### On-premise
Source: https://userview.com/docs/setup/on-premise
#### Running UserView On-Premise
To run UserView on your infrastructure, you'll need to either run a Docker image that contains everything or host the components separately yourself.
If you have fewer than 5,000 Visitors online at any given time and no more than 100 concurrent Sessions, a single server will likely be enough. If you have more, you'll likely need to add more servers and scale UserView horizontally by having a separate Redis cluster.
**Docker Image:**
Pull [our image](https://hub.docker.com/r/upscope/onpremise) from Docker Hub and run it with the environment variables listed below.
```shell
docker run -d \
-e BASE_ENDPOINT=https://cobrowsing.acmetech.com/ \
-e LICENSE_KEY=https://api.upscope.io/v1.3/.... \
-e SECRET_KEY=myrandomsecretkey... \
-p 5002:5002 \
upscope/onpremise
```
See the [Configuration](#configuration) section for all available environment variables.
**Host MongoDB Connection Issues:**
MongoDB cannot be listening only to localhost, because the container never uses the loopback network for connection. Set the `net.bindIp` to listen on `0.0.0.0` in `/etc/mongod.conf`, or—if it's a security issue—on the Docker network. This is similar for Redis, which should listen to `*:6379`.
**Docker Script:**
We've created a simple startup script to easily start and configure UserView to use with Docker.
1. Download the [startup script (.sh file)](https://raw.githubusercontent.com/upscopeio/onprem-scripts/master/start-on-premise.sh).
2. Edit its variables according to the data from your UserView dashboard `Settings` » `On Premise`.
3. Make it executable: `chmod +x start-on-premise.sh`.
4. Run it: `./start-on-premise.sh`.
**Host MongoDB Connection Issues:**
MongoDB cannot be listening only to localhost, because the container never uses the loopback network for connection. Set the `net.bindIp` to listen on `0.0.0.0` in `/etc/mongod.conf`, or—if it's a security issue—on the Docker network. This is similar for Redis, which should listen to `*:6379`.
**Binaries:**
If you don't want to use Docker, you'll find UserView binaries on the link provided in your UserView dashboard `Settings` » `On Premise`.
This link never changes, so you can `curl` the binaries as part of your build process and automatically keep UserView up to date. Any breaking change will have a new link, so you don't need to worry about that.
You can start the server by running:
```shell
BASE_ENDPOINT=http://localhost:5002 PORT=5002 \
LICENSE_KEY=https://api.upscope.io/v1.3/.... \
SECRET_KEY=myrandomsecretkey... ./upscope-data-linux
```
#### Installing UserView on Your Website
After you run UserView, the output will give you instructions for your [JavaScript SDK](https://userview.com/docs/sdk/web/installation.md) installation code. It looks like this (notice `{BASE_ENDPOINT}`):
```html
```
You can add that code to pages like you would with our cloud solution.
#### Installing UserView in Your Mobile Apps
The [iOS](https://userview.com/docs/sdk/ios/installation.md), [Android](https://userview.com/docs/sdk/android/installation.md), [Flutter](https://userview.com/docs/sdk/flutter/installation.md), and [React Native](https://userview.com/docs/sdk/react-native/installation.md) SDKs connect to your on-premise instance when you set the `onPremiseBaseEndpoint` configuration option to your `BASE_ENDPOINT`. The SDK then fetches its configuration from `{BASE_ENDPOINT}/sdk-config.json` and connects to `{BASE_ENDPOINT}/session` instead of our cloud servers, so the `region` option is ignored.
**iOS:**
```swift
let config = UpscopeConfiguration(
apiKey: "YOUR_API_KEY",
onPremiseBaseEndpoint: "https://cobrowsing.acmetech.com"
)
try Upscope.shared.initialize(with: config)
```
**Android:**
```kotlin
val config = UpscopeConfiguration.Builder("YOUR_API_KEY")
.onPremiseBaseEndpoint("https://cobrowsing.acmetech.com")
.build()
Upscope.initialize(applicationContext, config)
```
**Flutter:**
```dart
final config = UpscopeConfiguration(
apiKey: 'YOUR_API_KEY',
onPremiseBaseEndpoint: 'https://cobrowsing.acmetech.com',
);
await Upscope.instance.initialize(config);
```
**React Native:**
```typescript
import Upscope from "@upscopeio/react-native-sdk";
Upscope.initialize({
apiKey: "YOUR_API_KEY",
onPremiseBaseEndpoint: "https://cobrowsing.acmetech.com",
});
```
Everything else — installation, configuration options, and SDK functions — works exactly like the cloud version.
#### Your License Key
To run UserView, you'll need to retrieve your license key. The license key can be downloaded to your server or read automatically from our server every time the server starts.
You'll need to enter the license key into the `LICENSE_KEY` environment variable. The `LICENSE_KEY` environment variable can be one of:
- The license key content (note it's multi-line)
- A file path to the license key content
- The URL to the license key, the preferred method
If you don't have to restrict the instance's interactions with the internet, entering the URL provided on the [dashboard](https://app.upscope.io/settings/teams/_/on_prem) as the `LICENSE_KEY` environment variable is preferable as you won't need to update it when it expires.
**Good to Know:**
Your JavaScript SDK configuration is also embedded in your license key. This means you can still configure UserView on your dashboard and then restart the server to apply the changes.
#### Configuration
The following is configurable through environment variables:
| Environment Variable | Description | Default |
| --- | --- | --- |
| `BASE_ENDPOINT` | The base URL where this component will be mounted. For example, `https://cobrowsing.acmetech.com/`. It can be in a subdirectory. | (nil, **required**) |
| `LICENSE_KEY` | Your unique UserView license key (or a link to it). | (nil, **required**) |
| `SECRET_KEY` | A unique secret key used to sign internal JWTs. **It's very important this key is kept safe and it's at least 32 characters long.** | (nil, **required**) |
| `AUTH_ENDPOINT` | URL watch links will be redirected to for authentication. | `https://app.upscope.io/onprem_redirect/TEAM_IDENTIFIER` |
| `HOMEPAGE` | URL unrecognized requests will be redirected to. | `https://upscope.com/` |
| `LOOKUP_CODE_LENGTH` | The number of digits in visitor lookup codes. | `4` |
| `MONGO_URI` | URI to a single MongoDB instance, or MongoDB cluster | If omitted, `mongodb://localhost:27017/upscope`. (In Docker this starts MongoDB within the image). If set to an empty string, it will disable MongoDB. |
| `PORT` | The port the server will listen on. | `5002` |
| `REDIS_URI` | URI to Redis or a Redis cluster. | `redis://localhost:6379`. (In Docker this starts Redis within the image). |
| `REST_KEY` | The authentication API key for your on-premise REST API. Leave empty to disable the REST API. | (nil) |
| `SSL_REDIRECT` | When set to on, the server will automatically redirect all requests to https. | `off` |
If you use `MONGO_URI=mongodb://localhost/upscope` with the Docker image, a MongoDB server will be installed inside the container to serve the application.
If you use `redis://localhost/` with the Docker image, a Redis server will be installed inside the container to serve the application.
#### Integrating with the Dashboard
To use the UserView dashboard with UserView on-premise, head to your [on-prem settings](https://app.upscope.io/settings/teams/_/on_prem) and scroll down to cloud link.
You'll need to enter your `BASE_ENDPOINT` and your `SECRET_KEY`, and have an option to enter the email of who should be contacted if we need to reach out quickly if we find a vulnerability we can't patch from remote.
**Good to Know:**
To your Agents, everything will look just like the regular cloud version does, but behind the scenes, their browser will be in direct communication with your instance, so we never touch your Visitors' data.
#### What Doesn't Work On-Premise?
Although we've made our on-premise version as similar as possible to the original, there are a few missing functionalities. You'll need to use UserView cloud if you are interested in:
- Integrations with live chat software (other than a simple link in the attributes)
- Screenshots
- Presentation sharing (public link co-browsing)
- IP geolocation features
- Audio communication: audio calls are carried by AWS Chime, so the audio traffic can't stay on your infrastructure. Video communication works on-premise.
##### Usage Without MongoDB
We are aware some of our customers cannot use MongoDB due to compliance reasons.
UserView works fine without MongoDB, but the Search feature will be limited. You'll still be able to search by:
- **Lookup code**
- **Email**
- **Unique ID**
- **Integration IDs**
## Using UserView
Source: https://userview.com/docs/using-userview
This user guide walks you through all the aspects of using UserView effectively, from the initiation of sessions to real-time interaction, ending sessions, and everything in between. We've broken down everything into easy-to-follow instructions while providing tips, tricks, and best practices for more efficient co-browsing.
Let's dive in and explore how UserView can redefine your real-time collaboration and customer support experience!
### Initiating a Session
Source: https://userview.com/docs/using-userview/initiate-session
There are various ways to initiate a co-browsing session with UserView. No matter where your users are on your site or how you're communicating, locating them is quick and simple.
#### Methods to Initiate a Session
| Method | Description | Useful When |
|----------------------------------|--------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------|
| UserView app: User Credentials | Search using their name, email address, and any other information you've passed through our system. | You're on the phone with the user, and they're logged into their account. |
| UserView app: Lookup Code | Search using a unique code linked to the user's screen. | You're on a call, and they're logged out of their account. This is the most reliable way of searching, especially if a LiveDocument integration isn't working. |
| Live Chat Integrations | Initiate a co-browsing session from the chat UI. | If you want to avoid extra steps of searching for the user. UserView already identifies the user using live chat data. |
### UserView Session Basics
Source: https://userview.com/docs/using-userview/userview-session-basics
UserView offers a set of features to help guide your client through a session. Note that some features may not appear depending on what your team owner has enabled.
##### The Toolbar
##### Picture in Picture
Take UserView with you wherever you go on your browser. This is particularly helpful for live chat interactions.
##### Cursor
Use your cursor as you would on your own device. Navigate, scroll, click, and type to resolve issues faster.
##### Pen Tool
Highlight parts of the page using the pen tool. This is especially useful for a more hands-off, educational approach.
##### Spotlight
Draw focus to any part of the page with the spotlight tool.
##### Audio Calling
Start an audio call over the browser by clicking on the green phone icon at the bottom of the page. This is a browser-to-browser call, so the client will need a microphone and speaker.
**Audio Call Issues:**
If the audio call request for the client doesn't appear, it is most likely due to the client having an ad-blocker on their browser.
##### Notes
Take notes during the call. If you have an Intercom integration, these notes will be pushed to the ticket.
##### Confetti
Celebrate with customers with a bit of confetti.
##### Ending the Session
The session ends when:
- You or the client click on `End Session` in the bottom left corner of the screen.
- The client closes the tab and any other tabs that have your site open.
- There are 10 minutes of inactivity (unless there is an active audio call).
#### UserView App
Source: https://userview.com/docs/using-userview/initiate-session/userview-app
The most reliable way of finding a user is via the UserView application. Here you can search for them using certain credentials.
We recommend this method for phone calls; however, if a live chat integration is returning a 'user not found', you can use the UserView app to find them instead.
##### Locate customers on the app using user information:
- The webpage they're on
- IP address
- Location derived from IP address
If you've passed information such as email address or name, you'll also be able to use those credentials. For example, you could use:
- Name
- Email
- Phone number
- Company
If you use either an Intercom or Zendesk integration, UserView will try to use their APIs to display the data, so you may not need to set anything up. However, if you only see IP addresses, you will need to follow [these instructions](https://userview.com/docs/sdk/identifying-the-visitor.md).
#### Lookup Code
Source: https://userview.com/docs/using-userview/initiate-session/lookup-code
##### Customer View
##### Agent View
 The Lookup code is the most reliable way of finding users. It allows you to find them even when they aren't logged out of their account, whatever page they're on as long as the UserView code is installed.
Each code is unique to every browsing session, therefore a user may have more than one code associated to them if they have your website open on mobile and desktop.
1. Enable the setting on [https://app.upscope.io/settings/teams/_/search](https://app.upscope.io/settings/teams/_/search)
2. When you want to connect, ask your customer to read out the Lookup code (See [display options for the Lookup code](https://userview.com/docs/sdk/the-lookup-code.md).)
3. Open [UserView app](https://userview.com/)
4. Paste the code into the search
5. Initiate co-browsing session
#### Request Agent Button
Source: https://userview.com/docs/using-userview/initiate-session/agent-request-button
Users can request a co-browsing session with a button placed on your site. Below is an example of how it would appear:
An alert is sent to the main app page, and the user requesting help will appear at the top of the page.
##### Activating the Request Agent Button
To activate this feature, navigate to `General Settings` » `Visitor Search` in your UserView account. Here, you can configure:
- When the button should appear (all the time, never, or when an agent is available)
- Where it's placed on your website
- The pop-up alert message
For more customization, you can also [build your own button](https://userview.com/docs/customization/custom-request-button) to maintain a consistent UI.
#### Troubleshooting
Source: https://userview.com/docs/using-userview/initiate-session/troubleshooting
##### It says User is offline, even though they are online
If the button to initiate a session is not available and there is a 'Last seen *x* hours ago' message:
- Make sure they are on a page where UserView is installed.
- Wait a moment; sometimes it takes a bit of time to register if someone is online.
##### I can't see any users at all, online or offline
If you don't see any users online at all:
- Make sure UserView is on a live page and not a local/sandbox environment.
- Check that the whole code is installed and in the *body* tag.
##### The user isn't showing up at all
If their name/email address is coming up completely empty and you're getting a 'No visitors found' error, it might be that they've not been on the site since installation.
- Check they're on a page where UserView has been installed.
- Ask if the user has any ad-blockers enabled; this might prevent the script from running.
##### My user can't find the Lookup code
If the user is struggling to locate the code:
- Find out how it's set up to be displayed in your settings; you may need to ask a team admin.
- In the settings, see if it has been enabled ([https://app.upscope.io/settings/teams/_/search](https://app.upscope.io/settings/teams/getupscope.com/search)); you will need admin access to view the page.
### Browser-to-Browser Audio Calls
Source: https://userview.com/docs/using-userview/audio-calls
Start an audio call to your user's browser. If you're already on the phone with them, it's a great alternative if the call drops for any reason. Audio calls also provide a smooth transition from live chat.
#### Audio Troubleshooting
##### Can't Connect
###### Switch Your Input/Output
We have a new audio provider. Some issues may arise if headphones or headsets are not switched on. If you can't hear them, switch your output device. If they can't hear you, switch your input device.
###### Ensure Browser Permissions
Sometimes the device or microphone is not authorized. Users will usually be prompted to allow the device and need to authorize within 5 seconds. If not, they might need to call back again. Look for a small icon on the right-hand side of the address bar.
##### Can't See the Button
###### Enable the Feature
You might need to ask an account admin/owner to enable the feature under `Enable voice calls`. You can do so here: [Enable Voice Calls](https://app.upscope.io/settings/teams/_/co_browsing)
###### Check Your Plan
Not all legacy plans include audio calls. Verify if your plan supports this feature.
### Multi-Agent Session
Source: https://userview.com/docs/using-userview/multi-agent-session
Need to bring in the next tier support or a topic specialist? Send them the page URL and get them to join the session (including audio if on a call). Just make sure they also have an Upscope account!
Even if you leave, as long as the other person stays on the session, it can be handed off and continue without you.
### Picture-in-Picture
Source: https://userview.com/docs/using-userview/picture-in-picture
Similar to how Youtube/Google Meet/Zoom works, you can take UserView with you wherever you go on your browser with picture-in-picture.
Particularly useful for when you need to carry on the live chat conversation or need to go into your CRM but still need to see what your customer is doing.
### Session Recording
Source: https://userview.com/docs/using-userview/session-recording
Automatically record UserView sessions, capturing what happened so you can review it at a later date under the `Co-Browsing History` tab.
UserView admins can activate this feature by navigating to `Connection Settings` at [app.upscope.io/settings/teams/_/co_browsing](https://app.upscope.io/settings/teams/getupscope.com/co_browsing).
#### FAQ
##### Can I record my user's screen when a session isn't active?
*No, UserView only captures what happened when a co-browsing session is live; as soon as it ends, so does the recording.*
## Customization
Source: https://userview.com/docs/customization
## Integrations
Source: https://userview.com/docs/integrations
This dedicated section of the documentation is designed to assist you in seamlessly integrating UserView with your preferred live chat platform. Whether you're using Intercom, Zendesk, LiveChat, or any other platform, this guide makes integration with Upscope a breeze.
### Build Your Own Request Button
Source: https://userview.com/docs/customization/custom-request-button
Clients can request a co-browsing session with a button placed on your site. An alert is sent to the main app page, and the user requesting help will appear at the top of the page.
To activate this feature, navigate to `General Settings` » `Visitor Search`. Here, you can decide when the button should appear (all the time, never, or when an agent is available), where it's placed on your website, and what the pop-up alert message says.
#### How to Build Your Own Button
If you'd like to create your own button and customize its appearance, follow these steps:
1. Ensure your site has the code from [app.upscope.io/install](https://app.upscope.io/install) installed.
2. To display the button **only** when agents are online, listen for `agentsAvailable` events.
3. To request an agent, use `Upscope('requestAgent');`. You can cancel the request before it is accepted by calling `Upscope('cancelRequestAgent');`.
4. To know the status of the request, listen to the `agentRequestUpdate` event.
### Chatra
Source: https://userview.com/docs/integrations/chatra
UserView integrates with [Chatra](https://chatra.io/), allowing you to transition from chat to viewing a user's screen in seconds.
#### Integration Steps
To integrate UserView with Chatra, copy and paste the UserView installation code beneath the Chatra code.
**Example code**
```html
```
#### Using the Integration
When you open Chatra and click on an individual chat, you'll see a `SCREENSHARE` link appear in the panel.
Click on that to go directly to their screen.
Click again to take control and guide your user on their machine as they sit back and watch.
### Drift
Source: https://userview.com/docs/integrations/drift
UserView Co-Browsing integrates with [Drift](https://drift.com/), allowing you to transition from chat to viewing a user's screen in seconds. You can also **send your mouse cursor over the internet to appear on their screen**, enabling you to scroll and click for them as if you're sitting right there at their computer.
#### Integrating UserView with Drift
To integrate UserView with Drift, follow these steps:
1. Copy and paste the UserView installation code beneath the Drift code on all the pages you wish to [co-browse](https://upscope.com/cobrowse) on. That's it. The integration is complete.
**Example**
```html
```
2. When you start a new chat with a customer, a **screenShare** link will be available on the right-hand side under `Show more attributes`.
The link is not clickable at present, but you can copy and paste it into a new tab to instantly see the customer's screen and click and scroll for them.
**Future Enhancement:**
In the future, we hope that Drift allows clickable link attributes, enabling you to jump to the customer's screen in one click rather than copying and pasting.
### Freshchat
Source: https://userview.com/docs/integrations/freshchat
#### How to Integrate with Freshchat
Learn how to make the screenshare link appear on the side of the Freshchat interface, enabling you to instantly co-browse with any customer during chats.
UserView Co-Browsing offers instant and interactive screen sharing. A support agent chatting with a customer can not only see what the customer sees with just one click—without any downloads—but can also send their cursor over the internet to appear on the customer's screen, allowing them to click and scroll on behalf of the customer.
With Upscope, you can make even your least tech-savvy customers feel comfortable by clicking and scrolling for them on their screen as if you're sitting right there.
#### Integration Steps
To integrate UserView into [Freshchat](https://www.freshworks.com/live-chat-software/), follow these steps:
1. **Install Upscope**: Add the installation code to your page. The installation code can be found [here](https://app.upscope.io/install).
2. **Generate a Token**: In Upscope, navigate to `Settings` » `Integrations` and click on Freshchat to generate a token.
3. **Access Freshchat Marketplace**: Copy the token and go to the [Freshchat Marketplace](https://www.freshworks.com/apps/freshchat/upscope_screensharing).
4. **Install the App**: After installing the app, paste the token you copied from Upscope when prompted.
5. **Configure Freshworks**: Within Freshworks, go to `Admin Settings` » `Contacts`. Under `Basic information`, create a new text field called `upscope_screenshare`.
### Front
Source: https://userview.com/docs/integrations/front
#### Add UserView Co-Browsing to Front Live Chat in 3 Steps
1. If you have not done so already, create your UserView account on [userview.com](https://userview.com/). There's a free trial available. You'll need to follow the instructions, including adding the JavaScript snippet to all pages you want to [co-browse](https://upscope.com/cobrowse) on.
2. Next, go to the [Front integrations store](https://app.frontapp.com/settings/apps/details/upscope/overview) and install Upscope. This will generate a unique Token. Copy that Token.
3. Log in to UserView, go to your `Settings` » `Integrations` and choose the **Front integration**. Paste the Token in there.
That's it, you're ready to test it.
#### How to Run a Test of the Integration
To confirm that UserView is installed correctly, log into UserView, and you'll see a list of customers who are currently on your website.
##### Steps to Test the UserView Front Integration
1. Go onto your website and start a new live chat.
2. Within Front, you'll see the Upscope `Screen sharing` button appear on the right-hand side for that new chat.
3. Click the screen sharing button, and a pop-up will appear in the browser asking for permission to screen share.
4. Click yes and begin co-browsing.
5. You are able to not only scroll, click, and type for the customer but use the pen tool to draw on objects or around objects to bring the customer's attention to them.
#### How to Screen Share When the Customer Phones In
If the customer has phoned in rather than begun a live chat, you can identify their screen by asking them for their unique UserView 4-digit support code. This code can be added to your site footer or header or generated by the customer through tapping the `Ctrl` key 5 times.
Ask them to read out the code and enter that into the UserView Front app as below.
*Depending on your setup, it can either be pulled up by the customer pressing `Ctrl` on their keyboard 5 times or it can also be displayed somewhere on the page.* **[Find out more about the support code](https://userview.com/docs/using-userview/initiate-session/lookup-code.md)**
### HelpScout
Source: https://userview.com/docs/integrations/helpscout
Integrate Upscope and Beacon live chat by Helpscout to start a co-browsing session directly from a chat in Beacon. By installing Upscope on your website, the link will automatically appear within your chat window.
#### Steps to Integrate
1. **Install Upscope** on your website.
2. Add `Screenshare` as a custom property to [your custom properties page within HelpScout](https://secure.helpscout.net/settings/properties).
**Important Note:**
Please make sure to enter exactly the word `Screenshare`, including the capital 'S'.
3. Ensure both the agent's and customer's browser tabs are refreshed.
4. While in a conversation, click the `Screenshare` link on the right-hand side.
This will open up a co-browsing session in another tab. By default, it will ask the customer for permission to begin the co-browsing session. Once they accept, you can start co-browsing and use the cursor tool to scroll, click, and type for them.
You're set up and running 🎉
For any questions, please schedule a call at [userview.com/demo](https://userview.com/demo) or email [sales@upscope.io](mailto:sales@upscope.io) for other inquiries.
### Intercom
Source: https://userview.com/docs/integrations/intercom
### JivoChat
Source: https://userview.com/docs/integrations/jivochat
Here are the steps to integrate UserView with [JivoChat](https://www.jivochat.co.uk/).
The objective is to create a screen-sharing link within JivoChat to instantly screen-share with a customer when they need help. Below, you can see how the screen-sharing link appears on the right-hand side of the JivoChat panel and is labeled "Start a screen share".
#### How to Create Your Own Screen Sharing Link Within JivoChat
##### Step 1: Add the Upscope JavaScript Snippet
Add the Upscope JavaScript snippet to all the pages you wish to screen share on. You can find your Upscope snippet within your settings under `Installation` [here](https://app.upscope.io/install).
##### Step 2: Allow Clickable Links in JivoChat
Allow clickable links within JivoChat by navigating to `JivoChat` » `Settings` » `Channels` and clicking on `Integration settings for developers` [here](https://app.jivosite.com/settings/channels). Then, enter `https://upscope.io` into the `Safe Base Url` field.
##### Step 3: Add Extra Code for Screen-Sharing Link
To make the screen-sharing link appear within JivoChat, add the following code to your pages below the widget code:
```html
```
###### What Does This Code Do?
1. It waits for JivoChat to load.
2. It then uses the UserView `getWatchLink` function to generate a unique URL for that user's screen, which you can use to screen share.
Now, for all new chats, you'll see a screen share link appear within the JivoChat panel. Please be sure to refresh both JivoChat and the client side if you're testing.
### LiveChat
Source: https://userview.com/docs/integrations/livechat
If you're using [LiveChat](https://livechatinc.com/) and want the ability to instantly see the screen of the customer, directly from your chat with that customer, then here are the simple steps to get going.
1. Start by signing up for the free [UserView](https://userview.com/) trial. You can do this by visiting the home page of the UserView website.
2. Once signed up, proceed to add the provided JavaScript snippet to your site. This step is crucial for the Upscope functionality to work properly.
3. Next, request your LiveChat administrator to install the UserView Co-Browsing app. This can be done by directing them to the appropriate link on the [LiveChat marketplace](https://www.livechat.com/marketplace/apps/upscope-co-browsing/).
Once these steps are completed, you are set to begin co-browsing. This will allow you to view the customer's screen directly from your chat.
When you start a new chat, a screen share button appears on the right hand side of the LiveChat panel as below.
#### Using the App
To confirm that Upscope is installed correctly:
1. Log into Upscope and see a list of customers who are currently on your website.
2. You can **run a test of the Upscope LiveChat integration** by going onto your website and starting a chat. You'll see the Upscope 'Screen sharing' button appear on the right hand side for that customer's chat.
3. Click the screen sharing button and, if permissions are enabled, a pop-up will appear in the browser asking the customer for permission to screen share.
4. Click yes and begin co-browsing.
5. You'll see screenshots appear on the right hand side in the LiveChat interface for that UserView's chat feed.
You are able to not only scroll, click and type for the customer but use the pen tool to draw on objects or around objects to bring the customer's attention to them.
**Initial Refresh After Upscope-LiveChat Installation:**
Please be sure to refresh the page when you've first installed Upscope with LiveChat.
#### Use the support code when customers phone in
You can also find the customer by using their support code when they phone in.
The phone support code is a 4 digit unique code which, on entry, leads you to that customer's specific screen without them having to start a chat on LiveChat.
 Ask for their code (make sure you have it enabled [here](https://app.upscope.io/settings/teams/_/search))
1. Plug the code into the Upscope widget.
2. Click the '**Screen share**' button.
*Depending on your set-up, it can either be pulled up by the customer pressing 'control' on their keyboard 5 times or it can also be displayed somewhere on the page. **[Find out more about the support code](#)*
### Olark
Source: https://userview.com/docs/integrations/olark
Here are the steps to integrate UserView with Olark:
#### Add Upscope to instantly view a customer's screen from Olark
As with all live chat integrations, the process of adding Upscope is simple. You don't need to set up and create any special integrations between the two apps, simply paste the Upscope installation code below the Olark code as below.
Example Code:
```html
```
When you open Olark and click on an individual chat, you'll see a screen share link appear on the right-hand side, as below, under Advanced info:
In one click you can see the problem to resolve it faster. No more asking for screenshots or 'what do you see on your screen?'. You're in customer support heaven with [Olark](https://www.olark.com/) and [Upscope](https://upscope.io/)
### Re:amaze
Source: https://userview.com/docs/integrations/reamaze
#### Re:amaze Live Chat Integration
[Re:amaze](https://www.reamaze.com/) has an incredible feature set with multiple integrations that include e-commerce platforms like Bigcommerce, Woocommerce, Magento, Shopify, etc. It's an understated application on the surface that is a beast underneath.
Once you've created your account, you'll need to install their JavaScript code which you build using their [awesome widget builder](https://reamaze.reamaze.com/kb/video-tutorial-series/widget-builder). Paste this code above the closing `` tag and you're running.
As with all live chat integrations, the process of adding Upscope is simple. You don't need to set up and create any special integrations between the two apps; simply paste the Upscope installation code **below** the [Re:amaze](https://www.reamaze.com/) code.
You can see that the Re:amaze code sits above the closing `` tag and below that we've pasted the Upscope installation code that sits within your settings.
That's it. Done.
 When customers message you via the Re:amaze Shoutbox or [Lightbox](https://www.reamaze.com/developer/widget_lightbox), the incoming message displayed within the Re:amaze UI will now include a screen sharing link.
 Please reference [Re:amaze's support article](https://support.reamaze.com/kb/3rd-party-integrations/upscope-dot-io-co-browsing-and-screensharing-how-to) on the Upscope integration for further information and their recommendations.
### Salesforce
Source: https://userview.com/docs/integrations/salesforce
### Tawk.to
Source: https://userview.com/docs/integrations/tawkto
UserView integrates with [Tawk.to](https://tawk.to/), allowing you to transition from a chat to viewing a customer's screen in seconds.
#### Integrate Tawk.to with UserView
To integrate UserView with Tawk.to, follow these steps:
1. Paste the UserView code on the same pages as the Tawk.to code.
2. Add the following function to those pages:
```javascript
Tawk_API.onLoad = function() {
Upscope('getWatchLink', function(link) {
Tawk_API.setAttributes({
'Screenshare': link
}, function(error) {});
});
};
```
You can find the UserView code within your UserView account settings under `Installation instructions`.
Your unique Tawk.to code snippet can be found when you first sign up or log into Tawk.to and navigate to `Settings` at the bottom left of their interface.
The Tawk.to snippet and the additional function will combine to look like this:
```html
```
#### Test Your First Screen Sharing Session
Once you've added the Tawk.to snippet, the extra function, and the UserView snippet on your site, you're ready to test it out.
- Create your first test chat.
- Tawk.to will notify you of the incoming chat.
- Open Tawk.to and click on the individual incoming customer chat; you'll see a `Screenshare` link appear in the panel on the right-hand side.
- This is your one-click interactive screen sharing link that takes you directly to the customer's browser.
### Tidio
Source: https://userview.com/docs/integrations/tidio
Integrating UserView with [Tidio](https://www.tidio.com/) allows you to create a screen-sharing link within Tidio, enabling instant screen-sharing with a customer when they need help. Below, you can see how the screen-sharing link appears on the right-hand side of the chat panel.
#### Create Your Own Screen Sharing Link Within Tidio
##### Step 1: Add the Upscope JavaScript Snippet
Add the Upscope JavaScript snippet to all the pages you wish to screen share on. You can find your Upscope snippet within your settings under `Installation`: [https://app.upscope.io/install](https://app.upscope.io/install).
##### Step 2: Create a New Contact Property
Create a new contact property within `Tidio` » `Settings` » `Contact properties`: [https://www.tidio.com/panel/settings/contact-properties](https://www.tidio.com/panel/settings/contact-properties).
- Choose `URL` as the property type.
- Name it `Screen sharing` or whatever you prefer.
Below, we've labeled the contact property as 'Screen sharing' and the internal property name is `screen_share`.
##### Step 3: Enable Contact Properties Within Tidio
To enable contact properties within Tidio, you need to add some extra code to your pages. Ensure that the contact property name you set up is identical to the property you add to the code. Below, we've used `screen_share`.
```javascript
```
#### Code Explanation
1. **Waits for the Tidio chat to load.**
2. **Uses the Upscope `getWatchLink` function** to generate a unique URL for that user's screen, which you can use to screen share.
Now, for all new chats, you'll see a screen share link appear within the Tidio chat panel. Please be sure to refresh both Tidio and the client side if you're testing.
When you're in a chat with a customer, you can copy and paste that screen sharing link into a new tab to begin screen sharing. By default, it will ask for permission. You can make changes to the messages and permissions within your settings.
**Note:**
The screen sharing link is not a clickable link at present. We hope that Tidio will allow clickable links in the near future.
For further assistance, you can schedule a call by visiting [UserView Demo](https://userview.com/demo).
### Trengo
Source: https://userview.com/docs/integrations/trengo
Follow these steps to add Upscope Co-Browsing to Trengo chat so you can instantly see what your customer sees and guide them.
The objective is to create a screen-sharing link within Trengo to instantly screen-share with a customer when they need help. Below you can see how the screen-sharing link appears on the right-hand side in the Trengo panel and is labeled `Screenshare`.
#### How to Create Your Own Screen Sharing Link within Trengo
##### Step 1: Add the Upscope JavaScript Snippet
Add the Upscope JavaScript snippet to all the pages you wish to screen share on. You can find your Upscope snippet within your settings under `Installation` or by visiting [this link](https://app.upscope.io/install).
##### Step 2: Add Screenshare as a New Custom Field
Add `Screenshare` as a new custom field within Trengo. You can find the custom fields section under your settings or go directly to this [link](https://app.trengo.eu/admin/custom_fields/).
Create a new custom field called `Screenshare` under the type `Contact`, choose sort order 1, and make a note of the custom field identification number.
You can see the custom field identification number in the URL of that page. For example, the field ID for this `Screenshare` custom field is within the URL as `90590`.
##### Step 3: Add Extra Code to Your Pages
To make the screen-sharing link appear within Trengo, you need to add some extra code to your pages below the widget code. Along with your Upscope and Trengo default code, add the following snippet. Please be sure to change the `field_id` to whatever field ID number was given to you when you created the screen sharing custom field.
```javascript
window.Trengo.on_ready = function() {
Upscope('getWatchLink', function(link) {
// make sure to change the field id number to YOUR field id number
window.Trengo.contact_data = {
custom_fields: [{
field_id: 90590,
value: link
}]
};
});
};
```
**Note:**
The screen sharing link is not currently clickable, but you can copy and paste that link into your browser.
###### What Does This Code Do?
1. It waits for Trengo to load.
2. It then uses the Upscope `getWatchLink` function to generate a unique URL for that user's screen, which you can use to screen share.
Now, for all new chats, you'll see a screen share link appear within the Trengo panel. Please be sure to refresh both Trengo and the client side if you're testing.
### Zendesk
Source: https://userview.com/docs/integrations/zendesk
#### Setup
If you have not done so already, create your UserView account on [https://userview.com/signup](https://userview.com/signup). There's a free trial available. You'll need to install the Upscope JavaScript code first.
##### Install and Use the Upscope App for Zendesk in 3 Steps
Please note that you must be signed into Zendesk and Upscope as an admin.
1. In Upscope, go to `Settings` » `Integrations` and click on `Connect to Zendesk` to generate a Token.
2. Copy that Token and go to the [Zendesk Marketplace](https://www.zendesk.com/apps/directory/?q=upscope).
3. There's an Upscope app for support (tickets) and for chat. Choose the one you use and install the app. Enter the Token when prompted.
###### Zendesk Messaging
If you have Messaging enabled, you can [enable authenticated visitors](https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/web/enabling_auth_visitors/#workflow) and set the `uniqueId` on Upscope:
```html
```
The value for `uniqueId` must be the same as the one you used for `externalId` when signing a new JWT token on Zendesk.
**Please Note - for Zendesk Support (Tickets):**
If you're installing the Upscope app for Zendesk Support, you need to have "Show Lookup Code" enabled in your Upscope co-browsing settings.
Go to your settings [here](https://app.upscope.io/settings/teams/_/search) and enable it.
#### Connect Your Zendesk Account (OAuth)
After installing the app, you can optionally connect your Zendesk account via OAuth. This enables advanced features like automatic ticket tagging and session summary notes.
1. In Upscope, go to `Settings` » `Integrations` and open your Zendesk integration.
2. Under the OAuth section, enter your Zendesk subdomain (e.g. `yourcompany` for `yourcompany.zendesk.com`).
3. Click `Connect` and authorize Upscope in the Zendesk consent screen.
Once connected, you'll see a confirmation with your connected subdomain. Upscope requests read access to users and read/write access to tickets.
**Tip:**
If your Zendesk account is already connected to a different Upscope team, you'll need to disconnect it from the other team first.
#### Ticket Tagging
When OAuth is connected, Upscope automatically tags Zendesk tickets with `userview:cobrowsing` whenever a co-browsing session ends. This lets you filter and report on tickets where co-browsing was used.
No configuration is needed — tagging happens automatically for any session linked to a Zendesk ticket.
#### Session Summary Notes
When OAuth is connected, Upscope can post a summary of each co-browsing session as a **private internal note** on the associated Zendesk ticket when the session ends.
The summary includes:
- Agent and visitor names
- Session duration
- Video recording link (if available)
- Audio/video call duration
- User and agent ratings and feedback
- Agent notes
##### Enable or Disable
1. Go to `Settings` » `Integrations` and open your Zendesk integration.
2. Under **Session summary**, set the option to `Yes` or `No`.
Session summary notes are enabled by default. The note is only visible to agents (not customers).
**Please Note:**
Session summary notes require the `zendesk_session_summary` feature on your plan. If the option is disabled, contact support to check your plan's availability.
#### Using the App
To confirm that Upscope is installed correctly:
1. **Run a test of the Upscope Zendesk integration** by going onto your website and starting a chat.
2. Within Zendesk, you'll see the Upscope `Screen sharing` button appear on the right-hand side. Click that to start co-browsing.
You can not only scroll, click, and type for the user but also use the pen tool to draw on or around objects to bring the user's attention to them.
**Tip:**
Please be sure to refresh the page when you've first installed Upscope with Zendesk.
#### Use the Support Code When Users Phone In
You can also find the user by using their support code when they phone in. The phone support code is a 4-digit unique code which, on entry, leads you to that user's specific screen without them having to start a chat on Zendesk.
1. Ask for their code (make sure you have it enabled [here](https://app.upscope.io/settings/teams/_/search)).
2. Plug the code into the Upscope widget.
3. Click the `Screen share` button.
*Depending on your setup, it can either be pulled up by the user pressing `control` on their keyboard 5 times or it can also be displayed somewhere on the page.* Find out more about the support code.
#### Setup
Source: https://userview.com/docs/integrations/intercom/setup
##### Install UserView with Intercom
Integrating UserView with Intercom allows you to enhance your customer support experience by enabling screen sharing capabilities. Follow these steps to set up the integration.
###### Install the UserView JavaScript Code
To begin, add the UserView JavaScript snippet to all pages where you wish to enable screen sharing.
For detailed instructions, refer to the [UserView Installation Guide](https://userview.com/docs/sdk/web/installation.md).
###### Install the Upscope App from the Intercom App Store
Next, download the Upscope app from the Intercom App Store to facilitate the integration.
[Download the Upscope App](https://app.intercom.com/a/apps/jjuq5mvv/appstore?app_package_code=upscope-shni)
###### Connect Intercom and UserView
Finally, connect Intercom with UserView by navigating to `Settings` » `Integrations` in the Upscope General Settings and enabling the integration.
Visit the [Integrations Page](https://app.upscope.io/settings/teams/_/integration) to complete this step.
#### Adding UserView to your Intercom Sidebar
Source: https://userview.com/docs/integrations/intercom/adding-userview-to-your-intercom
Before adding the UserView app to your Intercom chat sidebar, ensure **UserView is installed and connected to Intercom**.
###### Installation and Integration
- See: [How to install UserView](https://userview.com/docs/sdk/web/installation.md)
- Connect the integration here: [UserView Integration Settings](https://app.upscope.io/settings/teams/getupscope.com/integration)
###### Adding UserView to Intercom
To make UserView accessible on Intercom, follow these steps:
1. Scroll to the bottom of your side panel on a conversation.
2. Click on `Edit Apps`.
3. Pin the UserView app and drag the module up to a more visible area.
If you don't see the option to view their screen, refresh the page.
For further guidance on using the Intercom integration, refer to [How to use the Intercom integration](https://userview.com/docs/integrations/intercom/user-guide.md).
#### User Guide
Source: https://userview.com/docs/integrations/intercom/user-guide
The Intercom/UserView integration allows you to:
- Get more context on what the user was doing before opening the chat through automated screenshots.
- Send a co-browsing request through the chat to have a record of it.
- Start a co-browsing session from Intercom.
- View the co-browsing session whilst still on Intercom with picture-in-picture.
- Get a summary of a session in the chat UI after the session ends.
##### How to Initiate a Session
###### Side Panel Widget
1. Make sure UserView is visible by going into `Edit apps` on the chat UI.
2. You'll then see the widget appear in the right-side panel. On new chats, you'll see screenshots of previous pages the customer has been on.
###### Send a Request in the Chat
Sending a co-browsing request in the chat allows you to start the session from there, have a record of when it occurred, and receive a summary of the session.
1. When you're speaking to a user, click on `shortcuts`.
2. This will send a request through the chat, and once the user has approved, you'll receive an internal note with the link to [co-browse](https://upscope.com/cobrowse).
###### Picture-in-Picture
Continue the conversation by taking UserView with you back into Intercom using picture-in-picture.
Select picture-in-picture mode in the toolbar.
###### Post-Session Notes
After the session has ended, you'll get a note in the Intercom chat summarizing the details of the session.
#### Troubleshooting
Source: https://userview.com/docs/integrations/intercom/troubleshooting
Below we've listed some key points on fixing common issues with UserView's Intercom integration.
##### Reload Intercom and Ask the Customer to Reload Their Page
Intercom will need to be reloaded after you add a new attribute. Make sure you and all your agents reload the Intercom app.
The customer might already be on your site when you've added the UserView JavaScript snippet. They'll need to reload the page for the snippet to be active. Once they've refreshed, they'll appear within the [UserView user list](https://app.upscope.io/) and the UserView Intercom integration will also work.
##### Ensure the Code is on the Page You Wish to Screen Share On
The UserView JavaScript snippet needs to be on all pages that you wish to screen share on. The most common reason for "User not found" type errors is not having the code on the page along with not having refreshed the page after you've installed UserView for the first time.
##### Check Whether UserView Sees Intercom
After the page has loaded, open up the inspector/console. Then type the following:
```javascript
alert(Upscope._integrations);
```
An alert should open up with the word `intercom` in it.
###### If the Alert Does Not Have Intercom in It
- If the alert has the word `undefined` or `null` in it, ensure that the UserView code snippet is loaded after Intercom. Paste our code below Intercom's.
- If the alert has any other word in it, you might have multiple live chat systems installed on your website. Please get in touch with our team for help.
##### Take a Look at the Console Log
On your page, open the console/inspector and type the following:
```javascript
localStorage.debug = 'upscope:integrations';
```
Then, reload the page while keeping the console open. You should see debugging information about the integration.
##### Contact Our Team
If none of the above fixed the problem, you will need to contact our team through Intercom or at [team@userview.com](mailto:team@userview.com).
**Provide Access for Assistance:**
Please provide a way for our tech team to access the page you are attempting to integrate UserView and Intercom on, as we wouldn't be able to assist you otherwise. If you can't provide access, please provide a pastebin link with the code that loads both Intercom and UserView.
**Ensure Proper Permissions:**
Make sure you are the owner or have permissions to change settings within UserView. How to give access to other team members.
#### Salesforce Chat
Source: https://userview.com/docs/integrations/salesforce/salesforce-chat
##### Step 1: Create a Custom Field
Create a new custom `Screen Share` field in the `ChatTranscript` object with the type set to `url`. You can make it read-only and visible to the agent.
##### Step 2: Ensure Salesforce Chat and UserView are Installed on the Same Page
UserView will automatically detect Salesforce Chat. To verify if the Chat SDK is available, look for the `embedded_svc` object in the browser inspector.
###### Different Field Name?
UserView will automatically add the chat link to a field named `Screen_Share__c`. If your field name is different, you can change it in the UserView installation script.
```javascript
// ... rest of installation script
Upscope('init', {
"sfdcFieldId": "Co_Browse__c", // <- Field ID here
// ... all other custom options
});
```
**Automatic Session Link:**
The link to start a session will be automatically added to all incoming chats!
#### Salesforce CRM
Source: https://userview.com/docs/integrations/salesforce/salesforce-crm
Learn how to connect Upscope to your Salesforce instance
There are a couple of options to integrate Upscope into Salesforce. You can either add a button that links to another tab with the co-browsing session, or you can embed Upscope directly into Salesforce.
##### Connect Upscope
Connecting takes two steps: a Salesforce admin installs the Upscope package in your org once, then any user can connect their account.
###### Step 1: Install the Upscope Package
A Salesforce administrator needs to install the Upscope package before anyone can connect. This is a one-time setup per org.
1. Open the [Upscope package installer](https://app.upscope.io/integrations/salesforce/install) and log in as an administrator.
2. Choose who should have access. `Install for All Users` is the simplest option.
3. Once installed, go to `Setup` » `External Client App Manager`, open **UserView for Salesforce**, and click `Edit Policies`. Allow your users to authorize the app, either by letting them self-authorize or by pre-approving them with a permission set.
**Sandboxes:**
The package is copied into sandboxes created or refreshed after installation. To connect a sandbox that predates the install, install the package in that sandbox directly.
###### Step 2: Connect Your Account
In Upscope, go to `Settings` » `Integrations` and choose Salesforce. Pick **Regular Salesforce** for a production org or **Salesforce Sandbox** for a sandbox, then approve the permissions Salesforce asks for.
**Seeing an error about the package?:**
If Upscope tells you the package isn't installed, your org hasn't completed Step 1, or your admin hasn't granted you access to the app yet. Ask them to check the policies in `External Client App Manager`.
###### Turn on Call Creation
You can set Upscope to create a Task whenever you start a session from Salesforce. To enable this, click `Customize`, then select **Yes** for "*Create an object in Salesforce from the session?*" You can further customize the Task or other object we create based on your SFDC configuration.
```json
{
"Task": {
"WhoId": "=sfdc_target_id",
"WhatId": "=sfdc_case_id",
"OwnerId": "=sfdc_admin_id",
"Subject": "Call",
"Status": "Closed",
"Description": "=information"
}
}
```
To customize the object, edit the field mapping JSON by using the pre-defined one as a reference. The single top-level key is the Salesforce object to create, so you can point it at `Event`, a custom `__c` object, or anything else your org uses. Values that start with `=` are dynamic and will be based on the specific session. The available ones are:
| Value | What it resolves to |
| --- | --- |
| `=sfdc_target_id` | The contact, lead, or account the session was started from |
| `=sfdc_contact_id` | The contact the session was started from |
| `=sfdc_lead_id` | The lead the session was started from |
| `=sfdc_account_id` | The account the session was started from |
| `=sfdc_case_id` | The case the session was started from |
| `=sfdc_admin_id` | The Salesforce user who ran the session |
| `=information` | A summary of the session |
| `=video_url` | A link to the session recording |
| `=started_at` | When the session started |
| `=ended_at` | When the session ended |
Any value that doesn't start with `=` is used as-is, like `"Subject": "Call"` above. At least one value must start with `=sfdc`.
##### Option 1: Create Screen Share Button in SFDC
1. From the bottom of that page, copy the start session URL.
2. Use the following path in your Salesforce to create a button for the Upscope link:
```plaintext
[YOUR_SALESFORCE_BASE_URL]/lightning/setup/ObjectManager/Case/ButtonsLinksActions/newButtonOrLink
```
**Button Type:**
Make sure that you choose the option 'Detail Page Button'.
3. Click `Save`.
###### Adding a Button to a Page
In `Setup`, go to `Object Manager` and select the object you want to add the button to, we suggest `Cases` and `Contacts`.
In this case, we'll use `Cases`: go into `Case Page Layouts` » `Case Layout` and drag the "Screen share" button onto the Case details section of the page.
4. Click `Save`.
##### Option 2: Adding Upscope to Lightning App Page
Smooth out the workflow for users by inserting an Upscope iframe into Salesforce, meaning they won't need to leave to [co-browse](https://upscope.com/cobrowse).
Either add to an existing Lightning App Page or create a new one. To create a new one:
1. Go to `Setup` » `Custom Code` » `Visualforce page` » `New`.
2. Select `Record Page`, choose a label and target Object, we suggest you add Upscope to `Cases` and `Contacts`.
3. Make sure you check "Available for Lightning Experience, Experience Builder sites, and the mobile app". Add the Visual Force Page code found under `Upscope Settings` » `Integrations` » `Customize Salesforce` and paste it in the Visualforce Markup.
4. Click `Save`.
5. Go to `Lightning App Builder` and choose which app you'd like to add Upscope to.
6. Find Upscope under `Components`.
7. Drag it to the location you'd like to add it to, we suggest adding it next to "Feed" and "Related".
8. Click `Save`.
While on a case, click the "Screen share" link to start a session.
You will be redirected to the user's screen if they are online, and the search page if they are not.
###### Embed
Wherever you've decided to add the embedded iframe, you'll find the search page. Make sure you're logged into an Upscope account.
**User's Email:**
Make sure to add the user's email in the JavaScript for a smoother process.
After you are done, the call will be logged on the case feed.