Let customers start a conversation with you by adding a Business Chat button to your website.
- Business Chat
You can place the
<script> tag in one of two places:
<head>...</head>element of the page.
</body>element at the end of the page.
The script automatically triggers when the webpage loads into the browser. It finds all button containers on the page and converts them into Business Chat buttons with the configuration you specify within the
<div> tag, as described in the next section.
Add a Container for the Business Chat Button
A class attribute with the value
apple-business-chat-banner-containerfor the banner mode layout.
data-apple-business-idattribute with the business ID you received when you registered your company with Business Chat.
For example, here is the base structure of what your
<div> tag for the Buisness Chat button in a banner should look like:
Add the Buttons in a Banner
In addition to the attribute and class, the banner mode button layout also requires that a data-apple-banner-cta attribute with a CTA or a data-apple-banner-context attribute message to engage customers (or both) be present on the <div> container.
For example, here is the base structure of what your <div> container for the Business Chat button should look like for banner mode in default horizontal alignment (see Figure 2) with message and phone buttons:
You can choose to center your context, CTA, and buttons in a vertical style by setting the
data-apple-banner-orientation="vertical" attribute as shown in Figure 2.
You can also set the Business Chat banner with intent and group IDs. Below is an example of intent and group IDs with CTA and context messaging, scaled to 1, oriented vertically, with customized colors.
Figure 3 shows the custom Business Chat banner. Although the intent and group IDs are set in the <div> container, the customer doesn't see them when hovering over or tapping the buttons.
Add a Button to Your Webpage
Icons mode gives you the ability to display only a phone or message button on your webpage. You can display the phone button by adding the class apple-business-chat-phone-container and setting the data-apple-business-phone attribute:
You don't need to add the
data-apple-business-id for the phone because the icon's sole function is to start a call with the vendor.
To display only the Message button, add the class
apple-business-chat-message-container and set the
Figure 4 shows the output of an icons mode Message button for a website footer. The message container, background, and icon button are centered horizontally (default) with CTA and context. When setting the message container for icons mode, you can only use icons mode attributes. For more information, see Business Chat Button Data Attributes.
Business Chat Button Data Attributes
Configuration for the button passes through as data-* attributes for the
<div> tag. Although this JS library is backward compatible with the legacy button, you cannot use the legacy JS library with the new data attributes. The following data attributes are supported:
(Required) Identifies and routes messages to the owner of the business chat ID. Insert your Business Chat ID between the quotes. For example,
"insert your business id here".
The intent for initiating the chat conversation. This can be anything that you specify; for example,
The group to receive a chat message based on the message's intent. For example,
The banner’s background color. You can use red, green, blue (RGB), RGB-alpha (RGBA), or a hexadecimal color code to set the color. The default value in RGB is
rgb(255,255,255), and the hex color code is
CTA text for the icons. This is required if you don’t provide context.
A short sentence that lets customers know what they can expect when tapping the button. This is required if you don’t provide a CTA.
A Boolean value that allows you to have rounded or square corners. If not set, the banner defaults to true, or rounded corners.
A string value allowing you to choose the font of the context and CTA text. All standard OS fonts are supported.
Color of the phone and message icon's circular background. You can use RGB, RGBA, or a hex color code to set the color. The default value in RGB is
rgb(239,239,244), and the hex color code value is
Color of the phone and message icons. You can use RGB, RGBA, or a hex color code to set the color. The default value in RGB is
rgb(0,122,255), and the hex color code value is
Sets the orientation of the container. You can choose either horizontal or vertical. The default is horizontal.
A string value that allows you to scale the contents of the banner. The values are between 1 through 2 for scaling, the icons are between 45 and 90 pixels, and the font is 10 through 20 point.
Color of the context and CTA text on the banner. You can use RGB, RGBA, or a hex color code to set the color. If no color is specified, then the color defaults to
rgb(255, 255, 255).
The phone number you want customers to call if they cannot use the chat button. If not included, the phone icon does not display.
(Icons mode only) Color of the phone or message buttons. You can use RGB, RGBA, or a hex color code to set the color. The default value in RGB is
rgb(0,122,255), and the hex color code value is
(Icons mode only) Color of the phone or message buttons. You can use RGB, RGBA, or a hex color code to set the color. If no value is specified, the default value in RGB is
rgb(0, 122, 255), and the hex value is
(Required) (Icons mode only) A decimal value, ranged from 1 through 2, that determines the scale of the icons. The default scale value is 1.
(Required) (Icons mode only) Text is displayed as a tooltip when hovering over the icon.