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>