Book a Demo

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>

Back to Top

AMD Support

Recent documents

Popular documents