DOCS-2093: Make userflow only load on chat button click (#2730)

viamrobotics · Apr 5, 2024 · 6bae1e1 · 6bae1e1
1 parent b04c966
commit 6bae1e1
Show file tree

Hide file tree

Showing 8 changed files with 365 additions and 22 deletions.
diff --git a/assets/icons/learn-viam-robot-icon-ai.svg b/assets/icons/learn-viam-robot-icon-ai.svg
diff --git a/assets/js/index.js b/assets/js/index.js
@@ -125,7 +125,9 @@ function toTop() {
 function btnVisibility(payload) {
     if (payload[0].boundingClientRect.y <= -400) {
         scrollBtn.style.visibility = "visible";
+        scrollBtn.style.opacity = "1";
     } else {
+        scrollBtn.style.opacity = "0";
         scrollBtn.style.visibility = "hidden";
     }
 }
@@ -160,4 +162,19 @@ docsearch({
       }],
       apiKey: 'GHQK6od8KfpvTEh4YpA113gUc2dU5fGR'
     }
-});
+});
+
+// Userflow START
+!function(){var e="undefined"==typeof window?{}:window,r=e.userflow;if(!r){var t="https://js.userflow.com/",n=null;r=e.userflow={_stubbed:!0,load:function(){return n||(n=new Promise((function(r,o){var s=document.createElement("script");s.async=!0;var a=e.USERFLOWJS_ENV_VARS||{};"es2020"===(a.USERFLOWJS_BROWSER_TARGET||function(e){for(var r=[[/Edg\//,/Edg\/(\d+)/,80],[/OPR\//,/OPR\/(\d+)/,67],[/Chrome\//,/Chrome\/(\d+)/,80],[/Safari\//,/Version\/(\d+)/,14],[/Firefox\//,/Firefox\/(\d+)/,74]],t=0;t<r.length;t++){var n=r[t],o=n[0],s=n[1],a=n[2];if(e.match(o)){var u=e.match(new RegExp(s));if(u&&parseInt(u[1],10)>=a)return"es2020";break}}return"legacy"}(navigator.userAgent))?(s.type="module",s.src=a.USERFLOWJS_ES2020_URL||t+"es2020/userflow.js"):s.src=a.USERFLOWJS_LEGACY_URL||t+"legacy/userflow.js",s.onload=function(){r()},s.onerror=function(){document.head.removeChild(s),n=null;var e=new Error("Could not load Userflow.js");console.error(e.message),o(e)},document.head.appendChild(s)}))),n}};var o=e.USERFLOWJS_QUEUE=e.USERFLOWJS_QUEUE||[],s=function(e){r[e]=function(){var t=Array.prototype.slice.call(arguments);r.load(),o.push([e,null,t])}},a=function(e){r[e]=function(){var t,n=Array.prototype.slice.call(arguments);r.load();var s=new Promise((function(e,r){t={resolve:e,reject:r}}));return o.push([e,t,n]),s}},u=function(e,t){r[e]=function(){return t}};s("_setTargetEnv"),s("closeResourceCenter"),s("init"),s("off"),s("on"),s("prepareAudio"),s("registerCustomInput"),s("remount"),s("reset"),s("setBaseZIndex"),s("setCustomInputSelector"),s("setCustomNavigate"),s("setCustomScrollIntoView"),s("setInferenceAttributeFilter"),s("setInferenceAttributeNames"),s("setInferenceClassNameFilter"),s("setResourceCenterLauncherHidden"),s("setScrollPadding"),s("setShadowDomEnabled"),s("setPageTrackingDisabled"),s("setUrlFilter"),s("openResourceCenter"),s("toggleResourceCenter"),a("endAll"),a("endAllFlows"),a("endChecklist"),a("group"),a("identify"),a("identifyAnonymous"),a("start"),a("startFlow"),a("startWalk"),a("track"),a("updateGroup"),a("updateUser"),u("getResourceCenterState",null),u("isIdentified",!1)}}();
+
+userflow.init("ct_dybdwc2fkna4lmih2zyqb6eune");
+userflow.setResourceCenterLauncherHidden(true);
+
+async function initAndClick() {
+    // unclear why it needs to be called twice but otherwise you need to click the button twice.
+    await userflow.identifyAnonymous({});
+    await userflow.identifyAnonymous({});
+    userflow.openResourceCenter()
+}
+
+// Userflow END
diff --git a/assets/js/userflow.js b/assets/js/userflow.js
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -67,6 +67,10 @@ h2, .h2 {
   clear: both;
 }
 
+.td-content {
+  min-height: 92%;
+}
+
 .td-content > h2.frontpage-headers {
   margin-top: 1.5rem;
 }
@@ -854,18 +858,36 @@ td > ul, td > ol {
   color: black;
   border-radius: 0;
   background-color: whitesmoke;
-  margin: 0;
+  margin: 0.5rem;
   padding: 1rem 1.25rem;
   i {
     color: black;
   }
 }
 
-#scrollButton {
+#scrollButton, #chatButton {
   position: sticky;
   left: 100%;
   bottom: 1rem;
   border-radius: 0;
+  height: 60px;
+  width: 60px;
+  opacity: 1;
+  transition: opacity 0.5s;
+  background-color: #000000;
+  color: white;
+}
+
+#scrollButton > i, #chatButton > i {
+  color: white;
+}
+
+#scrollButton {
+  margin-right: 76px;
+}
+
+#chatButton {
+  padding: 6px;
 }
 
 #edit-on-github, #rss-feed {
@@ -1493,7 +1515,7 @@ a.ais-Pagination-link:hover {
 // ensure tutorials page is 100% of height
 
 .row.flex-xl-nowrap {
-  min-height: 100%;
+  min-height: 90%;
 }
 
 // Helper to allow search to link to tabs

diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
@@ -26,12 +26,17 @@
             {{ partial "edit-on-github.html" . }}
             {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
             {{ block "main" . }}{{ end }}
-            <!-- <button onclick="toTop()" class="docsbutton" id="scrollButton" title="Go to top" style="visibility: hidden;">
-                <i style="font-size:large;" class="fas fa-chevron-up"></i>
-            </button> -->
-        </main>
-        </div>
+
+          </main>
       </div>
+      {{ $img := resources.GetMatch "/icons/learn-viam-robot-icon-ai.svg" }}
+      <button onclick="initAndClick()" class="docsbutton" id="chatButton" title="Chatbot and support">
+        <i style="font-size:x-large;" class="fas fa-comments"></i>
+      </button>
+      <button onclick="toTop()" class="docsbutton" id="scrollButton" title="Go to top" style="visibility: hidden;">
+        <i style="font-size:x-large;" class="fas fa-chevron-up"></i>
+      </button>
+    </div>
       {{ partial "footer.html" . }}
     </div>
     {{ partial "scripts.html" . }}

diff --git a/layouts/docs/glossary.html b/layouts/docs/glossary.html
@@ -39,11 +39,15 @@ <h4 id="{{ printf "%s" $term_identifier }}" class="glossary-anchor">{{ .Title }}
                     {{ end }}
                 {{ end }}
             </div>
-            <!-- <button onclick="toTop()" class="docsbutton" id="scrollButton" title="Go to top" style="visibility: hidden;">
-                <i style="font-size:large;" class="fas fa-chevron-up"></i>
-            </button> -->
         </main>
         </div>
+        {{ $img := resources.GetMatch "/icons/learn-viam-robot-icon-ai.svg" }}
+        <button onclick="initAndClick()" class="docsbutton" id="chatButton" title="Chatbot and support">
+          <i style="font-size:x-large;" class="fas fa-comments"></i>
+        </button>
+        <button onclick="toTop()" class="docsbutton" id="scrollButton" title="Go to top" style="visibility: hidden;">
+            <i style="font-size:x-large;" class="fas fa-chevron-up"></i>
+        </button>
       </div>
       {{ partial "footer.html" . }}
     </div>

diff --git a/layouts/docs/tutorials.html b/layouts/docs/tutorials.html
@@ -80,7 +80,11 @@ <h4 class="alert-heading">Javascript</h4>
                 <p>Find more examples of how Viam is being used in the world by reviewing <a href="https://www.viam.com/customers" target="_blank">Customer Stories</a>, <a href="/tutorials/">tutorials</a>, or <a href="https://www.viam.com/blog?categories=Tutorials" target="_blank">blog posts</a>.</p>
             </main>
         </div>
-      </div>
+        {{ $img := resources.GetMatch "/icons/learn-viam-robot-icon-ai.svg" }}
+        <button onclick="initAndClick()" class="docsbutton" id="chatButton" title="Chatbot and support">
+            <i style="font-size:x-large;" class="fas fa-comments"></i>
+        </button>
+    </div>
       {{ partial "footer.html" . }}
     </div>
 

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -80,7 +80,6 @@
 <script src="https://cdn.jsdelivr.net/npm/typesense-docsearch.js@1/dist/cdn/docsearch.min.js"></script>
 
 {{ $jsIndex := resources.Get "js/index.js" }}
-{{ $jsUserflow := resources.Get "js/userflow.js" }}
 {{ $jsPrismViam := resources.Get "js/prism.js" }}
 {{ $jsBase := resources.Get "js/base.js" }}
 {{ $jsAnchor := resources.Get "js/anchor.js" }}
@@ -99,7 +98,7 @@
 {{ $js := (slice $jsIndex $jsBase $jsAnchor $jsSearch $jsMermaid $jsPlantuml $jsMarkmap $jsDrawio $jsPrismViam) | resources.Concat "js/main.js" }}
 <script src="{{ $js.RelPermalink }}"></script>
 {{ else }}
-{{ $js := (slice $jsUserflow $jsIndex $jsBase $jsAnchor $jsSearch $jsMermaid $jsPlantuml $jsMarkmap $jsDrawio $jsPrismViam) | resources.Concat "js/main.js" }}
+{{ $js := (slice $jsIndex $jsBase $jsAnchor $jsSearch $jsMermaid $jsPlantuml $jsMarkmap $jsDrawio $jsPrismViam) | resources.Concat "js/main.js" }}
 {{ $js := $js | minify | fingerprint }}
 {{ $jsSentry := $jsSentry | minify }}
 <script async src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>