Usage

Embed the script into the body of your page and specify the path to your configuration file via data-config:src attribute or provide fallback configuration options using data-config:fallback:<config-item-name> attributes. The id="cm-chat-script" is mandatory. Query parameters (e.g. ?v=123) might be used for cache busting.

<body>
  ...
  <script
    id="cm-chat-script"
    src="https://cm.com/embeddable-chat-button/cm-chat.min.js?v=123"
    data-config:src="<path-to-your-website>/config.json"
    data-config:fallback:chat.applebusinesschat.businessid="00000000-0000-0000-0000-000000000000"
    data-config:fallback:chat.whatsapp.phone="31000000000"
    type="text/javascript"
  ></script>
</body>

Config options

chat.applebusinesschat.businessid (string) [required]

Your Apple Business Guid.
chat.applebusinesschat.tooltip (string or { "html": ... })

Tooltip text that would be shown on Apple Chat button hover.

Default: "Apple Business Chat"
chat.whatsapp.phone (string) [required]

Your contact phone number. Used to generate QR Code image for the WhatsApp widget.
chat.whatsapp.subtitle (string or { "html": ... })

Subtitle text that would be shown in the WhatsApp widget header.

Default: "Scan & chat"
chat.whatsapp.tagline (string or { "html": ... })

Text that would be shown below the QR Code image on the WhatsApp widget.
chat.whatsapp.title (string or { "html": ... })

Title text that would be shown in the WhatsApp widget header.

Default: "WhatsApp"
chat.whatsapp.tooltip (string or { "html": ... })

Tooltip text that would be shown on WhatsApp button hover.

Default: "WhatsApp"

NB: All config options can be specified using data-config:fallback:... attributes as plain-text strings. To embed html blocks (e.g. to render an <a href=... link under the QR Code) you have to provide a configuration file.

Config file example

{
  "chat.applebusinesschat.businessid": "00000000-0000-0000-0000-000000000000",
  "chat.applebusinesschat.tooltip": "Apple Business Chat",
  "chat.whatsapp.phone": "31000000000",
  "chat.whatsapp.subtitle": "Scan & chat",
  "chat.whatsapp.tagline": {
    "html": "Scan the code with your mobile phone to start chatting. Or use <a href=\"https://api.whatsapp.com/send?phone=31000000000\" target=\"_blank\">WhatsApp Web</a>"
  },
  "chat.whatsapp.title": "WhatsApp",
  "chat.whatsapp.tooltip": "WhatsApp"
}