Title: Add Chat App Button Author: udidol Published: 2018 年 10 月 29 日 Last modified: 2026 年 10 月 7 日 --- 搜索插件 ![](https://ps.w.org/add-whatsapp-button/assets/banner-772x250.png?rev=3486025) ![](https://ps.w.org/add-whatsapp-button/assets/icon-256x256.png?rev=3486025) # Add Chat App Button 作者：[udidol](https://profiles.wordpress.org/udidol/) [下载](https://downloads.wordpress.org/plugin/add-whatsapp-button.2.2.3.zip) * [详情](https://cn.wordpress.org/plugins/add-whatsapp-button/#description) * [评价](https://cn.wordpress.org/plugins/add-whatsapp-button/#reviews) * [安装](https://cn.wordpress.org/plugins/add-whatsapp-button/#installation) * [开发进展](https://cn.wordpress.org/plugins/add-whatsapp-button/#developers) [支持](https://wordpress.org/support/plugin/add-whatsapp-button/) ## 描述 The _Add Chat App Button_ plugin enables adding a customizable click-to-chat WhatsApp button. The plugin lets you choose between a simple WhatsApp icon and a rectangle with a custom text label (see screenshots). This plugin is not affiliated with WhatsApp or Facebook in any way, it just provides an easy way to integrate a WhatsApp chat button into your website. The plugin lets you choose between a simple WhatsApp icon and a rectangle with a custom text label. ### Usage To enable the WhatsApp button, check the first checkbox in the settings page. You will find the settings page in the admin dashboard menu, under Settings->Add Chat App Button. You must enter an international phone number (only numbers, **NO plus sign (+), NO dashes(-)**) in order to enable the WhatsApp button. Even if you manage to save settings into the database without entering a phone number, your button might not work properly. The plugin settings page has two tabs: “General Settings” and “Button Design”. _The General Settings tab_ includes options such as limiting the button to only display under a certain screen resolution (in pixels), attaching a default message that will be populated in the user’s phone when they click the button, and more. _The Button Design tab_ includes controls for the button color, label text color, button type (side-bearing rectangle, WhatsApp icon, fixed-bottom button), and more. The Button Design tab also includes a smartphone mockup with a **live** preview screen, enabling you to see a real-time (estimated) rendering of how your button would look, on the fly, as you are changing its design. The plugin detects whether the site visitor is using a desktop or mobile device and serves a different link for each accordingly. ## 屏幕截图 [⌊The "General Settings" tab in the plugin settings page⌉⌊The "General Settings" tab in the plugin settings page⌉[ The “General Settings” tab in the plugin settings page [⌊The "Button Design" tab in the plugin settings page⌉⌊The "Button Design" tab in the plugin settings page⌉[ The “Button Design” tab in the plugin settings page [⌊An example of the side-floating rectangle button design. You can customize the text on the button, as well as the button's background and text colors, in the " Button Design" tab.⌉⌊An example of the side-floating rectangle button design. You can customize the text on the button, as well as the button's background and text colors, in the "Button Design" tab.⌉[ An example of the side-floating rectangle button design. You can customize the text on the button, as well as the button’s background and text colors, in the “Button Design” tab. [⌊An example of the WhatsApp icon that can be used as the floating button⌉⌊An example of the WhatsApp icon that can be used as the floating button⌉[ An example of the WhatsApp icon that can be used as the floating button ## 安装 1. Upload the plugin files (the contents of add-whatsapp-button.zip) to the `/wp-content/ plugins/add-whatsapp-button` directory, or install the plugin through the WordPress plugins screen directly. 2. Activate the plugin through the ‘Plugins’ screen in WordPress 3. On the WordPress Admin menu, go to Settings->Add Chat App Button to configure the plugin ## 常见问题 ### I see there is a setting for limiting the display hours for the WhatsApp button. What timezone does the plugin use for this setting? _Add Chat App Button_ uses Javascript to check the time on the client’s device. So it will be displayed/hidden according to the set time in each client’s timezone. ### Can I change the size of the rectangle-style button? Yes. When a rectangle style is selected in the Button Design tab, you will see width, height, padding, and font size controls. Leave any field empty to keep the default value. No custom CSS is required. ### The display-hours limit and the day-of-week limit — which timezone do they use? Both use the visitor’s device clock, so they follow the visitor’s local timezone. If your business hours are in a specific timezone, factor in the offset when setting the start and end hours. ### The “Add Hide Button” feature has a “Persistent” dismiss option. Does this use cookies? No. The persistent dismiss option stores a small flag in the visitor’s browser ` localStorage`, not in a cookie. The flag contains no personal data — only a marker indicating the visitor previously dismissed the button. If your site requires a cookie/privacy policy, you may want to mention this localStorage use. ## 评价 ![](https://secure.gravatar.com/avatar/7b745fcf52bdfbc3864ecbd89c405dab2b9c9b9eafe8344bb0d17265ae13bbb9? s=60&d=retro&r=g) ### 󠀁[Great plugin, easy to use and free](https://wordpress.org/support/topic/great-plugin-easy-to-use-and-free-2/)󠁿 [shlomikalfa](https://profiles.wordpress.org/shlomikalfa/) 2024 年 1 月 18 日 tried about 5-6 plugins before this one, this one is the best 'free' plugin I could find. thanks. ![](https://secure.gravatar.com/avatar/93d75b00c1d3a568b61f2c082675d4078e512cb0b4f56fb7dd6db721bc6027e2? s=60&d=retro&r=g) ### 󠀁[Good Plugin](https://wordpress.org/support/topic/good-plugin-6213/)󠁿 [mjv2022](https://profiles.wordpress.org/mjv2022/) 2022 年 12 月 14 日 Good plugin. It really helps. Thanks. ![](https://secure.gravatar.com/avatar/54672966c6c9db8fe01b5dc40e80c684ff2b3edc5360df831ef931d21d89f662? s=60&d=retro&r=g) ### 󠀁[Appreciate if you could add button text for default whatsapp icon style](https://wordpress.org/support/topic/appreciate-if-you-could-add-button-text-for-default-whatsapp-icon-style/)󠁿 [Vivek Narayanankutty Nair](https://profiles.wordpress.org/vismithams/) 2022 年 8 月 19 日 Appreciate if you could add button text for default whatsapp icon style ![](https://secure.gravatar.com/avatar/541eb9f04e3b46fd64980117b1ef7d17f2d5d340e01cc312076cd327d1f59d46? s=60&d=retro&r=g) ### 󠀁[I love it!](https://wordpress.org/support/topic/i-love-it-849/)󠁿 [zibah](https://profiles.wordpress.org/zibah/) 2022 年 6 月 16 日 It's very easy to use and does what it should. ![](https://secure.gravatar.com/avatar/5eba82187f5b3bb898da2e72a5b6ea95b89c72d2f64b9feaa577877a308068a3? s=60&d=retro&r=g) ### 󠀁[good](https://wordpress.org/support/topic/good-7144/)󠁿 [Sepi](https://profiles.wordpress.org/sepicompanywork/) 2022 年 3 月 14 日 be better to have options about radius and have icon beside text in style tnx ![](https://secure.gravatar.com/avatar/b4dfd5ad4cbe0d76226c6ba8ee0c33c1a1296778fcd2f1dddf65172b838d8c2d? s=60&d=retro&r=g) ### 󠀁[Excellent!](https://wordpress.org/support/topic/excellent-11517/)󠁿 [mstrump](https://profiles.wordpress.org/mstrump/) 2022 年 1 月 14 日 So simple to set up but makes a huge difference to the webpage visitor. Thank you. [ 阅读所有13条评价 ](https://wordpress.org/support/plugin/add-whatsapp-button/reviews/) ## 贡献者及开发者 「Add Chat App Button」是开源软件。 以下人员对此插件做出了贡献。 贡献者 * [ udidol ](https://profiles.wordpress.org/udidol/) 「Add Chat App Button」插件已被翻译至 1 种本地化语言。 感谢[所有译者](https://translate.wordpress.org/projects/wp-plugins/add-whatsapp-button/contributors) 为本插件所做的贡献。 [帮助将「Add Chat App Button」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/add-whatsapp-button) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/add-whatsapp-button/)， 查看[SVN仓库](https://plugins.svn.wordpress.org/add-whatsapp-button/)，或通过[RSS](https://plugins.trac.wordpress.org/log/add-whatsapp-button/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/add-whatsapp-button/)。 ## 更新日志 #### 2.2.3 * Updated compatibility with WordPress 7.1.3 #### 2.2.2 * Updated compatibility with WordPress 7.1.2 #### 2.2.1 * Updated compatibility with WordPress 7.1.1 #### 2.2 * Added optional text label for the WhatsApp icon button style — supports above, below, left, and right positions relative to the icon, with controls for font size, padding, border radius, gap, background color, and drop shadow (Feature requests: [#1](https://wordpress.org/support/topic/feature-request-show-text-icon/), [#2](https://wordpress.org/support/topic/appreciate-if-you-could-add-button-text-for-default-whatsapp-icon-style-2/), [#3](https://wordpress.org/support/topic/insert-icon-in-button/)) * Added label wrapper styling — background color, padding, border radius, and drop shadow for the container that holds the icon and label together * Added dismiss persistence — site owners can choose whether a visitor’s button dismissal lasts for the current browser session or persists until the visitor clears site data ([feature request](https://wordpress.org/support/topic/feature-request-remember-hide-status/)) * Added day-of-week scheduling — restrict the button to specific days of the week, independently of the existing display-hours limit ([feature request](https://wordpress.org/support/topic/days-of-the-week-function/)) * Added breakpoint direction control — choose whether the breakpoint hides the button on screens narrower or wider than the set value, making it possible to show the button only on mobile ([feature request](https://wordpress.org/support/topic/how-can-i-hide-it-on-mobile/)) * Added width, height, padding, and font size controls for the rectangle button styles ([feature request](https://wordpress.org/support/topic/button-size-22/)) * Fixed the Button Design preview panel — now stays visible (sticky) while scrolling through settings on desktop * Fixed icon label preview not updating live when changing font size, gap, padding, border radius, or drop shadow settings * Fixed the Button Design tab content appearing below the General Settings tab content when General Settings was active * Fixed dismissed button state not restoring correctly on page refresh when using the “Hide with toggle button” option #### 2.1.13 * Updated compatibility with WordPress 7.1 * Fixed the frontend script missing from the released package since 2.1.9, which broke the display hours limit, the hide/close button and button dragging #### 2.1.12 * Updated compatibility with WordPress 7.0.4 #### 2.1.11 * Updated compatibility with WordPress 7.0.2 #### 2.1.10 * Updated compatibility with WordPress 7.0 #### 2.1.9 * Updated compatibility with WordPress 6.9.4 * Fixed some UI bugs in the button preview in admin settings. #### 2.1.7 * Security update. #### 2.1.6 * Updated compatibility with WordPress 6.7 #### 2.1.5 * Added Settings page link in the Plugins page. #### 2.1.4 * Updated compatibility with WordPress 6.5.2 #### 2.1.3 * Updated compatibility with WordPress 6.5 #### 2.1.2 * Moved the button dragging functionality under a flag (admin setting) * The dragging is now done by a small dragging handle instead of the entire button being draggable #### 2.1.1 * Fixed bug with limiting display hours #### 2.1.0 * Refactored all of the Javascript to ES6 * Fixed various bugs * Updated compatibility with WordPress 6.4.1 #### 2.0.5 * Updated compatibility with WordPress 6.0 #### 2.0.3 * Updated compatibility with WordPress 5.9 #### 2.0.2 * Updated compatibility with WordPress 5.8.2 #### 2.0.0 * Complete PHP rewrite to use OOP and scoped methods instead of global functions. * Bug fixes * Updated compatibility with WordPress 5.8.0 #### 1.2.1 * Bug fixes #### 1.2 * Changed plugin display name to comply with Facebook’s trademark requirements * Updated support for WordPress 5.2.3 #### 1.1.3 * Some bug fixes #### 1.1.1 * Updated support for WordPress 5.2 #### 1.1.0 * Updated compatibility with WordPress 5.1.1 * Added a “Hide Button” option to the WhatsApp button. It adds a small button on the corner of the WhatsApp button that enables site visitors to hide the WhatsApp button if it bothers them. The “Hide Button” has two options: - Full Remove: Completely remove the button from the page - Hide with Toggle Button: Slides the WhatsApp button to the side (outside page boundaries). This enables the site visitor to un-hide the WhatsApp button later, if they want. #### 1.0.4 * Updated compatibility with WordPress 5.1 * Minor bug fixes #### 1.0.3 * Updated compatibility with WordPress 5.0 * Minor bug fixes #### 1.0.2 * Minor bug fixes #### 1.0.1 * Fixed a bug with identification of the User Agent in Apple mobile devices ## 额外信息 * 版本 **2.2.3** * 最后更新：**1 周前** * 活跃安装数量 **2,000+** * 已测试的最高版本为 **7.1.3** * PHP 版本 ** 7.0 或更高版本 ** * 语言 * [English (US)](https://wordpress.org/plugins/add-whatsapp-button/) 和 [Hebrew](https://he.wordpress.org/plugins/add-whatsapp-button/). * [翻译成简体中文](https://translate.wordpress.org/projects/wp-plugins/add-whatsapp-button) * 标签 * [button](https://cn.wordpress.org/plugins/tags/button/)[whatsapp](https://cn.wordpress.org/plugins/tags/whatsapp/) [whatsapp button](https://cn.wordpress.org/plugins/tags/whatsapp-button/) * [高级视图](https://cn.wordpress.org/plugins/add-whatsapp-button/advanced/) ## 评级 4.8 星（最高 5 星）。 * [ 11 条 5 星评价 ](https://wordpress.org/support/plugin/add-whatsapp-button/reviews/?filter=5) * [ 2 条 4 星评价 ](https://wordpress.org/support/plugin/add-whatsapp-button/reviews/?filter=4) * [ 0 条 3 星评价 ](https://wordpress.org/support/plugin/add-whatsapp-button/reviews/?filter=3) * [ 0 条 2 星评价 ](https://wordpress.org/support/plugin/add-whatsapp-button/reviews/?filter=2) * [ 0 条 1 星评价 ](https://wordpress.org/support/plugin/add-whatsapp-button/reviews/?filter=1) [您的评价](https://wordpress.org/support/plugin/add-whatsapp-button/reviews/#new-post) [查看全部评论](https://wordpress.org/support/plugin/add-whatsapp-button/reviews/) ## 贡献者 * [ udidol ](https://profiles.wordpress.org/udidol/) ## 支持 有话要说吗？是否需要帮助？ [查看支持论坛](https://wordpress.org/support/plugin/add-whatsapp-button/)