How to Add Apple Business Chat Button to Your WordPress Website

If you’re using an Apple device, when browsing a website, you can phone or chat directly with that site's owner to request or ask for services / information right on the website. 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.

Table of Contents hide

1. Step 1: Sign up for Business Chat
2. Step 2: Add the Javascript Library to Display the Business Chat Button to the Website
3. Step 3: Add HTML Code to Display the Business Chat Button in the Desired Position
4. Last Words

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

Step 1: Sign up for Business Chat

First of all, you have to sign up for the Business Chat feature on the Apple Business Register page. This process is quite easy. You just need an Apple ID to sign in.

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

Step 2: Add the Javascript Library to Display the Business Chat Button to the Website

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 <head> </head> tag or before the </body> tag:

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

Note: <head> </head> and </body> tags will be located in different files depending on your theme. For example, I’m using Justread theme and the <head></head> tag is located in the header.php file, and the </body> tag is located in the footer.php file (you can download this free theme here).

If you don’t want to edit code in the theme file, try Slim SEO plugin (totally free). In addition, this plugin also helps you automatically optimize your website for SEO. We have an article on how to use Slim SEO plugin, you can refer to it here.

Just go to Admin Dashboard > Plugins > Add New, then install and activate the plugin as usual. Upon activation, go to Admin Dashboard > Settings > Slim SEO and paste the following code to the Header Code or Body Code sections.

Add the Javascript Library to Display the Business Chat Button to the Website

Finally, click Save.

Step 3: Add HTML Code to Display the Business Chat Button in the Desired Position

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

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

If the Apple attribute is in the form of data-apple-business-id, enter the Apple ID that is registered in step 1. For example, 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>

You can even add many other attributes to this tag, but note that it’s required to use the data-apple-business-id 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:

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: 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.
data-apple-business-phone: 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 Call icon won’t show up on the page.
etc.

After writing the structure of the <div> 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 Justread theme.

Go to Dashboard > Appearance > Widget, choose the Custom HTML widget, and then choose to display the widget on the footer.

Display the Business Chat Button in the Desired Position

After that, add this 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>

Add HTML Code to Display the Business Chat Button in the Desired Position

And don’t forget to click Save!

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:

the business chat button shows up on the footer of the WordPress website

Ola, that’s all done!

Last Words

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!