How to Add Apple Business Chat Button to Your WordPress Website
Tags: wordpress, apple
Published: 2021-03-01 03:34:41

Apple Message is a feature that allows webmasters to add the business chat button and phone / call button to their website. It's very useful and convenient because users can contact the website owners directly to ask for help. Therefore, as a website owner, you should definitely **add the business chat button to your WordPress website** to increase the user experience.

During the implementation, you need to use some HTML code, so it's relatively difficult for the non-tech savvy. But don't worry because we will walk you through this process step by step.

**Note**: The business chat button is available on only Apple devices. If users don't use these devices, the button will be hidden.

Step 1: Sign up for Business Chat
---------------------------------

First, go to the [Apple Business Register](https://register.apple.com/business-chat) page and sign up for Business Chat with your Apple ID. It's quite easy, so I won't go into details.

![go to the Apple Business Register page and sign up for Business Chat with your Apple ID](https://i.imgur.com/vw0IEAT.png)

Now, you already have your own Business Chat ID. Save this ID somewhere because you will need it in the next step.

Step 2: Add the Javascript Library
----------------------------------

Next, you have to add the Javascript Library to display the **Business Chat** button to the website. There're two methods to do it:

### Method 1: Edit code in the theme file

Find the `<head></head>` or `</body>` tags in your theme file. Their locations will be different depending on the theme. For example, I'm using [Justread](https://gretathemes.com/wordpress-themes/justread/) theme, so the `<head><head>` tag is in the `header.php` file, and the `</body>` tag is in the `footer.php` file.

After you find these above tag, add this code before the `</body>` tag or into the `<head><head>` tag:

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

### Method 2: Using Slim SEO plugin

Other than editing code in the theme file, you can use [Slim SEO](https://wpslimseo.com/) plugin to add the code without going to the theme file and looking for the `<head><head>` and `</body>` tags.

Slim SEO is totally free, so you can find it on [wordpress.org](https://wordpress.org/plugins/slim-seo/) easily. On the **Admin Dashboard**, go to **Plugins** > **Add New**, and then [install and activate the plugin](https://gretathemes.com/install-wordpress-plugin/) as usual.

After that, go to **Settings** > **Slim SEO** and add the above code to the **Header Code** or **Body Code** sections.

![use Slim SEO plugin to add the code to display the Apple business chat button](https://i.imgur.com/lzccGQM.png)

And don't forget to click **Save**.

In addition, Slim SEO has many other useful features to help you automatically optimize WordPress websites for SEO. You can learn more about these features [here](https://gretathemes.com/optimize-website-slim-seo/).

Step 3: Display the Business Chat Button in the Desired Position
----------------------------------------------------------------

In this final step, you need to display the Business Chat button in the widget area you want. This can be done by adding some HTML code to the widget. The HTML code must have the following structure:

<div class="apple-class-name" apple-attribute-name ></div>

I make an example with an attribute in the form of `data-apple-business-id`. Do you remember the ID taken in step 1? Now, it is the time to use it. My ID is **ca0db090** and I want to add the chat button in a `container-style` banner, so my `<div>` tag is:

<div class="apple-business-chat-banner-container" data-apple-business-id="ca0db090"></div>

Note that the `data-apple-business-id` attribute is required. It's used to specify the Business Chat ID's owner and send your messages to them.

Besides, there are many other classes and attributes that you can use for the HTML code. You can find the most popular classes and attributes in the list below:

Classes to display chat or call buttons:

-   `apple-business-chat-banner-container`: display both chat and call buttons
-   `apple-business-chat-message-container`: display chat button only
-   `apple-business-chat-phone-container`: display call button only
-   etc

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

-   `data-apple-banner-font-family`: choose a family font for the **Call to action** button
-   `data-apple-banner-icon-background-color`: choose the background color (the circle) of the icon
-   `data-apple-banner-icon-color`: choose the colors of chat and call buttons
-   Etc.

Attributes related to the interaction between customers and website owners:

-   `data-apple-business-group-id`: determine the department that receives the calls / messages. For example, you can assign the ID of "Customer Service" or "Technical Support" departments to this attribute.
-   `Data-apple-business-phone`: Enter the phone number that users use to contact you if they can't chat. In case you don't add this attribute, the **Call** button will be hidden.
-   Etc.

In addition, you can find all the attributes and classes of Apple [here](https://developer.apple.com/documentation/businesschat/adding_a_business_chat_button_to_your_website#3021382).

After having the needed `<div>` tags, add them to the desired position using the HTML editor. For instance, I want to display the Business Chat button in a widget at the footer of [Justread](https://gretathemes.com/wordpress-themes/justread/) theme and here is the way to do that.

On the **Admin Dashboard**, go to **Appearance** > **Widget**, choose the **Custom HTML** widget, and then choose to display the widget on the footer.

![display the widget on the footer of WordPress website](https://i.imgur.com/55H84WX.png)

Next, insert the following code to the widget:

<div>
	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)"></div>

![Use code to insert the business chat button](https://i.imgur.com/6Fd84yX.png)

Finally, click **Save**.

We've finished displaying the Business Chat button on the footer of the WordPress website. From now on, Apple users will see the Business Chat button display on the footer like this:

![Display the Business Chat button on the footer of the WordPress website.](https://i.imgur.com/KljLqHq.png)

You can style the button and display it in other positions in the same way with the above code, classes, and attributes. Try it, and show us in the comment section!

Last Words
----------

Using code to add the Business Chat button to the WordPress website may be quite difficult for WordPress beginners. But if you follow this tutorial strictly, it will definitely work. After you have the Business Chat button on your site, don't forget to reply to customers' calls and messages. It will help build trust between customers and the website owner, thus improving your brand and [increasing the conversion](https://gretathemes.com/optimize-wordpress-website-increase-conversions/).

In addition to adding the business chat button, you can also [add the live chat button](https://gretathemes.com/wordpress-live-chat-plugins-for-customer-service/) and [Facebook customer chat](https://gretathemes.com/facebook-customer-chat/) button to your WordPress website. These features help you reply to customer questions more promptly.