聊天框
了解如何在 MkSaaS 中设置和使用聊天框
MkSaaS 已集成 Crisp 聊天框,实现网站实时消息功能。
设置
注册 Crisp 账号
如果还没有账号,请注册 Crisp 账号。
获取 Website ID
前往 Crisp 控制台 > Settings > Workspace Settings > Setup & Integrations。复制 Website ID,并在环境变量文件中设置:
NEXT_PUBLIC_CRISP_WEBSITE_ID=YOUR-CRISP-WEBSITE-ID在配置中启用 Crisp Chat
在 website.tsx 配置文件中将 enableCrispChat 设置为 true(默认是 false):
export const websiteConfig: WebsiteConfig = {
features: {
enableCrispChat: true,
},
}如果你正在进行环境配置,现在可以返回 环境配置指南 继续操作。本指南剩余部分可稍后阅读。
环境配置
设置环境变量
使用方法
当 enableCrispChat 启用且环境变量已设置时,Crisp 聊天框会自动加载到您的网站上,无需额外编写代码。
如需自定义或按需渲染聊天框,可直接导入并使用该组件:
import CrispChat from '@/components/layout/crisp-chat';
export default function RootLayout({ children }) {
return (
<html lang="zh">
<CrispChat />
<body>{children}</body>
</html>
);
}
MkSaaS文档