如何在几分钟内将免费的 WhatsApp 聊天小部件添加到任何网站:直接使用原始 wa.me 链接,或使用能生成可自定义、无需代码代码段的生成器。
要将 WhatsApp 聊天小部件添加到网站而不付费,有两种诚实的方法:粘贴纯 wa.me 链接并自己设置样式,或使用能给你生成完成的、可自定义代码段的生成器。两种方法都完全免费,都只需要几分钟。只是六个月后,你会发现自己处于截然不同的位置。
本文将详细介绍这两种方法,从原始链接开始,这样你就能清楚地知道如果跳过它会放弃什么。
绝对最小化的版本就是一行 HTML:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">Chat with us</a>将 15551234567 替换为你的号码,采用完整的国际格式,不带加号、无空格、无前导零。text 参数是一条预填充的消息,URL 编码后,所以 %20 是空格,%2C 是逗号。点击它,WhatsApp 会打开,该消息已经在文本框中输入,等待访问者发送。
wa.me 是 Meta 自己的短链接服务,所以对端的行为是一致的:在手机上,如果安装了 WhatsApp 应用,会直接打开应用,否则会将访问者发送到应用商店。在没有安装应用的桌面浏览器上,会在新标签页中打开 web.whatsapp.com。你不必自己构建任何这种检测,这是这种方法对你真正解决的唯一部分。
其他的都没有解决。这一个链接只是你放置它的任何地方的带下划线的蓝色文本。要把它变成人们说”WhatsApp 聊天小部件”时实际上指的浮动底角按钮,你需要自己编写 CSS:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question"
target="_blank" rel="noopener"
style="position:fixed; bottom:20px; right:20px; z-index:5000;
width:56px; height:56px; border-radius:50%;
background:#25D366; display:flex; align-items:center;
justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);">
<img src="/whatsapp-icon.svg" alt="Chat on WhatsApp" width="28" height="28">
</a>这是可行的,但现在你还需要一个图标文件,一个足够高的 z-index 来坐在你的 Cookie 横幅和任何模态之上,而不覆盖你在移动设备上的导航栏,以及一个计划,以防下个月有人想要改变消息文本,这意味着要再次打开这一相同的标记块,无论它粘贴在哪里,在具有它的每个页面或模板上。
WhatsApp 聊天小部件生成器做的是上面链接的同样工作,加上样式、定位和图标,并返回一个脚本标签,而不是一个你需要维护的自定义 CSS 块。它是免费的,不需要账户,不涉及 WhatsApp Business API,所以在你使用它之前没有验证步骤。
这是实际的完整步骤:
#25D366)是默认值,但该字段接受任何十六进制值,如果你希望它与网站的品牌颜色匹配。text 参数具有相同的概念,但从表单中可编辑,而不是 URL 编码的字符串。当你填充表单时,按钮的实时预览会在页面上呈现,旁边的代码面板会实时更新完成的代码段:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#25D366"
data-position-vertical="bottom"
data-position-horizontal="right"
data-offset-vertical="20"
data-offset-horizontal="20"
data-z-index="5000"
data-greeting="Hi! How can we help?"
async
defer
></script>点击复制,将该单一标签粘贴到网站上任何地方的 </body> 标签前,小部件就上线了。无需上传任何其他内容,没有图标文件,没有单独的样式表。表单中的每个设置(颜色、位置、偏移、问候、弹出)都被编码为该一个标签上的 data- 属性,所以整个东西作为一个粘贴传输。
这两个输出在表面上看起来很相似,一个在角落里打开 WhatsApp 的按钮,但它们的演变不同。
使用手动版本,每个设置都是一个值,buried 在内联样式或单独的 CSS 文件内。改变问候意味着在 URL 编码的字符串中查找和编辑 text 参数。移动按钮是因为一个新的 Cookie 横幅现在与其重叠意味着在你粘贴它的每个页面或模板上重新编辑 CSS,如果你忘记了一个,该页面只是默默地有一个损坏的小部件,直到有人注意到。这些都没有大声失败,它只是逐个页面地漂移出同步。
生成的代码段将每一个这些设置作为一个标记属性保留在你在几秒钟内从表单重新复制的一行上,然后如果你没有使用共享的页眉或页脚包含,可以在你的网站上查找和替换。并且因为实际的按钮逻辑存在于标签指向的托管脚本文件中,而不是在你粘贴的代码中,小部件本身的错误修复和行为改进会自动运行,而无需你再次接触你的网站。
机制在任何地方都是相同的:在每个页面上呈现的某个地方获取代码段,理想情况下是在 </body> 之前。
theme.liquid 中,正好在关闭 </body> 标签之上。这些中的每一个都有自己值得更仔细查看的怪癖,我们稍后会分别详细介绍 WordPress,但粘贴步骤本身在任何地方都是相同的:一个脚本标签,一个地方,一次应用到每个页面。
在隐身窗口中加载网站,这样缓存的样式就不会隐藏真正的问题,并在桌面和真实电话上检查按钮,而不只是调整大小的浏览器窗口。从每个点击一次并确认它打开 WhatsApp(移动设备上的应用,桌面上的 web.whatsapp.com),其中你的号码和问候消息已经填充。然后滚动页面,任何 Cookie 横幅或粘性元素可见,最常见的故障在这一点是 z-index 冲突,其中小部件在另一个固定位置元素后面呈现,而不是在它上方。
这真的是免费的,还是有什么秘密? 生成器本身是免费的,不需要账户。它指向的小部件脚本是免费托管和提供的。如果你稍后安装 The Chat Quotient 的 Chrome 扩展程序来管理通过小部件传入的对话,那有自己的免费计划,但这是一个单独的、可选的步骤,不是使用小部件的要求。
WhatsApp 小部件和 WhatsApp Web 是一样的吗?
不是,这是一个常见的混淆。WhatsApp Web(web.whatsapp.com)是你从浏览器读取和发送 WhatsApp 消息的界面。WhatsApp 小部件网络元素是你添加到自己网站的小按钮,点击时打开聊天,在安装了应用的手机上打开 WhatsApp 应用,或在没有安装桌面应用的桌面上打开 WhatsApp Web。小部件是你嵌入的东西,WhatsApp Web 是生成的对话碰巧打开的地方。
如果访问者没有安装 WhatsApp,小部件是否有效? 在手机上,在没有安装应用的情况下点击它会将访问者发送到他们的应用商店来首先安装 WhatsApp。没有办法绕过这一步,因为链接只知道如何交接给 WhatsApp 本身,而不是替代另一个消息频道。
我可以在同一小部件上拥有多个 WhatsApp 号码,如销售和支持吗? 不能在一个按钮上。小部件围绕每个实例的单一 WhatsApp 号码构建。如果你需要两个入口点,你可以添加两个小部件,分别位于不同位置,带有不同的问候,尽管此时一个专用联系页面,两个都单独列出,对于访问者来说通常比同一角落堆叠的两个浮动按钮更清楚。
我需要知道如何编码才能使用生成器吗? 不需要。每个设置都是一个表单字段,你粘贴的唯一东西是它生成的单一脚本标签,无论你网站运行在哪个平台,粘贴步骤都是相同的。
如果你对编写和维护自己的 CSS 感到舒适,并且不介意每次需要改变时重新访问该代码,wa.me 链接是你真正需要的全部。WhatsApp 聊天小部件生成器生成相同的结果,一个打开预填充 WhatsApp 聊天的浮动按钮,没有 CSS、没有图标文件、没有手动滚动附带的维护,并且仍然是免费的。
添加 Chrome 扩展程序，彻底改变您管理业务 WhatsApp 对话的方式。