Getting started:
In this article you'll find out how to install Fullview in your web app and understand your users' product experience. Once the installation is complete you'll have access to automatic recordings of their product usage, technical console logs and real-time cobrowsing.
As a prerequisite to use Fullview and all its functionalities, you need to have a Fullview organization and complete the following steps:
Here you can see what Fullview currently supports and does not support.
Supported | Not currently supported |
Single-page web application | Mobile apps |
Multi-page web application | Desktop apps |
Angular, React, and others. | Incognito mode or localhost |
Production or development environments |
|
Anonymous users |
|
Step 1: Install Fullview SDK
Go to the Installation page of your Fullview organization.
Copy the first script and paste it into the
<head>of your web appThe snippet is unique to your org and will install Fullview's SDK in your web app
The SDK is tiny, loads in a 2-step async manner, designed to avoid any load on your side.
Step 2: Integrate with Fullview API (required)
In order to easily find your customers' sessions in Fullview, you need to integrate with Fullview's API. This will allow you to send the identity of your authenticated users into your Fullview organization. Here are the steps:
From the Installation page copy the second script
Paste it into your web app where you have access to the identity of your users
Replace all the mock data from our snippet (such as USER_ID, USER_NAME, etc) with your user information
We recommend initializing window.$fvIdentity in the following cases:
on every page running your application where the the user is authenticated
user registers for an account
user signs in
when the user attributes are changing (eg. change of user role)
The data passed in the $fvIdentity object should contain the following fields:
Field name | Type | Description |
id | string | Required Anything unique in your organisation that will help you pinpoint your user. |
name | string | Required Name of the user. Can be used for filtering. |
string | Email of the user. Can be used for filtering. | |
disableReplaysForUser | boolean | Can be used to temporarily disable replays for the current user. This value will be calculated at runtime on every page load, so setting this to true won’t turn off the replay if the page reloads and this field won’t be set anymore. |
env | string | Environment-based settings and user segmentation |
roles | array | Role-based settings and user segmentation |
| any | Multiple fields can be added for your convenience to be displayed in Fullview Dashboard. |
Step 3: Whitelist Fullview in your Content Security Policy
⚠️ If you have stricter content security policies set in place, you might need to add the following policy directives to be able to run the Fullview script:
Content-Security-Policy:
script-src-elem https://*.fullview.io https://*.daily.co;
connect-src https://*.fullview.io wss://*.fullview.io https://*.daily.co wss://*.daily.co;
media-src https://*.fullview.io;
style-src 'unsafe-inline';
style-src-elem 'unsafe-inline' https://*.fullview.io;
font-src https://*.fullview.io;
worker-src blob:;
Fullview's SDK also requires the use of a web worker for better performance with the use of UI thread utilization, hence the worker-srcdirective. Read more here about content security policies and web workers. More about web workers and content security policies here.
Have a strict CORS policy?
Cross-origin resource sharing (CORS) is a standard mechanism that allows JavaScript XMLHttpRequest (XHR) calls executed in a web page to interact with resources from non-origin domains.
Fullview needs download access to your stylesheets, images or other assets required to render the page. If you have a strict CORS policy please update it to reflect the enabled access.
If you have any questions or feedback, don't hesitate to reach out to us at hello@fullview.io