Example code

Below is an example of a standard code containing most features described above. You must customise the code to fit your page and features.

<!DOCTYPE html>

<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
	
	<!-- This loads Puzzel’s default light-colored stylesheet -->
	<link rel="stylesheet" href="https://chat.puzzel.com/Content/Client/css/intelecom-light.css" type="text/css" />
	<!-- This loads Puzzel’s default dark-colored stylesheet -->
	<!-- link rel="stylesheet" href="https://chat.puzzel.com/Content/Client/css/intelecom-gray.css" type="text/css" /-->
	
	<!-- This loads jQuery if you don’t already have it installed -->
	<!--[if gte IE 9]><!-->
	<script src="https://chat.puzzel.com/Content/Client/js/jquery-latest.min.js"></script>
	<!--<![endif]-->
	<!-- This loads jQuery for IE lower than 9 if you don’t already have it -->
	<!--[if lt IE 9]>
	   <script src="https://chat.puzzel.com/Content/Client/js/jquery-1.11.2.min.js"></script>
	<![endif]-->
	
	<!-- This loads Puzzel’s third party libraries -->
	<script src="https://chat.puzzel.com/Content/Client/js/jquery-intelecomchat.libs.latest.min.js"></script>
	
	<!-- This loads Puzzel’s chat code -->
	<script src="https://chat.puzzel.com/Content/Client/js/jquery-intelecomchat.latest.min.js"></script>
	
	<!-- Here you can change the colors in the 3 main color elements without using own css -->
	<!--style>
		.intelecomchatheader	{background-color:#42A642;} .intelecomchat__button{background:#42A642;}
		.intelecomchatstarter	{border: 5px solid #42A642; width: 70px; height: 70px; }  
	</style-->
</head>
<body>
<!-- Here you can add a more traditional chat starter button. Remember to deactivate chat starter circle (show starter) to avoid duplicate chat starters -->
<!--form>
	<button class="chatstarter" name="startChat">Start chat</button>
</form-->
<div id="someID" class="intelecomchat">
	<script>
		$(document).ready(function() {
			//intelecomChatintelecomtracker.add(window.location.href,"",“");
			$('#someID').intelecomChat({
				/*
				mandatory parameters
				*/
				customerKey: '12345',
				queueKey: 'Q_CHAT',

				/*
				non-mandatory parameters
				*/
				//timeId: '123_time_main', //check opening hours
				//timeOpenExits: ['Open'], //possible to set other exit names
				//msgTimeClosed: '', // text message
				//visualQueueId: 12345, //checks queue,closes if no agents are logged on
				//msgNoAgents: '', //text message
				//msgClosedHeader: '', // text message
				//startChatImmediately: false,  // will start chat when page load
				//onContactcentreClosed: function(){}, //runs when closed
				//onChatStart: function(){}, //runs when clicking the chat button
				//onChatWindowShow: function(){}, //runs when chat window is displayed
				//onChatWindowMinimize: function(){},//runs when chat window's minimized
				//useTracker: Turn tracking on/off for site. Default “true” (true|false)
				//trackerArea: Only post tracks from specified area. Default ””
				//showForm: true, //enable user to enter name and e-mail at startup
				//showStarter: true, //displays the chat starter circle
				//delayStarterSeconds: 0, //delays the chat starter circle
				//showStarterWhenMinimized: true, //displays the chat starter circle
				//horizontalStarterPosition: 'right', //position the chat starter circle
				//verticalStarterPosition: 'middle', // position the chat starter circle
				//chatlink: '.chatstarter', //default class for chat button link
				//horizontalChatPosition: 'right', // positions the chat window
				//verticalChatPosition: 'bottom', // positions the chat window
				//draggable: true, //enables user to move window 
				//resizable: true, //enables user to resize window
				//maxinfoMessageLength: 30, //enables to alter maximum status text width
				//nickName: '', //can be added from the web page
				//chatId: '', //can be added from the web page
				//chatIssue: '', //can be added from the web page
				//altQueueKey: '', //alternative queue to check for available agents
				//languageCode: 'EN', //language settings (EN, NO, SE, DK, FI, HU, BG)
				//showIntro: false, //to show intro text field at initiation
				//showAgentLoggedOnInIntro: false, //include "agents logged on" in intro
				//showAgentActiveInIntro: false, //include "active agents" in intro
				//showNumberInQueueInIntro: false, //include "number in queue" in intro
				//showIpAddressInIntro: false, //include chatters IP Address in intro
				//showVariablesInIntro: true, //include "variables" in intro
				//msgWelcomeHeader: '', //text message
				//msgWelcome: '', // text message
				//msgWelcomeFull: '', // text message
				//msgWelcomeEmpty: '', // text message
				//msgWelcomePause: '', // text message
				//msgReject: '', // text message
				//msgOptionHeader: '', // text message
				//msgOptionButton: '', // text message
				//msgOptionConfirmed: '', // text message
				//msgOptionCancel: '', // text message
				//msgGoodbyeHeader: '', // text message
				//msgGoodbye: '', // text message
				//notifyChatterOnNewMessage: false, // deactivate chatter notification
				//msgNotificationText: '', // alternative notification text
				//variables: {}, //variables to include in CRM popup
				//showSendEmail: true, //allows to show email option
				//emailSubject: 'my email subject text', //subject text to show in email
				//fromEmailDisplayName: 'Your Companies Name', //display name
				//emailPreText: 'Hello.[br][br]Thank you for speaking…',
				//emailPostText: 'If you require any further information…',
				//emailLogoUrl: 'http://mysite.com/pictures/logo.png',
				//emailLogoLink: 'http://www.puzzel.com/',
				//emailLogoAlt: 'Puzzel',
				//emailTopBackgroundColor: '#FFFFFF',
				//emailTopLineColor: '#555555',
				//emailTopBackgroundColor: '#FFFFFF',
				//emailBottomLineColor: '#555555',
				//emailTextStyle: 'font-size:9.0pt;font-family:\"Calibri\",sans-serif;',
				//emailTopBackgroundColor: '#FFFFFF',
				//onChatEnd: function(){}, // runs when closing chat window #1
				//onChatWindowClose: function(){}, //runs when closing chat window #2
				//enableSurvey: true,
				//surveyOnlyWhenConnected: true,
				//surveyMaxScore: 5, //higest rating option
				//surveyMinScore: 1, //lowest rating option
				//surveyType: 'star', //rating type, star og radio
				//msgSurveyHeader: '', //Survey header text
				//msgSurveyQuestion: '', //Survey question text
				//startChatImmediately: false
			});
		});
	</script>
</div>
</body>
</html>

Published

14/08/2020 - 16:07

Last updated

24/09/2020 - 10:40