第13章：前端 WebApp 定制与嵌入

1. 项目背景

"你们的 AI 助手回答质量不错，但这个聊天界面太丑了——全白底、默认 Logo、没有我们公司的品牌色。“这是客户验收时最常听到的反馈之一。Dify 提供了"WebApp 发布"功能——一键生成一个对外可访问的聊天页面，用户可以在这个页面上和你的 AI 助手对话。但默认的 WebApp 页面是一个"通用壳”——白色背景、Dify Logo、标准字体，如果你要把它嵌入到公司的官网或 App 里，显然需要改造。

Dify 对 WebApp 的定制支持分为三个层次：

1. 零代码定制：在 Dify 控制台中直接修改 Logo、配色、欢迎语、建议问题（5 分钟搞定）
2. iframe 嵌入：把 WebApp 的聊天组件嵌入到你自己的网页中，通过 PostMessage 通信
3. Fork 前端源码：深度定制——修改 React 组件、交互逻辑、页面布局（需要前端开发能力）

本章从最简的零代码定制开始，逐步深入到 iframe 通信协议和前端源码结构，帮你把 Dify 的聊天能力"无缝"地融入自己的产品中。无论你是运营还是前端开发，都能找到适合自己水平的定制方式。

2. 项目设计

小胖：（指着屏幕上 Dify 的 WebApp 页面）“大师，我做的客服助手在 Dify 控制台里测试挺好的，但是发布出去后，那个界面也太丑了——白底黑字，左上角还顶着 Dify 的 Logo。老板说’这个不能直接给客户看’，怎