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.
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.
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.
Finally, click Save.
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 buttonsapple-business-chat-message-container: display chat button onlyapple-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 theCall to actionbuttondata-apple-banner-icon-background-color: choose the background color (the circle) of the icondata-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.
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>
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:
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!
