Mluvii webLoginAPIDEMO

Add Apple widget to website

This page will tell you how to add the Apple button directly to your website.

Prerequisites

  • When using the Apple Messages for Business button on the site, you must follow Apple guidelines in Using Messages for Business buttons

  • I have downloaded the PNG/SVG files with the Apple visual from Message with Your Customer - Apple Messages for Business and the file is stored on the webserver

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

PreviousAdd WebChat button to websiteNextCustomization

Last updated