Vložení Apple tlačítka na web

Na této stránce se dozvíte, jakým způsobem si můžete tlačítko Apple vložit přímo na vaše stránky.

Prerekvizity

  • Při použití tlačítka pro Apple Messages for Business na stránkách je nutné se řídit Apple guidelines v sekci Using Messages for Business buttons

  • Mám stažené PNG/SVG soubory s vizuálem Apple z adresy Message with Your Customer - Apple Messages for Business a soubor je uložen na webserveru

  • Mám Apple Business ID (naleznete v Apple Register Portal v sekci Links → Copy ID)

Ukázková část kódu

url/to/apple/button - Cesta k PNG/SVG souboru tlačítka

appleBussinessID - Business ID, který byl přidělen od Applu (naleznete v Apple Register Portal v sekci Links → Copy ID)

Script v hlavičce - Script v hlavičce je použitý ke zjištění, zda zařízení podporuje Apple Messages for Business (!window.appleBusinessChat.isSupported())

appleSafezone div - Tento div je okolo tlačítka z toho důvodu, aby se splnila podmínka z Apple guidelines ohledně clear space tak, aby Apple widget nepřekrýval obsah vaší stránky neb aplikace - 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 se pouziva na routovani
	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>

V případě zájmu o vyzkoušení nového kanálu Apple Messages for Business neváhejte kontaktovat svého obchodníka nebo nám napište přes chat na našem webu.

Last updated