Kapa.ai Implementation

docs/guides/index.md

@@ -25,15 +25,15 @@ Getting started with Amplitude can be daunting. These guides break down sophisti
 
     Learn about best practices for instrumenting the Accounts add on.
 
-    [:octicons-arrow-right-24: Read the guide](../guides/accounts-instrumentation-guide)
+    [:octicons-arrow-right-24: Read the guide](../guides/accounts-instrumentation-guide/)
 
 - :material-key:{ .lg .middle } __Amplitude tokens and keys__
 
     ---
 
     Learn all about Amplitude's tokens and keys.
 
-    [:octicons-arrow-right-24: Read the guide](../guides/amplitude-keys-guide)
+    [:octicons-arrow-right-24: Read the guide](../guides/amplitude-keys-guide/)
 
 - :material-file-import-outline:{ .lg .middle } __Import historical data__
 

docs/javascripts/init-kapa-widget.js

@@ -0,0 +1,10 @@
+// document.addEventListener("DOMContentLoaded", function () {
+//     var script = document.createElement("script");
+//     script.src = "https://widget.kapa.ai/kapa-widget.bundle.js";
+//     script.setAttribute("data-website-id", "ad8ecaa4-5c43-413b-9d0a-8114b6e1f831");
+//     script.setAttribute("data-project-name", "Amplitude");
+//     script.setAttribute("data-project-color", "#301661");
+//     script.setAttribute("data-project-logo", "https://avatars.githubusercontent.com/u/2291562?s=280&v=4");
+//     script.async = true;
+//     document.head.appendChild(script);
+//   });

overrides/home.html

@@ -199,4 +199,6 @@ <h1>Welcome to the Amplitude Developer center</h1>
 {% endblock %}
 {% block content %}
   {{ page.content }}
-{% endblock %}
+{% endblock %}
+
+

overrides/main.html

@@ -79,3 +79,84 @@
 {{ super ()}}
 {% endblock %}
 
+
+
+<!-- Kapa template -->
+{% block libs %}
+
+{{ super() }}
+
+<script src="https://unpkg.com/@amplitude/[email protected]/dist/experiment.umd.js"></script>
+<script>
+function getPageInfo() {
+    return {
+        path: window.location.pathname,
+        product: window.location.pathname.split('/')[1],
+        url: window.location.href
+    };
+}
+
+const initKapa = function () {
+    var script = document.createElement("script");
+    script.src = "https://widget.kapa.ai/kapa-widget-v1.1.0.bundle.js";
+    script.setAttribute("data-website-id", "ad8ecaa4-5c43-413b-9d0a-8114b6e1f831");
+    script.setAttribute("data-project-name", "Amplitude");
+    script.setAttribute("data-project-color", "#301661");
+    script.setAttribute("data-project-logo", "https://avatars.githubusercontent.com/u/2291562?s=280&v=4");
+    script.async = true;
+    document.head.appendChild(script);
+    // Tracking stuff starts here. 
+    setTimeout(function () {
+        const kapaWidget = document.getElementById("kapa-widget-container")
+
+        kapaWidget.addEventListener("click", function () {
+            amplitude.track('Kapa Click', getPageInfo())
+            setTimeout(function () {
+                const kapaSearchButton = document.getElementsByClassName("mantine-UnstyledButton-root mantine-ActionIcon-root")
+                const kapaSearchBox = document.getElementsByClassName('mantine-Textarea-input')
+                kapaSearchButton[1].addEventListener("click", function () {
+                    let kapaQuestion = kapaSearchBox[0].value
+                    // Kapa Search event here
+                    amplitude.track('Kapa Search', {
+                        ...getPageInfo(),
+                        question: kapaQuestion
+                    })
+                })
+                kapaSearchBox[0].addEventListener("keydown", function (event) {
+
+                    if (event.key === 13 || event.key === 'Enter') {
+                        let kapaQuestion = kapaSearchBox[0].value
+                        amplitude.track('Kapa Search', {
+                            ...getPageInfo(),
+                            question: kapaQuestion
+                        })
+                    }
+                })
+
+            }, 1000)
+        })
+    }, 1500);
+    // });
+}
+
+window.experiment = Experiment.Experiment.initializeWithAmplitudeAnalytics(
+    'client-TF7RK1kKHIpd9sS2tn63MrevvXTmriJv', {
+        fetchOnStart: true
+    }
+);
+
+// await experiment.start();
+experiment.start().then(() => {
+    const variant = experiment.variant('kapa-ai-widget');
+    if (variant.value === 'on') {
+        if (document.readyState != 'loading') {
+          initKapa()
+        } else {
+          document.addEventListener("DOMContentLoaded", initKapa())
+        }
+
+    }
+})
+</script>
+
+{% endblock %}

overrides/partials/integrations/analytics/amplitude.html

@@ -1,6 +1,8 @@
 <script type="text/javascript">
 var consent = __md_get("__consent")
 if (consent) {
+    // TODO: Add swich based on domain 
+
     /* The user accepted the cookie */
     !function(){"use strict";!function(e,t){var r=e.amplitude||{_q:[],_iq:{}};if(r.invoked)e.console&&console.error&&console.error("Amplitude snippet has been loaded.");else{var n=function(e,t){e.prototype[t]=function(){return this._q.push({name:t,args:Array.prototype.slice.call(arguments,0)}),this}},s=function(e,t,r){return function(n){e._q.push({name:t,args:Array.prototype.slice.call(r,0),resolve:n})}},o=function(e,t,r){e[t]=function(){if(r)return{promise:new Promise(s(e,t,Array.prototype.slice.call(arguments)))}}},i=function(e){for(var t=0;t<g.length;t++)o(e,g[t],!1);for(var r=0;r<y.length;r++)o(e,y[r],!0)};r.invoked=!0;var a=t.createElement("script");a.type="text/javascript",a.integrity="sha384-gO+7OZjJ98YoMPqYSFk9rQy2jxO1C7ZFrDa9/PTh1PtUYIiyBLFo35kQUNQRNzp8",a.crossOrigin="anonymous",a.async=!0,a.src="https://cdn.amplitude.com/libs/analytics-browser-2.1.1-min.js.gz",a.onload=function(){e.amplitude.runQueuedFunctions||console.log("[Amplitude] Error: could not load SDK")};var c=t.getElementsByTagName("script")[0];c.parentNode.insertBefore(a,c);for(var u=function(){return this._q=[],this},p=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove","getUserProperties"],l=0;l<p.length;l++)n(u,p[l]);r.Identify=u;for(var d=function(){return this._q=[],this},f=["getEventProperties","setProductId","setQuantity","setPrice","setRevenue","setRevenueType","setEventProperties"],v=0;v<f.length;v++)n(d,f[v]);r.Revenue=d;var g=["getDeviceId","setDeviceId","getSessionId","setSessionId","getUserId","setUserId","setOptOut","setTransport","reset","extendSession"],y=["init","add","remove","track","logEvent","identify","groupIdentify","setGroup","revenue","flush"];i(r),r.createInstance=function(e){return r._iq[e]={_q:[]},i(r._iq[e]),r._iq[e]},e.amplitude=r}}(window,document)}();
     amplitude.init("c1817405c2f578878637c55704d4a153", {