diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
index 5cc0c28fd49..03f1d527fd2 100644
--- a/src/components/Footer/index.jsx
+++ b/src/components/Footer/index.jsx
@@ -1,4 +1,5 @@
 import { Link } from "react-router-dom";
+import { useEffect } from "react";
 import { Divider, Button, Space } from "antd";
 import {
   GithubOutlined,
@@ -11,6 +12,26 @@ import "./index.scss";
 
 const Footer = () => {
   const { locale, t } = useTranslation();
+
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = "https://widget.kapa.ai/kapa-widget.bundle.js";
+    script.async = true;
+    script.dataset.websiteId = "e3268e5d-c0f1-4e71-819c-c60ebb2215a7";
+    script.dataset.projectName = "Apache DolphinScheduler";
+    script.dataset.projectColor = "#0097E0";
+    script.dataset.projectLogo =
+      "https://dolphinscheduler.apache.org/images/logo_400x400.jpg";
+    script.dataset.modalDisclaimer =
+      "This is a custom LLM for Apache DolphinScheduler with access to all developer Documentation, Blog, GitHub issues and discussions.";
+    script.dataset.modalExampleQuestions =
+      "Why we need DolphinScheduler?,How to deploy DolphinScheduler?,How to submit task?,How to contribute?";
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
   return (
     <footer className="footer">
       <section className="footer-content">