了解使用 Elfsight 通过 4 个简单步骤在您的 Webflow 网站中插入 WhatsApp 聊天小部件的过程:
- 在 Elfsight 中生成小部件
- 重复代码
- 将代码嵌入 Webflow
- 完成并测试
如果你还没有设置 精灵视力 尚未创建帐户,请创建一个帐户来探索各种小工具。具体来说,对于本指南,您需要 WhatsApp 聊天 小部件。
登录 Elfsight 后,导航至 应用 页面并搜索 WhatsApp。从那里,选择 WhatsApp 聊天 创建小部件的选项。
在 Elfsight 中生成小部件

获取 WhatsApp 小部件后,选择一个模板:
- 为您的小部件命名(例如 WhatsApp 嵌入)
- 选择小部件布局模板
- 轻敲 继续使用模板
接下来进行定制:
- 内容
- 设置
- 设计
首先在下方输入您的 WhatsApp 电话号码 内容 部分,然后定制您的小部件以匹配您的 Webflow 项目。
内容
这 内容 该功能可让您修改:
- 聊天气泡
- 聊天标题
- 欢迎信息
- 开始聊天按钮
聊天气泡
点击 聊天气泡 选项可让您选择聊天气泡图标并输入自定义 气泡文字 显示在您的图标旁边(如果没有添加文本则保持为空)。
聊天标题
选择 聊天标题 探索标题自定义的选项如下:

- 聊天打开时显示的个人资料图片
- 个人资料图片旁边的名字
- 名称下方的标题
欢迎信息
访问 欢迎信息 输入聊天开场白的功能。
开始聊天按钮
使用 开始聊天 选项可让您定义启动 WhatsApp 的文本。您还可以切换以显示或隐藏按钮中的 WhatsApp 图标。
设置
这 设置 功能允许您修改:
- 位置
- 聊天显示设置
- 打开聊天触发器
- 通知
位置

点击 位置 选项可访问侧边栏,您可以在其中设置小部件的位置:
- 浮泡
- 嵌入气泡
- 嵌入聊天窗口
您还可以将小部件对齐到中心或左/右。
聊天显示设置
可用条件包括:
- 页面(展示聊天小部件的地方)
- 设备(在移动设备/桌面上显示小部件)
- 访客(显示所有访客、新访客或回访者的聊天)
- 日期和时间(何时显示小部件)
打开聊天触发器
- 页面停留时间
- 现场时间
- 滚动位置
- 退出意图
设计

修改完成后,请确保 店铺.
复制嵌入脚本
要将您的小工具纳入您的 Webflow 计划,需要 Elfsight 的嵌入脚本。
保存前一阶段的调整后,会出现一个带有嵌入脚本的弹出窗口——单击脚本即可自动将其复制到剪贴板。

将脚本插入 Webflow
有两种方法可以将小工具包含到您的 Webflow 项目中 - 整个项目、每个页面或单个页面。
项目范围
要在每个页面上插入小工具:
- 选择 自定义代码 项目设置中的选项卡
- 将复制的嵌入脚本粘贴到 头部代码 您的项目部分
- 保存调整
- 发布
- 发布到选定的域
评论:自定义脚本仅在最终确定的网站上可见。
发布并验证
现在是时候发布和验证新的小工具了:
- 按 发布
- 选择您要发布的域名
- 发布至选定域
Ewan Mak 的最新帖子 (查看全部)
- 包括或删除工作区位置和成员 - 2024 年 4 月 15 日
- 定心盒摘要 - 2024 年 4 月 15 日
- 存储网站以供将来参考 - 2024 年 4 月 15 日