# 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](https://register.apple.com/resources/messages/messaging-documentation/message-with-customers) 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&#x20;

**appleBussinessID** - Business ID that has been assigned by Apple (found in the Apple Register Portal under Links → Copy ID)&#x20;

**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](https://www.mluvii.com/?page_id=990\&lang=cs).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mluvii.com/en/for-it-specialists/add-apple-widget-to-website.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
