Article

Adding a Business Chat Button to Your Website

Let customers start a conversation with you by adding a Business Chat button to your website.

Overview

To display a Business Chat buttons on a webpage, you'll need to link to a downloadable JavaScript library that contains business logic and assets.

Add the JavaScript Library to the Page Headers

On the webpages where you intend to include a Business Chat button, you'll need to link to Business Chat's JavaScript library. The JavaScript library intelligently displays the Business Chat button. The library only displays the Business Chat button when the device supports Business Chat. Use the following <script> tag for calling the JavaScript library.

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

You can place the <script> tag in one of two places:

  • Within the <head>...</head> element of the page.

  • Following the </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, as seen in Figure 1, with the configuration you specify within the <div> tag.

Figure 1

The Business Chat Message button from the JavaScript library without any <div> container configuration.

The Business Chat Message button from the JavaScript library without any <div> container configuration.

Add a Container for the Business Chat Button

With the JavaScript library and assets in place, the next step is to use the <div> tags wherever you want to include a Business Chat button on the webpage. The <div> tag must include the following:

  • A class attribute with the value apple-business-chat-button-container.

  • A data-apple-business-id attribute 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 should look like:

<div class="apple-business-chat-button-container" data-apple-business-id="insert your business id here"></div>

Business Chat Button Data Attributes

Configuration for the button passes through as data-* attributes for the <div> tag. The following data attributes are supported:

data-apple-business-id

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".

data-apple-business-intent-id

The intent for initiating the chat conversation. This can be anything that you specify; for example, "account statement" or "track order". (Optional)

data-apple-business-group-id

The group to receive chat messages based on the message's intent. For example, "billing department" or "shipping". (Optional)

data-apple-button-theme

Theme for the button, with “light” and “dark” supported. Use “light” if using the button on a webpage with a lighter background, and “dark” if using with a darker background. If not specified, “light” is used. (Optional)

data-apple-button-locale

Language in which to show the button, in ISO 639-1 language code and ISO 3166-1 region code. For example, "it-it" specifies the language as Italian and the region as Italy. The button’s default behavior is to use the browser’s locale to set the language. In Italy, however, set this attribute to it-it (Italian-Italy) to override the browser’s default locale. (Optional)

See Also

Chat with Customers

Starting a Chat from your App

Let customers start a conversation with you from your app.

class BCChatButton

A Business Chat-branded button for use in your app.

class BCChatAction

Performs actions for a chat.

Starting a Chat from a URL

Let customers start a conversation with you from your website or email message.

Business and Place Cards

Allow customers to contact your business from Maps, Safari, Siri, and Spotlight searches.