聊天框

MkSaaS 已集成 Crisp 聊天框，实现网站实时消息功能，让用户可以直接在您的网站上留言反馈或联系支持。

设置

注册 Crisp 账号。
前往 Crisp 控制台 > Settings > Workspace Settings > Setup & Integrations。
复制 Website ID，并在 .env 文件中设置为 NEXT_PUBLIC_CRISP_WEBSITE_ID。

.env

NEXT_PUBLIC_CRISP_WEBSITE_ID=your_crisp_website_id

在 website.tsx 配置文件中将 enableCrispChat 设置为 true（默认是 false）：

src/config/website.tsx

export const websiteConfig: WebsiteConfig = {
  features: {
    enableCrispChat: true,
  },
}

更多详情请参阅 Crisp 官方文档。

如果你正在进行环境配置，现在可以返回 环境配置指南 继续操作。本指南剩余部分可稍后阅读。

环境配置

设置环境变量

聊天框系统结构

crisp-chat.tsx

src/components/layout/crisp-chat.tsx：Crisp 聊天集成组件。

使用方法

当 enableCrispChat 启用且环境变量已设置时，Crisp 聊天框会自动加载到你的网站上。

无需额外编写代码，用户将在所有页面看到聊天窗口，可以发送消息或反馈。

如需自定义或按需渲染聊天框，可直接导入并使用该组件：

src/app/layout.tsx

import CrispChat from '@/components/layout/crisp-chat';

export default function RootLayout({ children }) {
  return (
    <html lang="zh">
      <CrispChat />
      <body>{children}</body>
    </html>
  );
}

参考资料

视频教程

下一步

启用聊天框后，你还可以探索以下相关集成：

邮件服务

配置邮件服务

用户认证

配置用户认证

分析统计

配置分析统计

存储服务

配置存储服务

设置