chat-base

components/ChatBase.js

@@ -0,0 +1,14 @@
+import BLOG from '@/blog.config'
+
+export default function ChatBase() {
+  if (!BLOG.CHATBASE_ID) {
+    return <></>
+  }
+
+  return <iframe
+        src={`https://www.chatbase.co/chatbot-iframe/${BLOG.CHATBASE_ID}`}
+        width="100%"
+        style={{ height: '100%', minHeight: '700px' }}
+        frameborder="0"
+    ></iframe>
+}

components/CommonScript.js

@@ -7,6 +7,18 @@ import BLOG from '@/blog.config'
  */
 const CommonScript = () => {
   return (<>
+
+    {BLOG.CHATBASE_ID && (<>
+        <script id={BLOG.CHATBASE_ID} src="https://www.chatbase.co/embed.min.js" defer/>
+        <script async dangerouslySetInnerHTML={{
+          __html: `
+             window.chatbaseConfig = {
+                chatbotId: "${BLOG.CHATBASE_ID}",
+            }
+        `
+        }}/>
+    </>)}
+
     {BLOG.COMMENT_DAO_VOICE_ID && (<>
       {/* DaoVoice 反馈 */}
       <script async dangerouslySetInnerHTML={{

components/ExternalPlugins.js

@@ -1,5 +1,6 @@
 import BLOG from 'blog.config'
 import dynamic from 'next/dynamic'
+import ChatBase from './ChatBase'
 
 // import TwikooCommentCounter from '@/components/TwikooCommentCounter'
 // import { DebugPanel } from '@/components/DebugPanel'
@@ -53,6 +54,7 @@ const ExternalPlugin = (props) => {
           {JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
           {JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE) && <TwikooCommentCounter {...props}/>}
           {JSON.parse(BLOG.RIBBON) && <Ribbon />}
+          {BLOG.CHATBASE_ID && <ChatBase />}
           <VConsole/>
       </>
 }