How to Add Business Chat Button to Your WordPress Website
Tags: wordpress
Published: 2020-12-01 02:57:05

If you're using an Apple device, when browsing a website, you can <strong>phone or chat directly with that site's owner to request or ask for services / information right on the website</strong>. It's so convenient thanks to the Apple Messages chat feature that is only available on Apple devices. Thus, website owners should absolutely take advantage of this useful feature to improve the experience of Apple users.

Let's find out <strong>how to add the Apple Business Chat button to your WordPress websites</strong>. Note that if users don't browse the internet by iPhone, iMac, iPad, Macbook, etc, this feature will be hidden.

<!--more-->

<h2>Step 1: Sign up for Business Chat</h2>

First of all, you have to sign up for the Business Chat feature on the <a href="https://register.apple.com/business-chat">Apple Business Register</a> page. This process is quite easy. You just need an Apple ID to sign in.

<img class="aligncenter" src="https://i.imgur.com/vw0IEAT.png" alt="Sign up for Business Chat" width="1016" height="809" />

After that, you'll receive an ID to add the chat feature. Don't forget to save it for step 3.

<h2>Step 2: Add the Javascript Library to Display the Business Chat Button to the Website</h2>

To add the Business Chat button to the website, you need to use the Javascript library of Business Chat.

This can be done by adding the following code into the <code>&lt;head&gt; &lt;/head&gt;</code> tag or before the <code>&lt;/body&gt;</code> tag:

<pre>&lt;script src="https://static.cdn-apple.com/businesschat/start-chat-button/2/index.js"&gt;&lt;/script&gt;</pre>

<strong>Note</strong>: <code>&lt;head&gt; &lt;/head&gt;</code> and <code>&lt;/body&gt;</code> tags will be located in different files depending on your theme. For example, I'm using Justread theme and the <code>&lt;head&gt;&lt;/head&gt;</code> tag is located in the <code>header.php</code> file, and the <code>&lt;/body&gt;</code> tag is located in the <code>footer.php</code> file (you can download this free theme <a href="https://gretathemes.com/wordpress-themes/justread/" rel="follow">here</a>).

If you don't want to edit code in the theme file, try <a href="https://wpslimseo.com/">Slim SEO</a> plugin (totally free). In addition, this plugin also helps you automatically <a href="https://gretathemes.com/wordpress-seo-checklist/" rel="follow">optimize your website for SEO</a>. We have an article on how to use Slim SEO plugin, you can refer to it <a href="https://gretathemes.com/optimize-website-slim-seo/" rel="follow">here</a>.

<img class="aligncenter" src="https://i.imgur.com/X6bl66F.png"  width="1632" height="966" />

Just go to <strong>Admin Dashboard</strong> &gt; <strong>Plugins</strong> &gt; <strong>Add New</strong>, then <a href="https://gretathemes.com/install-wordpress-plugin/" rel="follow">install and activate the plugin</a> as usual. Upon activation, go to <strong>Admin Dashboard</strong> &gt;<strong> Settings</strong> &gt; <strong>Slim SEO</strong> and paste the following code to the <strong>Header Code</strong> or <strong>Body Code</strong> sections.

<img class="aligncenter" src="https://i.imgur.com/0MWSk3o.png" alt="Add the Javascript Library to Display the Business Chat Button to the Website" width="1632" height="966" />

Finally, click <strong>Save</strong>.

<h2>Step 3: Add HTML Code to Display the Business Chat Button in the Desired Position</h2>

Next, add the HTML code to the position in which you want to display the Business Chat button. Just use the <code>&lt;div&gt;</code> tag and here is the structure of it:

<pre>&lt;div class="apple-class-name" apple-attribute-name &gt;&lt;/div&gt;.</pre>

If the Apple attribute is in the form of <code>data-apple-business-id</code>, enter the Apple ID that is registered in step 1. For example, my ID is <code>ca0db090</code> and I want to add the chat button in a <code>container-style</code> banner, so my <code>&lt;div&gt;</code> tag is:

<pre>&lt;div class="apple-business-chat-banner-container" data-apple-business-id="ca0db090"&gt;&lt;/div&gt;</pre>

You can even add many other attributes to this tag, but note that it's required to use the <code>data-apple-business-id</code> attribute. It helps you identify the owner of the chat ID and send your messages to them.

Below is the list of popular classes and attributes. You can choose any classes and attributes you want:

Classes to display chat or call buttons:

<ul>

   <li><code>apple-business-chat-banner-container</code>: display both chat and call buttons</li>

   <li><code>apple-business-chat-message-container</code>: display chat button only</li>

   <li><code>apple-business-chat-phone-container</code>: display call button only</li>

   <li>etc</li>

</ul>

Attributes to customize the display of chat / call buttons (colors, fonts, size, ...)

<ul>

   <li><code>data-apple-banner-font-family</code>: choose a family font for the <code>Call to action</code> button</li>

   <li><code>data-apple-banner-icon-background-color</code>: choose the background color (the circle) of the icon</li>

   <li><code>data-apple-banner-icon-color</code>: choose the colors of chat and call buttons</li>

   <li>etc.</li>

</ul>

Attributes related to the interaction between customers and website owners:

<ul>

   <li><code>data-apple-business-group-id</code>: helps identify objects that receive the messages / calls and handle them based on their purposes. For instance, you can assign the ID of the "Payment", "Delivery" department to this attribute.</li>

   <li><code>data-apple-business-phone</code>: add the phone number that customers can contact you via it if they can't use the chat button. If you don't add this attribute, the <strong>Call</strong> icon won't show up on the page.</li>

   <li>etc.</li>

</ul>

To get all the classes and attributes of Apple, click <a href="https://developer.apple.com/documentation/businesschat/adding_a_business_chat_button_to_your_website#3021382">here</a>.

After writing the structure of the <code>&lt;div&gt;</code> tag, you need to insert this tag into the HTML editor at the desired position. For example, I'll insert it into a widget at the footer of <a href="https://gretathemes.com/wordpress-themes/justread/" rel="follow">Justread</a> theme.

Go to <strong>Dashboard</strong> &gt; <strong>Appearance</strong> &gt; <strong>Widget</strong>, choose the <strong>Custom HTML</strong> widget, and then choose to display the widget on the footer.

<img class="aligncenter" src="https://i.imgur.com/0WbJh3Y.png" alt="Display the Business Chat Button in the Desired Position" width="888" height="828" />

After that, add this code to the widget:

<pre>&lt;div&gt;

class="apple-business-chat-banner-container"

data-apple-business-id="ca0db090"

data-apple-business-phone="0987725475"

data-apple-banner-cta="Got Questions? We can help."

data-apple-banner-context="Chat with one of our pros to get your offer for iPhone Xs."

data-apple-banner-scale="1"

data-apple-banner-background-color="rgb(27, 63, 104)"

data-apple-banner-text-color="rgb(255, 255, 255)"

data-apple-banner-icon-background-color="rgb(255, 255, 255)"

data-apple-banner-icon-color="rgba(0, 210, 143, 0.3)"&gt;&lt;/div&gt;

</pre>

<img class="aligncenter" src="https://i.imgur.com/N5dRPCA.png" alt="Add HTML Code to Display the Business Chat Button in the Desired Position" width="1392" height="758" />

And don't forget to click <strong>Save</strong>!

Now when you go to the homepage, if you're using Apple devices such as Macbook, iPhone, iPad, you will see the call button on the footer as follows:

<img class="aligncenter" src="https://i.imgur.com/KljLqHq.png" alt="the business chat button shows up on the footer of the WordPress website" width="1345" height="503" />

Ola, that's all done!

<h2>Last Words</h2>

Adding the Business Chat buttons of Apple Message will help Apple users contact website owners, service providers, ... more easily. In the long term, it will boost the conversion rate, sales, and build trust between customers and sellers. Thus, you should absolutely utilize this feature to develop your websites and projects!

<hr />

The publication at <a href="https://metabox.io/add-business-chat-button-wordpress-website/">Meta Box</a>.