<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WPWife &#187; Whatsapp</title>
	<atom:link href="http://www.wpwife.com/category/whatsapp/feed" rel="self" type="application/rss+xml" />
	<link>http://www.wpwife.com</link>
	<description>WPHelp: fix and optimise WP themes&#38;plugins</description>
	<lastBuildDate>Fri, 21 Nov 2025 12:00:00 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.1.38</generator>
	<item>
		<title>How to Add WhatsApp Chatbox and Share Buttons in WordPress</title>
		<link>http://www.wpwife.com/wordpress-plugins/how-to-add-whatsapp-chatbox-and-share-buttons-in-wordpress</link>
		<comments>http://www.wpwife.com/wordpress-plugins/how-to-add-whatsapp-chatbox-and-share-buttons-in-wordpress#comments</comments>
		<pubDate>Mon, 27 Mar 2023 18:04:00 +0000</pubDate>
		<dc:creator><![CDATA[Editorial Staff]]></dc:creator>
				<category><![CDATA[Whatsapp]]></category>
		<category><![CDATA[whatsapp chatbox]]></category>
		<category><![CDATA[whatsapp plugin for wordpress]]></category>
		<category><![CDATA[whatsapp share button for wordpress]]></category>
		<category><![CDATA[whatsapp sharing plugin for wordpress]]></category>
		<category><![CDATA[WordPress Plugins]]></category>

		<guid isPermaLink="false">http://www.wpbeginner.com/?p=29808</guid>
		<description><![CDATA[
<p>Do you want to add WhatsApp chatbox and share buttons in WordPress? WhatsApp is one of the most popular messaging platforms and has about 2.2 billion users worldwide. Adding a Whatsapp share button will allow you to connect with the customers and build user engagement,&#8230;&#160;<strong><a href="https://www.wpbeginner.com/plugins/how-to-add-whatsapp-share-button-in-wordpress/">Read More &#187;</a></strong></p>
<p>The post <a href="https://www.wpbeginner.com/plugins/how-to-add-whatsapp-share-button-in-wordpress/">How to Add WhatsApp Chatbox and Share Buttons in WordPress</a> first appeared on <a href="https://www.wpbeginner.com/">WPBeginner</a>.</p>
]]></description>
				<content:encoded><![CDATA[<p>Do you want to add WhatsApp chatbox and share buttons in WordPress?</p>



<p>WhatsApp is one of the most popular messaging platforms and has about 2.2 billion users worldwide. Adding a Whatsapp share button will allow you to connect with the customers and build user engagement, and adding a chatbox button will let users message you directly through your website.</p>



<p>In this article, we&#8217;ll show you how to easily add a WhatsApp share button in WordPress.</p>



<figure class="wp-block-image size-full"><img width="680" height="385" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/how-to-add-whatsapp-share-button-in-wordpress-og.png" alt="How to add WhatsApp share button in WordPress" class="wp-image-166987" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/how-to-add-whatsapp-share-button-in-wordpress-og.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/how-to-add-whatsapp-share-button-in-wordpress-og-300x170.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<h4>Why Add a WhatsApp Button in WordPress? </h4>



<p>WhatsApp is an instant messaging app that allows people worldwide to easily contact each other.</p>



<p>Adding a WhatsApp share button to your <a href="https://www.wpbeginner.com/guides/" title="How to Make a WordPress Website (Ultimate Guide)">WordPress website</a> will allow visitors to easily share your content with their contacts.</p>



<p>Moreover, you can also add a WhatsApp chatbox enabling users to have a direct conversation with you.</p>



<p>For instance, if you have an <a href="https://www.wpbeginner.com/wp-tutorials/how-to-start-an-online-store/" title="How to Start an Online Store (Step by Step)">online store</a>, then a WhatsApp chat button can be used by customers to make product queries without having to fill out any forms or go through customer support. </p>



<p>It can result in increased user engagement and <a href="https://www.wpbeginner.com/wp-tutorials/ways-to-recover-woocommerce-abandoned-cart-sales/" title="14 Ways to Recover WooCommerce Abandoned Cart Sales">lower cart abandonment rates</a>.</p>



<p>Having said that, let&#8217;s see how you can easily add a WhatsApp share button in WordPress.</p>



<div class="wp-block-aioseo-table-of-contents"><ul><li><a href="https://www.wpbeginner.com/plugins/how-to-add-whatsapp-share-button-in-wordpress/#aioseo-method-1">Method 1: Add a WhatsApp Share button in WordPress</a></li><li><a href="https://www.wpbeginner.com/plugins/how-to-add-whatsapp-share-button-in-wordpress/#aioseo-how-to-add-a-whatsapp-share-button-in-wordpress">Method 2: Add a WhatsApp Chatbox Button in WordPress</a></li></ul></div>



<h4 id="aioseo-method-1">Method 1: Add a WhatsApp Share button in WordPress</h4>



<p>If you want to add a WhatsApp share button to your website, then this method is for you.</p>



<p>First, you need to install and activate the <a href="https://wordpress.org/plugins/sassy-social-share/"  rel="noopener nofollow" title="Sassy Social Share">Sassy Social Share</a> plugin. For more instructions, please see our beginner&#8217;s guide on <a href="https://www.wpbeginner.com/beginners-guide/how-to-install-wordpress-plugins-and-themes-from-github/" title="How to Install WordPress Plugins and Themes from GitHub">how to install a WordPress plugin</a>.</p>



<p>Upon activation, you need to visit the <strong>Sassy Social Share</strong> menu from the admin sidebar.</p>



<p>From here, you need to switch to the &#8216;Standard Interface&#8217; tab at the top.</p>



<p>Then, you need to scroll down to the &#8216;Select Sharing Services&#8217; section and simply check the box next to the WhatsApp option.</p>



<figure class="wp-block-image size-full"><img width="680" height="333" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/check-whatsapp-share-option-1.png" alt="Check WhatsApp share option" class="wp-image-174703" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/check-whatsapp-share-option-1.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/check-whatsapp-share-option-1-300x147.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>You can also add the Share button for other social media platforms including Facebook, <a href="https://www.wpbeginner.com/plugins/how-to-add-instagram-shoppable-images-in-wordpress/" title="How to Add Instagram Shoppable Images in WordPress">Instagram</a>, Pinterest, Twitter, and more.</p>



<p>Once, you&#8217;re done, don&#8217;t forget to click on the &#8216;Save Changes&#8217; button to store your settings, and then you can head to the &#8216;Theme Selection&#8217; tab.</p>



<p>From here, you can customize the share buttons by changing their size, shape, logo or background color, and more. It&#8217;s a good idea to go with the WhatsApp brand colors for the share button so that users will recognize it more easily.</p>



<figure class="wp-block-image size-full"><img width="680" height="376" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/customize-share-button.png" alt="Customize the WhatsApp share button" class="wp-image-173104" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/customize-share-button.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/customize-share-button-300x166.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Once you are finished, don&#8217;t forget to click on the &#8216;Save Changes&#8217; button to store your settings.</p>



<p>You can now visit your website to see your WhatsApp share button in action.</p>



<p>Here is how it looked on our demo website.</p>



<figure class="wp-block-image size-full"><img width="680" height="371" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-share-button.jpg" alt="WhatsApp Share button" class="wp-image-173122" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-share-button.jpg 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-share-button-300x164.jpg 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Don&#8217;t want to add WhatsApp button to every page? Don&#8217;t worry, the plugin also allows you to easily add it to single posts and pages as well. </p>



<p><strong>Adding WhatsApp Share Button in Block Editor</strong></p>



<p>If you only want to show the WhatsApp share button on specific posts and pages, then first you need to turn off the global display of sharing buttons. </p>



<p>To do that, simply go to the <strong>Sassy Social Share</strong> page in the WordPress admin sidebar and switch to the &#8216;Standard Interface&#8217; tab. </p>



<p>Next, you need to uncheck the box for the &#8216;Enable Standard sharing interface&#8217; option. </p>



<figure class="wp-block-image size-full"><img width="680" height="260" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/disable-standard-buttons-1.png" alt="Disable standard buttons" class="wp-image-174228" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/disable-standard-buttons-1.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/disable-standard-buttons-1-300x115.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Next, switch to the &#8216;Floating Interface&#8217; tab. </p>



<p>From here, uncheck the box next to the &#8216;Enable Floating sharing interface&#8217; option.  </p>



<figure class="wp-block-image size-full"><img width="680" height="288" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/disable-floating-buttons.png" alt="Disable floating buttons" class="wp-image-174229" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/disable-floating-buttons.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/disable-floating-buttons-300x127.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Now that you have disabled the standard and floating social sharing buttons, you go ahead and WhatsApp share button to any page or post on your website <a href="https://www.wpbeginner.com/wp-tutorials/how-to-add-a-shortcode-in-wordpress/" title="How to Add a Shortcode in WordPress (Beginner’s Guide)">using a shortcode</a>. </p>



<p>Simply open the post or page where you want to display the WhatsApp share button in the <a href="https://www.wpbeginner.com/beginners-guide/14-tips-for-mastering-the-wordpress-visual-editor/" title="16 Tips for Mastering the WordPress Content Editor">content editor</a>, or you can just create a new one. </p>



<p>From here, simply click on the Add Block (+) button at the top left corner and search for the &#8216;Shortcode&#8217; block. After that, simply add the block to the page.</p>



<figure class="wp-block-image size-full"><img width="680" height="265" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/add-shortcode-in-block-editor-2.png" alt="Add shortcode in the block editor" class="wp-image-174704" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/add-shortcode-in-block-editor-2.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/add-shortcode-in-block-editor-2-300x117.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Next, you need to copy the following shortcode and paste it into the &#8216;Shortcode&#8217; block.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
&#91;Sassy_Social_Share]
</pre></div>


<p>Once you&#8217;re done, simply click on the &#8216;Publish&#8217; or &#8216;Update&#8217; button to store your changes. Your WhatsApp Share button will look like this.</p>



<figure class="wp-block-image size-full"><img width="680" height="338" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-share-button-on-a-page-1.jpg" alt="WhatsApp share button on a page" class="wp-image-173603" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-share-button-on-a-page-1.jpg 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-share-button-on-a-page-1-300x150.jpg 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p><strong>Adding WhatsApp Share Button as a Widget</strong></p>



<p>To add the WhatsApp share button to the sidebar of your website, you need to visit the <strong>Appearance » Widgets</strong> page from the admin sidebar.</p>



<p>From here, simply click on the Add Block (+) button at the top left corner and locate the &#8216;Shortcode&#8217; block.</p>



<p>Next, you need to add the &#8216;Shortcode&#8217; block to the sidebar.</p>



<figure class="wp-block-image size-full"><img width="680" height="319" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-share-button-as-widget-2.png" alt="WhatsApp share button as a widget" class="wp-image-175047" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-share-button-as-widget-2.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-share-button-as-widget-2-300x141.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>After that, simply copy and paste the following shortcode into the block.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
&#91;Sassy_Social_Share]
</pre></div>


<p>Next, click on the &#8216;Update&#8217; button to store your settings.</p>



<p>This is how your WhatsApp share button will look once it&#8217;s added to the website sidebar.</p>



<figure class="wp-block-image size-full"><img width="680" height="300" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-share-in-sidebar-1.jpg" alt="WhatsApp share button in the sidebar" class="wp-image-173604" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-share-in-sidebar-1.jpg 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-share-in-sidebar-1-300x132.jpg 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p><strong>Adding the WhatsApp Share Button in the Full Site Editor</strong></p>



<p>If you&#8217;re using a block theme, then you&#8217;ll be using the full site editor and won&#8217;t have access to the &#8216;Widgets&#8217; page.</p>



<p>First, you need to visit the <strong>Appearance » Editor</strong> option from the admin sidebar to launch the full site editor.</p>



<p>Next, you need to click on the &#8216;Add Block&#8217; (+) button at the top of the screen and add the &#8216;Shortcode&#8217; block to any suitable place on your website.</p>



<p>After that, add the following shortcode to the block.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
&#91;Sassy_Social_Share]
</pre></div>


<figure class="wp-block-image size-full"><img width="680" height="332" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/add-whatsapp-share-button-in-fse-1.png" alt="Add WhatsApp share button in Full site editor" class="wp-image-174706" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/add-whatsapp-share-button-in-fse-1.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/add-whatsapp-share-button-in-fse-1-300x146.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Once, you&#8217;re done, click on the &#8216;Save&#8217; button at the top.</p>



<p>This is how the WhatsApp share button looked on our demo website.</p>



<figure class="wp-block-image size-full"><img width="680" height="345" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-button-preview-in-fsepng.jpg" alt="WhatsApp share button preview in FSE" class="wp-image-173605" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-button-preview-in-fsepng.jpg 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-button-preview-in-fsepng-300x152.jpg 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<h4 id="aioseo-how-to-add-a-whatsapp-share-button-in-wordpress">Method 2: Add a WhatsApp Chatbox Button in WordPress</h4>



<p>This method allows you to add a WhatsApp chatbox button in WordPress. </p>



<p>This means that when a user clicks on the WhatsApp chat button, they&#8217;ll be able to send you a direct message on your WhatsApp phone number.</p>


<div class="wpb-alert style-yellow">

<p><strong>Note: </strong>You won&#8217;t be getting any messages directly inside your WordPress dashboard, but you will be able to chat like normal in the WhatsApp mobile app, web interface, and desktop software.</p>

</div>


<p>First, you need to install and activate the <a href="https://wordpress.org/plugins/click-to-chat-for-whatsapp/#description"  rel="noopener nofollow" title="Click to Chat">Click to Chat</a> plugin. For more instructions, see our step-by-step guide on <a href="https://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/" title="How to Install a WordPress Plugin – Step by Step for Beginners">how to install a WordPress plugin</a>.</p>



<p>Upon activation, you need to head over to the <strong>Click to Chat</strong> menu item that has been added to your WordPress admin dashboard&#8217;s sidebar.</p>



<p>From here, you need to start by typing your <a href="https://www.wpbeginner.com/showcase/best-business-phone-services/" title="6 Best Business Phone Services for Small Business (2023)">business phone number</a> in the &#8216;WhatsApp Number&#8217; field.</p>



<p>This will be the phone number where you&#8217;ll receive messages from users.</p>



<p>After that, you need to type a simple message in the &#8216;Pre-Filled Message&#8217; field. This will be the default message that will be displayed in your WhatsApp chat window.</p>



<figure class="wp-block-image size-full"><img width="680" height="266" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/provide-whatsapp-phone-number.png" alt="Provide your WhatsApp phone number" class="wp-image-166971" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/provide-whatsapp-phone-number.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/provide-whatsapp-phone-number-300x117.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Next, you need to scroll down to the &#8216;Style, Position&#8217; section.</p>



<p>You can start by choosing a style for your WhatsApp chatbox from the dropdown menu. By default, this plugin offers about 8 different styles. Simply choose the one that you prefer.</p>



<figure class="wp-block-image size-full"><img width="680" height="289" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/select-style-for-whatsapp-chatbox.png" alt="Select a style for the WhatsApp chat box" class="wp-image-166972" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/select-style-for-whatsapp-chatbox.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/select-style-for-whatsapp-chatbox-300x128.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>After that, you need to scroll down to the &#8216;Position to Place&#8217; section.</p>



<p>From here, you can choose the position and size of your chatbox from the dropdown menus.</p>



<figure class="wp-block-image size-full"><img width="680" height="258" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/select-position-of-whatsapp-chatbox.png" alt="Select the position of your chatbox" class="wp-image-166973" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/select-position-of-whatsapp-chatbox.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/select-position-of-whatsapp-chatbox-300x114.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Next, you need to go to the &#8216;Display Settings&#8217; section.</p>



<p>Here, you just need to check the &#8216;Global&#8217; box next to the options where you want to display your WhatsApp chatbox.</p>



<p>For instance, if you want to display the chatbox on your posts, pages, and categories pages, you need to check the &#8216;Global&#8217; option.</p>



<p>You can also choose the &#8216;Hide&#8217; option if you don&#8217;t want to display the WhatsApp chatbox on a certain page.</p>



<figure class="wp-block-image size-full"><img width="680" height="357" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/check-the-global-box.png" alt="Check the Global box" class="wp-image-166974" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/check-the-global-box.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/check-the-global-box-300x158.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Finally, don&#8217;t forget to click the &#8216;Save Changes&#8217; button to store your settings.</p>



<p>Now, you need to head over to the <strong>Click to Chat » Greetings </strong>page to select a Greeting dialog from a dropdown menu.</p>



<p>This greeting dialog will be shown along with the WhatsApp button on your page.</p>



<figure class="wp-block-image size-full"><img width="680" height="282" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/choose-a-greeting-dialog.png" alt="Choose a Greeting dialog from the dropdown menu" class="wp-image-166976" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/choose-a-greeting-dialog.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/choose-a-greeting-dialog-300x124.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Once you&#8217;ve made your choice, you will need to type the content for the header, main content, and call to action of your greeting dialog.</p>



<p>After that, scroll down to the &#8216;Customizable Design&#8217; section. </p>



<figure class="wp-block-image size-full"><img width="680" height="371" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/type-content-for-greeting-dialog-1.png" alt="Type content for the greeting dialog" class="wp-image-173918" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/type-content-for-greeting-dialog-1.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/type-content-for-greeting-dialog-1-300x164.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Once here, you can choose the background colors of your main content, header, and message box.</p>



<p>After that, simply click the &#8216;Save Changes&#8217; button to store your settings</p>



<figure class="wp-block-image size-full"><img width="680" height="319" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/choose-background-color-for-greeting-dialog.png" alt="Choose background color for the greeting dialog" class="wp-image-166979" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/choose-background-color-for-greeting-dialog.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/choose-background-color-for-greeting-dialog-300x141.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Next, you need to visit your website.</p>



<p>By default, this is how your WhatsApp chatbox will look like.</p>



<figure class="wp-block-image size-full"><img width="680" height="369" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-chatbox-on-website-2.jpg" alt="WhatsApp chatbox on a website" class="wp-image-173919" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-chatbox-on-website-2.jpg 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-chatbox-on-website-2-300x163.jpg 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Now, we will show you how you can easily add the WhatsApp chat button in the block editor, as a widget, and in the full site editor.</p>



<p><strong>Add the WhatsApp Chat Button in the Block Editor</strong></p>



<p>You can easily add the WhatsApp button to a specific page or post on your WordPress website using the <a href="https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/" title="How to Use the WordPress Block Editor (Gutenberg Tutorial)">block editor</a>.</p>



<p>For this tutorial, we will be adding the WhatsApp button to a page.</p>



<p>First, you need to go to the <strong>Pages » Add New</strong> page from the admin sidebar.</p>



<p>This will launch the block editor.</p>



<p>Now, you need to click the &#8216;Add Block&#8217; (+) button at the top left corner of the screen and click on the &#8216;Shortcode&#8217; block.</p>



<figure class="wp-block-image size-full"><img width="680" height="345" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/add-shortocode-in-block-editor-1.png" alt="Add shortcode in the block editor" class="wp-image-175050" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/add-shortocode-in-block-editor-1.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/add-shortocode-in-block-editor-1-300x152.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Once the &#8216;Shortcode&#8217; block is added, you need to copy and paste the following shortcode into the block.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
&#91;ht-ctc-chat]
</pre></div>


<p>After that, simply click the &#8216;Publish&#8217; button at the top.</p>



<p>This is how the WhatsApp button looked on our demo website.</p>



<figure class="wp-block-image size-full"><img width="680" height="353" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-button-on-a-page-2.jpg" alt="WhatsApp button on a page" class="wp-image-173606" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-button-on-a-page-2.jpg 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-button-on-a-page-2-300x156.jpg 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p><strong>Adding the WhatsApp Chat Button as a Widget</strong></p>



<p>In this method, we will show you how to easily add the WhatsApp button as a widget in the sidebar of your website.</p>



<p>First, you need to head over to the <strong>Appearance » Widgets</strong> page from the WordPress sidebar.</p>



<p>Once there, simply click on the &#8216;Sidebar&#8217; tab to expand it and then click the &#8216;Add Block&#8217; (+) button at the top.</p>



<p>Next, simply locate and add the &#8216;Shortcode&#8217; block to the sidebar.</p>



<figure class="wp-block-image size-full"><img width="680" height="328" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/add-shortcode-in-sidebar-1.png" alt="Add the shortcode block in the sidebar" class="wp-image-174707" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/add-shortcode-in-sidebar-1.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/add-shortcode-in-sidebar-1-300x145.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Now, simply copy and paste the following shortcode into the block.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
&#91;ht-ctc-chat]
</pre></div>


<p>Finally, don&#8217;t forget to click the &#8216;Update&#8217; button to store your settings.</p>



<p>This is how the WhatsApp button looked after being added to the sidebar on our demo website.</p>



<figure class="wp-block-image size-full"><img width="680" height="274" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-button-in-sidebar-3.jpg" alt="WhatsApp button in sidebar" class="wp-image-173608" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-button-in-sidebar-3.jpg 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-button-in-sidebar-3-300x121.jpg 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p><strong>Adding the WhatsApp Chat Button in Full Site Editor</strong></p>



<p>If you&#8217;re using a <a href="https://www.wpbeginner.com/showcase/best-wordpress-full-site-editing-themes/" title="21 Best Block Themes for Full Site Editing in WordPress ">block-based theme</a> with a full site editor, then this method is for you.</p>



<p>First, head over to the <strong>Appearance » Editor</strong> page to launch the full site editor.</p>



<p>Once there, simply click the &#8216;Add Block&#8217; (+) button at the top left corner of the screen.</p>



<p>Now, simply locate and add the &#8216;Shortcode&#8217; block to your preferred place on the site.</p>



<figure class="wp-block-image size-full"><img width="680" height="295" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/add-shortcode-in-fse.png" alt="Add the shortcode block in the FSE" class="wp-image-166985" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/add-shortcode-in-fse.png 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/add-shortcode-in-fse-300x130.png 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>Once the block is added, simply copy and paste the following shortcode into the block.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
&#91;ht-ctc-chat]
</pre></div>


<p>In the end, don&#8217;t forget to click the &#8216;Update&#8217; button at the top to save your changes.</p>



<p>This is how the WhatsApp button looked on our site.</p>



<figure class="wp-block-image size-full"><img width="680" height="334" src="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-button-in-fse-1.jpg" alt="WhatsApp button in FSE" class="wp-image-173624" srcset="https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-button-in-fse-1.jpg 680w, https://www.wpbeginner.com/wp-content/uploads/2015/08/whatsapp-button-in-fse-1-300x147.jpg 300w" sizes="(max-width: 680px) 100vw, 680px" /></figure>



<p>We hope this article helped you learn how to add a WhatsApp share button in WordPress. You may also want to see our top picks of the <a title="21 Best Social Media Monitoring Tools For WordPress Users" href="https://www.wpbeginner.com/showcase/21-best-social-media-monitoring-tools-for-wordpress-users/">best social media monitoring tools</a> for WordPress users, and our beginner&#8217;s guide on <a href="https://www.wpbeginner.com/beginners-guide/how-to-build-an-email-list-in-wordpress-email-marketing-101/" title="How to Build an Email List in WordPress – Email Marketing 101">how to build an email list</a>.</p>



<p>If you liked this article, then please subscribe to our <a href="https://youtube.com/wpbeginner?sub_confirmation=1"  rel="noreferrer noopener nofollow" title="Subscribe to WPBeginner YouTube Channel">YouTube Channel</a> for WordPress video tutorials. You can also find us on <a href="https://twitter.com/wpbeginner"  rel="noreferrer noopener nofollow" title="Follow WPBeginner on Twitter">Twitter</a> and <a href="https://facebook.com/wpbeginner"  rel="noreferrer noopener nofollow" title="Join WPBeginner Community on Facebook">Facebook</a>.</p><p>The post <a href="https://www.wpbeginner.com/plugins/how-to-add-whatsapp-share-button-in-wordpress/">How to Add WhatsApp Chatbox and Share Buttons in WordPress</a> first appeared on <a href="https://www.wpbeginner.com/">WPBeginner</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://www.wpwife.com/wordpress-plugins/how-to-add-whatsapp-chatbox-and-share-buttons-in-wordpress/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="" length="0" type="" />
		</item>
		<item>
		<title>5 Best WordPress WhatsApp Plugins: Add WhatsApp Click to Chat Button to WordPress</title>
		<link>http://www.wpwife.com/social/5-best-wordpress-whatsapp-plugins-add-whatsapp-click-to-chat-button-to-wordpress</link>
		<comments>http://www.wpwife.com/social/5-best-wordpress-whatsapp-plugins-add-whatsapp-click-to-chat-button-to-wordpress#comments</comments>
		<pubDate>Wed, 03 Apr 2019 05:07:34 +0000</pubDate>
		<dc:creator><![CDATA[Colin Newcomer]]></dc:creator>
				<category><![CDATA[Social]]></category>
		<category><![CDATA[Whatsapp]]></category>

		<guid isPermaLink="false">https://wplift.com/?p=86149</guid>
		<description><![CDATA[
<p>Want to let your WordPress site&#8217;s visitors chat with you on WhatsApp? If so, you need one of the best WhatsApp plugins for WordPress that I&#8217;m about to share. These plugins let you add a WhatsApp click to chat button to WordPress where your visitors can chat with you (or even other agents) via WhatsApp. ... <a title="5 Best WordPress WhatsApp Plugins: Add WhatsApp Click to Chat Button to WordPress" href="https://wplift.com/best-wordpress-whatsapp-plugin">Read more<span>5 Best WordPress WhatsApp Plugins: Add WhatsApp Click to Chat Button to WordPress</span></a></p>
<p>The post <a rel="nofollow" href="https://wplift.com/best-wordpress-whatsapp-plugin">5 Best WordPress WhatsApp Plugins: Add WhatsApp Click to Chat Button to WordPress</a> appeared first on <a rel="nofollow" href="https://wplift.com/">Learn WordPress with WPLift</a>.</p>
<img src="http://feeds.feedburner.com/~r/Wplift/~4/FMd7NQcI-SQ" height="1" width="1" alt="">
]]></description>
				<content:encoded><![CDATA[<p>Want to let your WordPress site&#8217;s visitors chat with you on WhatsApp? If so, you need one of the best WhatsApp plugins for WordPress that I&#8217;m about to share. These plugins let you add a WhatsApp click to chat button to WordPress where your visitors can chat with you (or even other agents) via WhatsApp. ... <a title="5 Best WordPress WhatsApp Plugins: Add WhatsApp Click to Chat Button to WordPress" class="read-more" href="https://wplift.com/best-wordpress-whatsapp-plugin">Read more<span class="screen-reader-text">5 Best WordPress WhatsApp Plugins: Add WhatsApp Click to Chat Button to WordPress</span></a></p>
<p>The post <a rel="nofollow" href="https://wplift.com/best-wordpress-whatsapp-plugin">5 Best WordPress WhatsApp Plugins: Add WhatsApp Click to Chat Button to WordPress</a> appeared first on <a rel="nofollow" href="https://wplift.com/">Learn WordPress with WPLift</a>.</p><img src="http://feeds.feedburner.com/~r/Wplift/~4/FMd7NQcI-SQ" height="1" width="1" alt=""/>]]></content:encoded>
			<wfw:commentRss>http://www.wpwife.com/social/5-best-wordpress-whatsapp-plugins-add-whatsapp-click-to-chat-button-to-wordpress/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="" length="0" type="" />
		</item>
		<item>
		<title>WhatsApp Chat Review: Add WhatsApp Chat to WordPress</title>
		<link>http://www.wpwife.com/customer-service/whatsapp-chat-review-add-whatsapp-chat-to-wordpress</link>
		<comments>http://www.wpwife.com/customer-service/whatsapp-chat-review-add-whatsapp-chat-to-wordpress#comments</comments>
		<pubDate>Wed, 27 Mar 2019 06:18:11 +0000</pubDate>
		<dc:creator><![CDATA[Colin Newcomer]]></dc:creator>
				<category><![CDATA[Chat]]></category>
		<category><![CDATA[Customer Service]]></category>
		<category><![CDATA[Whatsapp]]></category>

		<guid isPermaLink="false">https://wplift.com/?p=86160</guid>
		<description><![CDATA[
<p>As part of the Facebook galactic empire, WhatsApp sports over 1.5 Billion active monthly users, which means about one-fifth of the entire earth&#8217;s population uses WhatsApp on a monthly basis. WhatsApp Chat is a freemium plugin that helps you harness that popularity by letting your website&#8217;s visitors send WhatsApp chat messages straight to you (or ... <a title="WhatsApp Chat Review: Add WhatsApp Chat to WordPress" href="https://wplift.com/whatsapp-chat-review">Read more<span>WhatsApp Chat Review: Add WhatsApp Chat to WordPress</span></a></p>
<p>The post <a rel="nofollow" href="https://wplift.com/whatsapp-chat-review">WhatsApp Chat Review: Add WhatsApp Chat to WordPress</a> appeared first on <a rel="nofollow" href="https://wplift.com/">Learn WordPress with WPLift</a>.</p>
<img src="http://feeds.feedburner.com/~r/Wplift/~4/BUcxaqhv9UI" height="1" width="1" alt="">
]]></description>
				<content:encoded><![CDATA[<p>As part of the Facebook galactic empire, WhatsApp sports over 1.5 Billion active monthly users, which means about one-fifth of the entire earth&#8217;s population uses WhatsApp on a monthly basis. WhatsApp Chat is a freemium plugin that helps you harness that popularity by letting your website&#8217;s visitors send WhatsApp chat messages straight to you (or ... <a title="WhatsApp Chat Review: Add WhatsApp Chat to WordPress" class="read-more" href="https://wplift.com/whatsapp-chat-review">Read more<span class="screen-reader-text">WhatsApp Chat Review: Add WhatsApp Chat to WordPress</span></a></p>
<p>The post <a rel="nofollow" href="https://wplift.com/whatsapp-chat-review">WhatsApp Chat Review: Add WhatsApp Chat to WordPress</a> appeared first on <a rel="nofollow" href="https://wplift.com/">Learn WordPress with WPLift</a>.</p><img src="http://feeds.feedburner.com/~r/Wplift/~4/BUcxaqhv9UI" height="1" width="1" alt=""/>]]></content:encoded>
			<wfw:commentRss>http://www.wpwife.com/customer-service/whatsapp-chat-review-add-whatsapp-chat-to-wordpress/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="" length="0" type="" />
		</item>
	</channel>
</rss>
