diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..6564be7
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,12 @@
+sudo: false
+language: node_js
+node_js:
+  - "14.1"
+install:
+  - yarn
+cache:
+  yarn: true
+
+script:
+  - yarn build
+  - yarn test
diff --git a/lerna.json b/lerna.json
index d38065d..38ce3bf 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.6.1",
+  "version": "0.6.2",
   "npmClient": "yarn",
   "useWorkspaces": true
 }
diff --git a/package.json b/package.json
index f1615fc..718ba0b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "clarity",
   "private": true,
-  "version": "0.6.1",
+  "version": "0.6.2",
   "repository": "https://github.com/microsoft/clarity.git",
   "author": "Sarvesh Nagpal <sarveshn@microsoft.com>",
   "license": "MIT",
diff --git a/packages/clarity-decode/package.json b/packages/clarity-decode/package.json
index 0415fa7..cde37c2 100644
--- a/packages/clarity-decode/package.json
+++ b/packages/clarity-decode/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-decode",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-js": "^0.6.1"
+    "clarity-js": "^0.6.2"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.1.0",
diff --git a/packages/clarity-devtools/package.json b/packages/clarity-devtools/package.json
index 1435a9c..8a202fa 100644
--- a/packages/clarity-devtools/package.json
+++ b/packages/clarity-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "private": true,
   "description": "Adds Clarity debugging support to browser devtools",
   "author": "Microsoft Corp.",
@@ -24,9 +24,9 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-decode": "^0.6.1",
-    "clarity-js": "^0.6.1",
-    "clarity-visualize": "^0.6.1"
+    "clarity-decode": "^0.6.2",
+    "clarity-js": "^0.6.2",
+    "clarity-visualize": "^0.6.2"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^7.1.3",
diff --git a/packages/clarity-devtools/static/manifest.json b/packages/clarity-devtools/static/manifest.json
index f7302d3..28e4a52 100644
--- a/packages/clarity-devtools/static/manifest.json
+++ b/packages/clarity-devtools/static/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "Clarity Developer Tools",
   "description": "Get insights about how customers use your website.",
-  "version": "0.6.1",
-  "version_name": "0.6.1",
+  "version": "0.6.2",
+  "version_name": "0.6.2",
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {
diff --git a/packages/clarity-js/package.json b/packages/clarity-js/package.json
index de1acbd..372b057 100644
--- a/packages/clarity-js/package.json
+++ b/packages/clarity-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
diff --git a/packages/clarity-js/src/core/version.ts b/packages/clarity-js/src/core/version.ts
index 2f5c40b..24bbe53 100644
--- a/packages/clarity-js/src/core/version.ts
+++ b/packages/clarity-js/src/core/version.ts
@@ -1,2 +1,2 @@
-let version = "0.6.1";
+let version = "0.6.2";
 export default version;
diff --git a/packages/clarity-js/src/data/upgrade.ts b/packages/clarity-js/src/data/upgrade.ts
index 4c5b548..0dd8b74 100644
--- a/packages/clarity-js/src/data/upgrade.ts
+++ b/packages/clarity-js/src/data/upgrade.ts
@@ -1,4 +1,5 @@
 import { Constant, Event, UpgradeData } from "@clarity-types/data";
+import * as core from "@src/core";
 import config from "@src/core/config";
 import encode from "@src/data/encode";
 import * as metadata from "@src/data/metadata";
@@ -15,7 +16,8 @@ export function start(): void {
 // However, if there's a need for full fidelity playback, calling this function will disable lean mode
 // and send all backed up layout events to the server.
 export function upgrade(key: string): void {
-    if (config.lean) {
+    // Upgrade only if Clarity was successfully activated on the page
+    if (core.active() && config.lean) {
         config.lean = false;
         data = { key };
 
diff --git a/packages/clarity-visualize/package.json b/packages/clarity-visualize/package.json
index 57502ac..0413740 100644
--- a/packages/clarity-visualize/package.json
+++ b/packages/clarity-visualize/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clarity-visualize",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-decode": "^0.6.1"
+    "clarity-decode": "^0.6.2"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.1.0",
diff --git a/packages/clarity-visualize/src/clarity.ts b/packages/clarity-visualize/src/clarity.ts
index a1b0e67..66f0772 100644
--- a/packages/clarity-visualize/src/clarity.ts
+++ b/packages/clarity-visualize/src/clarity.ts
@@ -101,6 +101,9 @@ export function render(events: Data.DecodedEvent[]): void {
             case Data.Event.TouchMove:
                 interaction.pointer(entry as Interaction.PointerEvent);
                 break;
+            case Data.Event.Visibility:
+                interaction.visibility(entry as Interaction.VisibilityEvent);
+                break;
             case Data.Event.Input:
                 interaction.input(entry as Interaction.InputEvent);
                 break;
diff --git a/packages/clarity-visualize/src/interaction.ts b/packages/clarity-visualize/src/interaction.ts
index d5c9d38..a9a19e0 100644
--- a/packages/clarity-visualize/src/interaction.ts
+++ b/packages/clarity-visualize/src/interaction.ts
@@ -60,6 +60,16 @@ export function resize(event: Interaction.ResizeEvent): void {
     }
 }
 
+export function visibility(event: Interaction.VisibilityEvent): void {
+    if (state.player && event.data.visible !== Constant.Visible) {
+        state.player.style.backgroundColor = Constant.Black;
+        state.player.style.opacity = Constant.HiddenOpacity;
+    } else {
+        state.player.style.backgroundColor = Constant.Transparent;
+        state.player.style.opacity = Constant.VisibleOpacity;
+    }
+}
+
 export function input(event: Interaction.InputEvent): void {
     let data = event.data;
     let el = element(data.target as number) as HTMLInputElement;
diff --git a/packages/clarity-visualize/types/visualize.d.ts b/packages/clarity-visualize/types/visualize.d.ts
index 3c582db..e77b282 100644
--- a/packages/clarity-visualize/types/visualize.d.ts
+++ b/packages/clarity-visualize/types/visualize.d.ts
@@ -73,7 +73,10 @@ export const enum Constant {
     Pixel = "px",    
     Separator = "X",
     Absolute = "absolute",
-    Black = "black"
+    Black = "black",
+    Transparent = "transparent",
+    HiddenOpacity = "0.4",
+    VisibleOpacity = "1",
 }
 
 export const enum Setting {