add theme

themes/butterfly/layout/includes/third-party/chat/chatra.pug

@@ -0,0 +1,38 @@
+//- https://chatra.io/help/api/
+script.
+  (() => {
+    window.ChatraID = '#{theme.chatra.id}'
+    window.Chatra = window.Chatra || function() {
+      (window.Chatra.q = window.Chatra.q || []).push(arguments)
+    }
+
+    btf.getScript('https://call.chatra.io/chatra.js').then(() => {
+      const isChatBtn = !{theme.chat.rightside_button}
+      const isChatHideShow = !{theme.chat.button_hide_show}
+
+      if (isChatBtn) {
+        const close = () => {
+          Chatra('minimizeWidget')
+          Chatra('hide')
+        }
+
+        const open = () => {
+          Chatra('openChat', true)
+          Chatra('show')
+        }
+
+        window.ChatraSetup = { startHidden: true }
+      
+        window.chatBtnFn = () => document.getElementById('chatra').classList.contains('chatra--expanded') ? close() : open()
+
+        document.getElementById('chat-btn').style.display = 'block'
+      } else if (isChatHideShow) {
+        window.chatBtn = {
+          hide: () => Chatra('hide'),
+          show: () => Chatra('show')
+        }
+      }
+    })
+  })()
+
+

themes/butterfly/layout/includes/third-party/chat/crisp.pug

@@ -0,0 +1,32 @@
+script.
+  (() => {
+    window.$crisp = ['safe', true]
+    window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}"
+
+    btf.getScript('https://client.crisp.chat/l.js').then(() => {
+      const isChatBtn = !{theme.chat.rightside_button}
+      const isChatHideShow = !{theme.chat.button_hide_show}
+
+      if (isChatBtn) {
+        const open = () => {
+          $crisp.push(["do", "chat:show"])
+          $crisp.push(["do", "chat:open"])
+        }
+
+        const close = () => $crisp.push(["do", "chat:hide"])
+
+        close()
+
+        $crisp.push(["on", "chat:closed", close])
+
+        window.chatBtnFn = () => $crisp.is("chat:visible") ? close() : open()
+
+        document.getElementById('chat-btn').style.display = 'block'
+      } else if (isChatHideShow) {
+        window.chatBtn = {
+          hide: () => $crisp.push(["do", "chat:hide"]),
+          show: () => $crisp.push(["do", "chat:show"])
+        }
+      }
+    })
+  })()

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

@@ -0,0 +1,7 @@
+case theme.chat.use
+  when 'chatra'
+    include ./chatra.pug
+  when 'tidio'
+    include ./tidio.pug
+  when 'crisp'
+    include ./crisp.pug

themes/butterfly/layout/includes/third-party/chat/tidio.pug

@@ -0,0 +1,45 @@
+script.
+  (() => {
+    btf.getScript('//code.tidio.co/!{theme.tidio.public_key}.js').then(() => {
+      const isChatBtn = !{theme.chat.rightside_button}
+      const isChatHideShow = !{theme.chat.button_hide_show}
+
+      if (isChatBtn) {
+        let isShow = false
+        const close = () => {
+          window.tidioChatApi.hide()
+          isShow = false
+        }
+        
+        const open = () => {
+          window.tidioChatApi.open()
+          window.tidioChatApi.show()
+          isShow = true
+        }
+
+        const onTidioChatApiReady = () => {
+          window.tidioChatApi.hide()
+          window.tidioChatApi.on("close", close)
+        }
+        if (window.tidioChatApi) {
+          window.tidioChatApi.on("ready", onTidioChatApiReady)
+        } else {
+          document.addEventListener("tidioChat-ready", onTidioChatApiReady)
+        }
+
+        window.chatBtnFn = () => {
+          if (!window.tidioChatApi) return
+          isShow ? close() : open()
+        }
+
+        document.getElementById('chat-btn').style.display = 'block'
+
+      } else if (isChatHideShow) {
+        window.chatBtn = {
+          hide: () => window.tidioChatApi && window.tidioChatApi.hide(),
+          show: () => window.tidioChatApi && window.tidioChatApi.show()
+        }
+      }
+    })
+  })()
+