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.

PreviousVložení tlačítka mluvii NextCustomizace

Last updated 1 year ago

Was this helpful?

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