Merge pull request #1811 from rrivory/feat/knocket-chat

Add Knocket as a free live chat option (alongside Chatra/Tidio/Crisp)

_config.yml

@@ -659,7 +659,7 @@ artalk:
 # --------------------------------------
 
 chat:
-  # Choose: chatra/tidio/crisp
+  # Choose: chatra/tidio/crisp/knocket
   # Leave it empty if you don't need chat
   use:
   # Chat Button [recommend]
@@ -680,6 +680,10 @@ tidio:
 crisp:
   website_id:
 
+# https://trtc.io/solutions/knocket
+knocket:
+  identifier:
+
 # --------------------------------------
 # Analysis
 # --------------------------------------

layout/includes/third-party/chat/index.pug

@@ -4,4 +4,6 @@ case theme.chat.use
   when 'tidio'
     include ./tidio.pug
   when 'crisp'
-    include ./crisp.pug
+    include ./crisp.pug
+  when 'knocket'
+    include ./knocket.pug

layout/includes/third-party/chat/knocket.pug

@@ -0,0 +1,44 @@
+//- Knocket live chat — https://trtc.io/solutions/knocket
+script.
+  (() => {
+    const id = '#{theme.knocket.identifier}'
+    if (!id) return
+
+    btf.getScript(`https://trtc.io/knocket-sdk/sdk.js?identifier=${id}`).then(() => {
+      const isChatBtn = !{theme.chat.rightside_button}
+      const isChatHideShow = !{theme.chat.button_hide_show}
+
+      const getWidget = () => document.getElementById('contact-widget-auto')
+
+      if (isChatBtn) {
+        const hide = () => { const w = getWidget(); if (w) w.style.display = 'none' }
+        const show = () => { const w = getWidget(); if (w) w.style.display = '' }
+
+        // Hide the native Knocket floating button
+        const observer = new MutationObserver(() => {
+          if (getWidget()) { hide(); observer.disconnect() }
+        })
+        observer.observe(document.body, { childList: true, subtree: true })
+        hide()
+
+        window.chatBtnFn = () => {
+          const w = getWidget()
+          if (!w) return
+          if (w.style.display === 'none') show()
+          else hide()
+        }
+
+        document.getElementById('chat-btn').style.display = 'block'
+      } else if (isChatHideShow) {
+        const observer = new MutationObserver(() => {
+          if (getWidget()) observer.disconnect()
+        })
+        observer.observe(document.body, { childList: true, subtree: true })
+
+        window.chatBtn = {
+          hide: () => { const w = getWidget(); if (w) w.style.display = 'none' },
+          show: () => { const w = getWidget(); if (w) w.style.display = '' }
+        }
+      }
+    })
+  })()

scripts/common/default_config.js

@@ -394,6 +394,9 @@ module.exports = {
   crisp: {
     website_id: null
   },
+  knocket: {
+    identifier: null
+  },
   google_tag_manager: {
     tag_id: null,
     domain: 'https://www.googletagmanager.com'