testsigmahq · PratheepV · Nov 22, 2022 · Nov 22, 2022 · Nov 22, 2022
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -100,10 +100,11 @@ module.exports = {
       },
     },
     {
-      resolve: `gatsby-plugin-freshchat`,
+      resolve: `gatsby-plugin-ts-freshchat`,
       options: {
         token: process.env.FRESHCHAT_TOKEN,
         host: "https://wchat.freshchat.com",
+        appEmbedUrl: "https://prestaging.testsigma.com/ui/dashboard",
       },
     },
     {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "dotenv": "^10.0.0",
     "gatsby": "^3.13.0",
     "gatsby-plugin-algolia": "^0.22.2",
-    "gatsby-plugin-freshchat": "^1.0.0-rc1",
+    "gatsby-plugin-ts-freshchat": "file:plugins/gatsby-plugin-ts-freshchat",
     "gatsby-plugin-google-analytics": "^4.14.0",
     "gatsby-plugin-google-gtag": "^4.4.0",
     "gatsby-plugin-image": "^1.13.0",

diff --git a/plugins/gatsby-plugin-ts-freshchat/gatsby-ssr.js b/plugins/gatsby-plugin-ts-freshchat/gatsby-ssr.js
@@ -0,0 +1,73 @@
+const React = require("react")
+
+module.exports.onRenderBody = (
+    {setPostBodyComponents},
+    pluginOptions
+) => {
+    if (typeof pluginOptions.token === `undefined`) {
+        return null
+    }
+
+    const freshchatHost = pluginOptions.host ? pluginOptions.host : `https://wchat.freshchat.com`
+
+    const appEmbedUrl =
+        pluginOptions.appEmbedUrl ? pluginOptions.appEmbedUrl : `https://app.testsigma.com/ui/dashboard`
+
+    const renderHTML = () => `
+    window.fcSettings = {
+      token: "${pluginOptions.token}",
+      host: "${freshchatHost}"
+    };
+
+    function addFreshchatScript() {
+        if (window.fcWidgetAdded) return;
+        var fcScript = document.createElement('script');
+        fcScript.setAttribute('src','https://wchat.freshchat.com/js/widget.js');
+        fcScript.setAttribute('async', 'async');
+        document.body.appendChild(fcScript);
+        window.fcWidgetAdded = true;
+    }
+
+    function changeSignupBtn() {
+        var signupBtn = document.getElementById('signup-btn');
+        if (!signupBtn) {
+            setTimeout(changeSignupBtn, 1000);
+            return;
+        }
+        document.getElementById('signup-btn').textContent = 'Go to Dashboard';
+        document.getElementById('signup-btn').href = 'https://app.testsigma.com';
+    }
+
+    // If session details is not received from app within 15 seconds, create new chat.
+    setTimeout(addFreshchatScript, 15000);
+
+    window.addEventListener('message', function( event) {
+        if (event.origin === 'https://app.testsigma.com' ||
+            event.origin === 'https://staging.testsigma.com' ||
+            event.origin === 'https://prestaging.testsigma.com' ||
+            event.origin === 'https://devtesting.testsigma.com' ||
+            event.origin === 'http://dev.testsigma.com') {
+            if (event.data === 'appLoggedOut') {
+                addFreshchatScript();
+            } else {
+                var session = JSON.parse(event.data);
+                changeSignupBtn();
+                window.fcSettings.externalId = session.user.email;
+                window.fcSettings.restoreId = session.fcRestoreId;
+                addFreshchatScript();
+            }
+        }
+    });
+  `
+
+    setPostBodyComponents([
+        <iframe key={`gatsby-plugin-ts-freshchat-iframe`} 
+                src={`${appEmbedUrl}`} 
+                height={0} width={0} 
+                style={{display: "none"}}></iframe>,
+        <script
+            key={`gatsby-plugin-ts-freshchat-render`}
+            dangerouslySetInnerHTML={{__html: renderHTML()}}
+        />
+    ])
+}
diff --git a/plugins/gatsby-plugin-ts-freshchat/index.js b/plugins/gatsby-plugin-ts-freshchat/index.js
@@ -0,0 +1 @@
+// noop
diff --git a/plugins/gatsby-plugin-ts-freshchat/package.json b/plugins/gatsby-plugin-ts-freshchat/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "gatsby-plugin-ts-freshchat",
+  "version": "1.0.0",
+  "description": "Gatsby Plugin to add Freshchat to Testsigma sites",
+  "main": "index.js"
+}
diff --git a/src/templates/page.jsx b/src/templates/page.jsx
@@ -84,7 +84,7 @@ export default ({ data, pageContext }) => {
                         </nav>
                         <div className="relative flex items-center justify-between w-2/5 pl-9 pr-9">
                             <SearchInputBox></SearchInputBox>
-                            <a className="border border-green-600 font-bold px-4 py-1.5 text-green-600 rounded" href='https://testsigma.com/signup'>Get started for free</a>
+                            <a id={'signup-btn'} target={'_blank'} className="border border-green-600 font-bold px-4 py-1.5 text-green-600 rounded" href='https://testsigma.com/signup'>Get started for free</a>
                         </div>
                     </nav>
                 </div>