Click to Call - tutorial

<style>
#comBoxAll{display:none}
</style>
<script type="text/javascript" src="https://cloud.apizee.com/contactBox/loaderIzeeChat.js"/>
<script>
const videoButtonId = 'video-call-button';
const videoClickButton = document.getElementById(videoButtonId);
const audioButtonId = 'audio-call-button';
const audioClickButton = document.getElementById(audioButtonId);

const receiveData = (e)=>{ //custom box event message handler
	const data = = e.detail.data;
	switch (data.event) {
		case 'chat_req_close':
		Apizee.getComBox().dataClient.sendData(
			e.detail.senderId,
			{
				event: 'chat_ans_close',
				answer: 'refuse',
			},
			function () {
				Apizee.getComBox()
					.getComBoxEl(e.detail.senderId)
					.find('div.endDiscussionRequest')
					.remove();
				closeBox();
			}
		);
		Apizee.getComBox().sendInfoMsg(e.detail.senderId, 'End discussion is not available on click to call integration');
		break;
	}
};

//callback from box
const applicationCallback = function(contactBox, type, params) {
	switch (type) {
		case 'init':
			console.info('[ComBox] init', params, contactBox.highTrafficMode);
			if (contactBox.highTrafficMode) {
				videoClickButton.removeAttribute('disabled');
				audioClickButton.removeAttribute('disabled');
			}
			if (apiRTC) {
				apiRTC.addEventListener('receiveData', receiveData);
			}
			break;
		case 'newAgentSelected':
			console.info('[ComBox] new agent selected', params);
			videoClickButton.removeAttribute('disabled');
			audioClickButton.removeAttribute('disabled');
			break;
		case 'callRecept':
			console.info('[ComBox] callRecept', params);
			document.getElementById('comBoxAll').style.display = 'block';
			break;
		case 'noAgentAvailable':
			console.info('[ComBox] noAgentAvailable', params);
			if (!contactBox.highTrafficMode) {
				videoClickButton.setAttribute('disabled', false);
				audioClickButton.setAttribute('disabled', false);
			}
			break;

		case 'callBreak':
			closeBox();
			break;
		case 'callEnd':
			closeBox();
			break;
		default:
			console.info('[ComBox]', type, params);
			break;
	}
};

// box loader params
const customParam = {
	applicationCallback: applicationCallback,
	audioCallShowBtn: true,
	videoCallShowBtn: true,
};

//video call function
const callVideo = () => {
	let contactBox = Apizee.getContactBox();
	let box = Apizee.getComBox();
	const rel = contactBox.publishedAgentId;
	if (box && contactBox) {
		document.getElementById('comBoxAll').style.display = 'block';
		var callMethod = box.params.audioOnly ? 'audio' : 'video';
		if (
			contactBox.highTrafficMode &&
			typeof contactBox.highTrafficCall === 'function'
		) {
			contactBox.highTrafficCall(rel, 'video');
		} else {
			box.callVideo(rel);
		}
	}
};
//audio call function
const callAudio = () => {
	let contactBox = Apizee.getContactBox();
	let box = Apizee.getComBox();
	const rel = contactBox.publishedAgentId;
	if (box && contactBox) {
		document.getElementById('comBoxAll').style.display = 'block';
		if (
			contactBox.highTrafficMode &&
			typeof contactBox.highTrafficCall === 'function'
		) {
			contactBox.highTrafficCall(rel, 'audio');
		} else {
			box.callAudio(rel);
		}
	}
};
// close/ hide box
const closeBox = () => {
	let contactBox = Apizee.getContactBox();
	let box = Apizee.getComBox();
	if (box && contactBox) {
		document.getElementById('comBoxAll').style.display = 'none';
		box.minimize(contactBox.publishedAgentId);
	}
};

//link call button to call function
videoClickButton.onclick = callVideo;
audioClickButton.onclick = callAudio;

// load box

loaderIzeeChat("YOUR_SITE_KEY",customParam);
</script>