免费工具

为您的网站构建WhatsApp聊天小部件

在下方配置它,然后直接在此页面上进行测试。角落中的气泡是真实的小部件,实时运行。

配置您的小部件

更改会立即更新实时预览和代码片段。

选择您的国家以确保代码正确(WhatsApp无法在没有它的情况下找到聊天),然后输入号码的其余部分,仅数字。

如果小部件最终被网站上的另一个元素隐藏(如Cookie横幅或另一个聊天工具),请增加此值。

您的嵌入代码片段

在网站的closing </body> 标签之前粘贴此代码。

实时预览

查看此页面的右下角。那是您的小部件,使用真实的嵌入脚本从上面的设置中呈现。

在WhatsApp Web上管理您的潜在客户

下载免费的Chat Quotient Chrome扩展程序,直接在WhatsApp Web中查看和管理每个对话,完整的WhatsApp CRM体验。

添加到Chrome,免费

什么是WhatsApp聊天小部件?

WhatsApp聊天小部件是一个小按钮,位于网站的角落,点击时会打开与企业的WhatsApp对话,要么直接发送到企业的WhatsApp号码,要么先通过简短表单。它用一个大多数访问者已在手机上打开的频道取代了静态的"联系我们"链接或电子邮件表单。

它与普通的"点击以聊天"链接(只是打开wa.me的文本或图标)不同,因为小部件是可配置的:位置、颜色和预填充的问候语。

如何将WhatsApp聊天小部件添加到您的网站

  1. 1

    配置您的小部件

    输入您的WhatsApp号码,然后为小部件选择颜色和角落。

  2. 2

    复制代码片段

    使用上面的"复制代码片段"按钮。这是一个单独的 <script> 标签,没有其他文件或依赖项。

  3. 3

    将其粘贴到您的网站上

    在网站HTML的closing </body> 标签之前添加它。

  4. 4

    发布

    就这样。小部件从代码片段自行呈现,无需构建步骤、后端或帐户。

按平台粘贴位置

WordPress
使用"Insert Headers and Footers"或"WPCode"之类的插件,或通过Appearance → Theme File Editor直接将其粘贴到主题的footer.php中的</body>之前。
Shopify
Online Store → Themes → Edit code → theme.liquid,并将代码片段粘贴到</body>的正上方。
Wix
Settings → Custom Code → Add Code,将其设置为在"Body - end"部分的所有页面上加载。
Webflow
Project Settings → Custom Code → Footer Code,然后发布您的网站。
任何其他网站
如果您可以编辑网站的HTML,请在</body>之前粘贴它。它在各处的工作方式相同。

为什么在网站上添加WhatsApp按钮

无表单,无电子邮件,无页面重新加载

访问者通过他们已在手机上打开的应用程序与您联系,而不是输入联系表单并等待回复。

它可以在访问者已有的地方接触到他们

WhatsApp是全世界数十亿人的默认消息应用程序。对于大多数访问者来说,没有什么新的需要下载或注册。

每个聊天都从上下文开始

预填充的问候语意味着对话不会冷启动。访问者进入WhatsApp时已经形成了他们的消息框架。

您可以精确控制它的位置

设置颜色、角落和偏移量,使小部件与您的网站相匹配,而不是通用的默认气泡。

免费,无批准流程

无WhatsApp Business API申请,无单独号码,除单个script标签外无代码。

聊天按钮与聊天小部件的区别是什么?

聊天按钮

点击时打开WhatsApp聊天的静态链接或图标。除目标号码外无其他配置。

聊天小部件

  • 可配置的颜色、位置和预填充问候语
  • 在任何地方工作:WordPress、Shopify、Wix、Webflow或纯HTML,无依赖项
  • 这正是您在上面构建的内容

常见问题解答

这个WhatsApp聊天小部件生成器是免费的吗? +

是的。您在上面构建的重定向小部件(带有您的号码、颜色、位置和问候语)是免费的,带有小的"Powered by Chat Quotient"徽章。计划未来推出由AI代理驱动的Pro版本。

我需要WhatsApp Business API才能使用它吗? +

不。小部件使用您现有的WhatsApp号码打开普通WhatsApp聊天。无需Business API批准或单独号码。

它会在WordPress、Shopify、Wix或任何其他网站上工作吗? +

是的。这是一个没有依赖项的单个 <script> 标签,所以它可以在任何可以粘贴HTML的地方工作:WordPress、Shopify、Wix、Webflow、Squarespace或手工构建的网站。

小部件会减慢我的网站速度吗? +

应该不会明显。该脚本很小,使用async和defer加载,因此永远不会阻止您的页面,并在隔离的Shadow DOM中呈现,因此不会与网站的样式冲突。

我可以在访问者进入WhatsApp之前收集他们的名字吗? +

还不能。在WhatsApp移交之前捕获潜在客户在路线图上,一旦准备好,我们将在此处重新启用该切换。

我的配置存储在哪里? +

不在我们的服务器上任何地方。您的设置完全存储在您粘贴到网站上的script标签中。稍后要更改某些内容,请返回此页面,重新配置并复制新代码片段(保留当前代码片段的副本,因为我们没有为您存储它)。

聊天按钮和聊天小部件之间有什么区别? +

"聊天按钮"通常只是打开WhatsApp的静态链接。"聊天小部件"(这个工具构建的)是带有可配置问候语、位置和颜色的浮动启动程序。

我可以使用个人WhatsApp号码,还是需要商务号码? +

任何WhatsApp号码都可以工作,个人或商务号码。只需输入国家代码,不需要空格或加号。