LogoMkSaaS文档
LogoMkSaaS文档
首页模板介绍代码库视频教程入门文档环境配置
网站配置

功能集成

数据库身份验证邮件邮件订阅存储
支付
积分定时任务AI 功能统计分析通知验证码聊天框联盟营销

自定义

元数据字体主题图片国际化博客文档组件页面落地页用户管理密钥管理

代码库

IDE 设置项目结构格式化和代码检查更新代码库
X (Twitter)

聊天框

了解如何在 MkSaaS 中设置和使用聊天框

MkSaaS 已集成 Crisp 聊天框,实现网站实时消息功能。

设置

注册 Crisp 账号

如果还没有账号,请注册 Crisp 账号。

获取 Website ID

前往 Crisp 控制台 > Settings > Workspace Settings > Setup & Integrations。复制 Website ID,并在环境变量文件中设置:

.env
NEXT_PUBLIC_CRISP_WEBSITE_ID=YOUR-CRISP-WEBSITE-ID

在配置中启用 Crisp Chat

在 website.tsx 配置文件中将 enableCrispChat 设置为 true(默认是 false):

src/config/website.tsx
export const websiteConfig: WebsiteConfig = {
  features: {
    enableCrispChat: true,
  },
}

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

环境配置

设置环境变量


使用方法

当 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>
  );
}

参考资料

  • Crisp 官方网站
  • 如何在 Next.js 上安装 Crisp 聊天?

视频教程

下一步

邮件服务

配置邮件服务

用户认证

配置用户认证

分析统计

配置分析统计

存储服务

配置存储服务

验证码

学习如何在 MkSaaS 中设置和使用验证码

联盟营销

学习如何在MkSaaS 模板中设置和使用联盟营销平台

目录

设置注册 Crisp 账号获取 Website ID在配置中启用 Crisp Chat使用方法参考资料视频教程下一步