角落弹出卡片

固定在屏幕角落的紧凑卡片。展开后显示问候消息和行动按钮。低调但有效。

自定义您的按钮

填写以下详细信息，实时查看按钮效果

品牌和标题

品牌名称

副标题

标题颜色

#075E54

Content

电话号码

Greeting Text

行动按钮文本

行动按钮颜色

#25D366

行动按钮文字颜色

#FFFFFF

位置

实时预览

您的网站

我的企业

通常在几分钟内回复

需要帮助？在 WhatsApp 上与我们聊天！

导出代码

<!-- WhatsApp Corner Peek Widget -->
<!-- Add this before </body> -->
<script src="https://freewidget.online/widget/whatsapp/corner-peek.js"
  data-phone="65"
  data-message=""
  data-brand-name="我的企业"
  data-brand-subtitle="通常在几分钟内回复"
  data-header-bg-color="#075E54"
  data-greeting="需要帮助？在 WhatsApp 上与我们聊天！"
  data-cta-text="打开 WhatsApp"
  data-cta-color="#25D366"
  data-cta-text-color="#FFFFFF"
  data-position="right"
  data-card-width="280"
></script>

📋 使用方法： 将此代码粘贴到 HTML 文件中 <code></body></code> 标签之前。

如何将按钮添加到您的网站

适用于所有主要平台的简单说明

WordPress

前往 外观 → 主题编辑器 → footer.php 或使用 "Insert Headers and Footers" 插件。将 HTML 代码粘贴到 {closingBody} 标签之前。

Shopify

前往 在线商店 → 主题 → 编辑代码。找到 theme.liquid 并将代码粘贴到 {closingBody} 之前。

纯 HTML

只需将生成的 HTML 代码粘贴到您的 HTML 文件中，最好在 {closingBody} 标签之前。

Wix

使用 嵌入 HTML 元素。将其拖到页面上并粘贴按钮代码。将其放在角落以获得浮动效果。

Squarespace

前往 设置 → 高级 → 代码注入。将代码粘贴到页脚部分并保存。

React / Next.js

使用按钮代码创建组件。对于 Next.js，将其添加到 _app.tsx 或布局组件中。

常见问题

有问题？我们有答案。

这个工具真的免费吗？

是的，完全免费！无需注册、无需付款、没有隐藏费用。该工具完全在您的浏览器中运行，生成的代码可以随意使用。我们不会追踪您的使用情况或存储任何数据。

按钮在移动设备上能用吗？

当然可以！生成的按钮完全响应式，适用于所有设备。在移动端，点击按钮将直接打开 WhatsApp 应用。在桌面端，它会打开 WhatsApp Web 或桌面应用（如已安装）。

电话号码应该是什么格式？

使用包含国家代码的国际格式，链接中不要包含空格、破折号或加号。例如：+65 9123 4567（新加坡）或 +1 555 123 4567（美国）。我们的工具在生成链接时会自动去除非数字字符。

我能在这些选项之外进一步自定义按钮吗？

当然可以！生成的 HTML 代码使用内联样式，您可以轻松修改。更改颜色、大小、字体、阴影或任何 CSS 属性。如果您使用 Tailwind CSS，可以将内联样式转换为实用类以便于维护。

这符合 WhatsApp 的服务条款吗？

是的。此工具使用 WhatsApp 为"点击聊天"提供的官方 wa.me 链接格式。这是让用户无需先保存您的号码就能与您开始对话的推荐方式。没有使用非官方 API 或变通方法。

静态 HTML 和托管脚本有什么区别？

静态 HTML 为您提供完整的、独立的代码，可直接粘贴到您的网站中。除非您手动更新，否则它不会改变。托管脚本从我们的服务器加载 widget.js 文件。优点：自动更新、更小的代码占用、通过数据属性轻松配置。