diff --git a/docusaurus.config.js b/docusaurus.config.js
index 29f2b9e5..0c3e419a 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -283,6 +283,14 @@ var _hmt = _hmt || [];
       src: "/js/clarity.js",
       async: true,
     },
+    {
+      src: "https://tcdn.casibase.org/casibase.js",
+      async: true,
+    },
+    {
+      src: "/js/casibase.js",
+      async: true,
+    },
   ],
   presets: [
     [
diff --git a/src/ChatWidget/ChatButton.jsx b/src/ChatWidget/ChatButton.jsx
deleted file mode 100644
index c2574da8..00000000
--- a/src/ChatWidget/ChatButton.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, {useEffect, useState} from "react";
-import {
-  chatButton,
-  chatButtonHover,
-  chatButtonOpen,
-  chatIframe,
-  chatIframeContainer,
-  chatIframeContainerOpen,
-  closeIcon
-} from "./chatStyles";
-
-function ChatButton() {
-  const [isChatOpen, setIsChatOpen] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const [containerStyle, setContainerStyle] = useState(chatIframeContainer);
-  const [iconRotation, setIconRotation] = useState(0);
-
-  useEffect(() => {
-    if (isChatOpen) {
-      setTimeout(() => {
-        setContainerStyle({...chatIframeContainer, ...chatIframeContainerOpen});
-      }, 50);
-      setIconRotation(-90);
-    } else {
-      setContainerStyle(chatIframeContainer);
-      setIconRotation(0);
-    }
-  }, [isChatOpen]);
-
-  const handleClick = () => {
-    setIsChatOpen(!isChatOpen);
-  };
-
-  return (
-    <div>
-      <button
-        style={{
-          ...chatButton,
-          ...(isChatOpen ? chatButtonOpen : {}),
-          ...(isHovered ? chatButtonHover : {}),
-        }}
-        onClick={handleClick}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        {isChatOpen ? (
-          <span style={{...closeIcon, transform: `rotate(${iconRotation}deg)`}}>×</span>
-        ) : (
-          <>
-            <svg
-              style={{
-                marginRight: "5px",
-                transition: "transform 0.3s ease",
-                transform: `rotate(${iconRotation}deg)`,
-              }}
-              viewBox="0 0 1024 1024"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-            >
-              <g transform="scale(-1, 1) translate(-1024, 0)">
-                <path
-                  d="M1002.7 448C1002.7 212.4 783 21.3 512 21.3S21.3 212.4 21.3 448c0 194.7 149.9 358.9 354.8 410.1-21.1 66.9-77.4 123.2-77.4 123.2s548.8-34.3 677.6-395c17.1-43.4 26.4-89.9 26.4-138.3z"
-                  fill="#ffffff"
-                ></path>
-              </g>
-            </svg>
-            Chat with AI
-          </>
-        )}
-      </button>
-      <div
-        style={{
-          ...containerStyle,
-          display: isChatOpen ? "flex" : "none",
-        }}
-      >
-        <iframe src="https://ai.casbin.com/?isRaw=1" title="Chat with AI" style={chatIframe} />
-      </div>
-    </div>
-  );
-}
-
-export default ChatButton;
diff --git a/src/ChatWidget/chatStyles.js b/src/ChatWidget/chatStyles.js
deleted file mode 100644
index 32db8ec0..00000000
--- a/src/ChatWidget/chatStyles.js
+++ /dev/null
@@ -1,64 +0,0 @@
-export const chatButton = {
-  position: "fixed",
-  bottom: "20px",
-  right: "20px",
-  backgroundColor: "#403B79",
-  color: "white",
-  border: "none",
-  borderRadius: "50px",
-  padding: "10px 20px",
-  cursor: "pointer",
-  zIndex: 1000,
-  display: "flex",
-  alignItems: "center",
-  fontWeight: "bold",
-  fontSize: "16px",
-  transition: "all 0.3s ease",
-};
-
-export const chatButtonHover = {
-  backgroundColor: "#2E2A57",
-  boxShadow: "0 6px 100px rgba(0, 0, 0, 0.5)",
-};
-
-export const chatButtonOpen = {
-  borderRadius: "50%",
-  width: "50px",
-  height: "50px",
-  padding: 0,
-  justifyContent: "center",
-};
-
-export const closeIcon = {
-  fontSize: "50px",
-  fontWeight: "100",
-  lineHeight: 1,
-  transition: "transform 0.3s ease",
-};
-
-export const chatIframeContainer = {
-  position: "fixed",
-  bottom: "80px",
-  right: "20px",
-  width: "min(550px, calc(100vw - 40px))",
-  height: "min(600px, calc(100vh - 100px))",
-  borderRadius: "10px",
-  zIndex: 1001,
-  flexDirection: "column",
-  overflow: "hidden",
-  transition: "all 0.3s ease",
-  transform: "translateY(30px)",
-  opacity: 1,
-  boxShadow: "-8px 0 8px -8px rgba(0, 0, 0, 0.2), 0 -8px 8px -8px rgba(0, 0, 0, 0.2), 0 8px 8px -8px rgba(0, 0, 0, 0.2)",
-};
-
-export const chatIframeContainerOpen = {
-  transform: "translateY(0)",
-  opacity: 1,
-};
-
-export const chatIframe = {
-  width: "100%",
-  height: "100%",
-  marginLeft: "-2px",
-};
diff --git a/src/ChatWidget/chatWidget.js b/src/ChatWidget/chatWidget.js
deleted file mode 100644
index 8b2f7fe0..00000000
--- a/src/ChatWidget/chatWidget.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import ChatButton from "./ChatButton";
-
-export function initChatWidget(targetElement) {
-  if (typeof window !== "undefined" && targetElement) {
-    const chatContainer = document.createElement("div");
-    targetElement.appendChild(chatContainer);
-    ReactDOM.render(<ChatButton />, chatContainer);
-  }
-}
-
-export {ChatButton};
diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index 3d3eaa65..4196e98f 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -1,9 +1,8 @@
-import React, {useEffect} from "react";
+import React from "react";
 import clsx from "clsx";
 import styles from "./styles.module.css";
 import Translate from "@docusaurus/Translate";
 import {useColorMode} from "@docusaurus/theme-common";
-import {initChatWidget} from "../../ChatWidget/chatWidget";
 
 const FeatureList = [
   {
@@ -70,11 +69,6 @@ function Feature({title, path, description}) {
 }
 
 export default function HomepageFeatures() {
-
-  useEffect(() => {
-    initChatWidget(document.body);
-  }, []);
-
   return (
     <section className={styles.features}>
       <div className="container">
diff --git a/static/js/casibase.js b/static/js/casibase.js
new file mode 100644
index 00000000..e0de4aed
--- /dev/null
+++ b/static/js/casibase.js
@@ -0,0 +1,5 @@
+/* eslint-disable no-undef */
+initCasibaseChat({
+  endpoint: "https://ai.casbin.com",
+  themeColor: "rgb(64,59,121)",
+});