AMD Support
For sites already using other versions of the libraries requires for Puzzel Chat, you may experience compatibility conflicts; hence, AMD (Asynchronous Module Definition) is supported by Puzzel’s chat platform.
In order to minimise the resource usage on the web site, and to avoid the need for a complete loading of the scripts on all pages even before the chat has started, we have split the chat script into two parts (part 1 and part 2). Intelecomchat.part1 contains the minimum code needed to be able to start a new chat or continue an ongoing chat on a page. Intelecomchat.part2 contains the rest of the code and is only downloaded and launched if a chat has been started.
Below is a home page example of an AMD site using require.js to integrate Puzzel chat. Require.js must be present somewhere on your site, for example in the folder /scripts/ in the example below. The “intelecomtracker” code relevant to the page tracker feature (see separate chapter) is optional.
<!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" />
<!-- Puzzel chat -->
<link rel="stylesheet" href="https://chat.puzzel.com/Content/Client/css/intelecom-light.css" type="text/css" />
<script src="/Scripts/require.js"></script>
</head>
<body>
<div id="someID" class="intelecomchat"></div>
<script>
require.config({
baseUrl: 'https://chat.puzzel.com/Content/Client/js/,
paths: {
'json': 'store_json2.min',
'store': 'store_json2.min',
'log': 'consolelog.min',
'moment': 'moment.min',
'modernizr': 'modernizr-2.8.3',
'jquery': 'jquery-latest.min',
'jqueryui': 'jquery-ui.min',
'knockout': 'knockout-3.5.0',
'knockout.mapping': 'knockout.mapping-latest',
'knockout.command': 'knockout.command',
'underscore': 'underscore.min',
'underscore.string': 'underscore.string.min',
'starrr': 'starrr',
'intelecomtracker': 'intelecom.tracker.min',
'intelecomchat.part1': 'intelecomchat.part1.min',
'intelecomchat.part2': 'intelecomchat.part2.min' },
shim: {
'jqueryui': ['jquery'],
'knockout.mapping': ['knockout'],
'knockout.command': ['knockout'],
'underscore.string': ['underscore'],
},
map: {
'*': {'jquery': 'jquery-private'},
'jquery-private': {'jquery': 'jquery'},
}
});
define('jquery-private',['jquery'], function (jq) {
return jq.noConflict( true );
});
require(['require', 'jquery' , 'intelecomtracker', 'intelecomchat.part1'],
function (require, $, intelecomtracker) {
$(document).ready(function() {
intelecomtracker.add(window.location.href, "Page Description", "");
$('#someID').intelecomChat({
customerKey: '12345',
queueKey: 'Q_CHAT',
showIntro: true,
delayStarterSeconds: 4,
useTracker: true,
});
});
});
</script>
</body>
</html>