Skip to main content

Multiple different chat instances

danger

It is possible to have multiple different chat instances on your website, but this is NOT recommended.
If you want multiple chats, you'll want to create different subdomains on which the chat lives. This is so the different chats don't conflict with eachother.

Problem​

Each chat has access to the localStorage and a serviceWorker. Both these systems are scoped by domain. This means that if you run multiple different chats on the same domain, they will conflict with eachother (access/overwrite eachothers data).

There is a solution for this, but again it is NOT recommended.

Solution​

Known issues
  • The "agent is typing" functionality does not work correctly with this solution. When you have 2 chats instantiated, the service workers can not differentiate the isTyping messages from the 2 different chats and thus the "agent is typing" event is triggered on both chats (instead of the one it was meant for)
  • The notifications for both chats do not appear if at least 1 of the pages, that contain the chat, are open/focused.

LocalStorage prefix​

In version 1.2.11 we added an option that enables you to define a prefix for the localStorage item's keys (more info here -> storagePrefix). Each chat instance can use a different prefix, like "chat1_" "chat2_" etc. This way the chats won't access each other's data but instead the data with their own prefix.

Now a user can have different chats on different pages within the same domain.

ServiceWorker scope​

The chat uses serviceWorkers to display notifications when the page has lost focus or is closed.
But there is a problem here, the serviceWorkers for the chats can interact with the webpages they are created on. The rule on how the serviceWorker decides if it should be able to interact with a page is done by it's "scope" option. This option defaults to the folder (and subfolders) the serviceWorker's script is located in. In version 1.2.11 this option has been made public (more info here -> scope). This scope should be set to the parent folder where your chat page is stored (doesn't have to be the direct parent, as long as the chat page is in a subfolder, more info here -> options)

So if we set the scope for each different chat, this should be fixed.

Example setup​

Folder structure
/public_html
    /app.js
    /firebase-messaging-sw.js
    /messenger.css
    /chat01
        /chat01.html
    /chat02
        /chat02.html
chat01.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Messenger 01</title>
    <script src="../app.js"></script>
    <link href="../messenger.css" rel="stylesheet">
</head>
<body>

</body>
<script>
    var config = {
        roomNumber: { IDENTIFICATION_1 },
        debug: true,
        storagePrefix: 'page01_',
        runOptions: {
            country: navigator.userLanguage || navigator.systemLanguage || navigator.browserLanguage || navigator.language,
            hideCloseBtn: false,
            infoUrl: "https://parley.nu/",
            hidePoweredByParley: true,
            downloadFileName: "chat_conversation"
        },
        interface: {
            closeAlert: true
        },
        weekdays: [
            ["Sunday"],
            ["Monday", 8.00, 22.00],
            ["Tuesday", 8.00, 22.00],
            ["Wednesday", 8.00, 22.00],
            ["Thursday", 8.00, 22.00],
            ["Friday", 8.00, 22.00],
            ["Saturday"]
        ],
        fcmConfig: {
            serviceWorkerLocation: '../firebase-messaging-sw.js',
            scope: "./"
        }
    };

    // Create the chat with the default config and the input values
    window.parleyConstructor(config);
</script>
</html>
chat02.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Messenger 02</title>
    <script src="../app.js"></script>
    <link href="../messenger.css" rel="stylesheet">
</head>
<body>

</body>
<script>
    var config = {
        roomNumber: { IDENTIFICATION_2 },
        debug: true,
        storagePrefix: 'page02_',
        runOptions: {
            country: navigator.userLanguage || navigator.systemLanguage || navigator.browserLanguage || navigator.language,
            hideCloseBtn: false,
            infoUrl: "https://parley.nu/",
            hidePoweredByParley: true,
            downloadFileName: "chat_conversation"
        },
        interface: {
            closeAlert: true
        },
        weekdays: [
            ["Sunday"],
            ["Monday", 8.00, 22.00],
            ["Tuesday", 8.00, 22.00],
            ["Wednesday", 8.00, 22.00],
            ["Thursday", 8.00, 22.00],
            ["Friday", 8.00, 22.00],
            ["Saturday"]
        ],
        fcmConfig: {
            serviceWorkerLocation: '../firebase-messaging-sw.js',
            scope: "./"
        }
    };

    // Create the chat with the default config and the input values
    window.parleyConstructor(config);
</script>
</html>