I have an Apple Business ID (found in the Apple Register Portal under Links → Copy ID)
Sample code
url/to/apple/button - Path to PNG/SVG file of the button
appleBussinessID - Business ID that has been assigned by Apple (found in the Apple Register Portal under Links → Copy ID)
Header Script - The header script is used to determine if the device supports Apple Messages for Business (!window.appleBusinessChat.isSupported())
appleSafezone div - This div is around the button in order to meet the Apple guidelines regarding clear space so that the Apple widget does not overlap the content of your page or app - Maintain minimum clear space. The minimum amount of clear space required around the buttons is 10% of the button's height. Don't let other elements infringe on this space or occlude the button in any way.
<head>
...
<script src="https://static.cdn-apple.com/businesschat/start-chat-button/2/index.js"></script>
...
</head>
<body>
...
<style type="text/css">
#appleButton {
background: url("url/to/apple/button");
}
</style>
<div id="appleSafezone">
<div id="appleButton"></div>
</div>
<script type="text/javascript">
//Apple bussiness id a intent - intent is used for routing purposes
const appleBussinessID = "your-business-id";
let appleIntent = "mluvii";
function openAppleMessagesForBusiness() {
console.log("Opening apple page");
const url = 'https://bcrw.apple.com/urn:biz:'+appleBussinessID+'?biz-intent-id='+appleIntent;
window.location.href = url;
};
(function () {
console.log("Setting onclick");
if (!window.appleBusinessChat.isSupported()) {
hideAppleButtons();
}else {
document.getElementById('appleButton').addEventListener('click', () => {openAppleMessagesForBusiness();});
}
})();
</script>
...
</body>
If you are interested in trying out the new Apple Messages for Business channel, do not hesitate to contact your sales representative or contact us via the chat on our website.
