How to display a custom message to the customer after chat

Sometimes you want to display a custom message to the customer when your chat is over.


In this case, you can use a plugin called 'Live Chat Tracking'.

- find the plugin in your agent panel > Configuration > System > Plugins

- activate the plugin by clicking on the 'Activate' button next to it

- when the plugin is activated, the agent panel will reload. Then navigate back to the plugins section and click on the 'Configure' button

- popup with the plugin's setting will show up. Use the field called 'Track End Chat'.


In the 'Track End Chat' field enter the following code:

try {
var node = document.createElement("div");
node.setAttribute("id", "modal_plugin");
node.innerHTML =  `<div id="modal_blocker" style="position: fixed; top:0; left:0; width:100%;height:100%;opacity:0.6;z-index:999998;background:#000;"></div>
<div id="modal_window" style="z-index:200; position:fixed; left:50%; top:50%; width:500px; height:600px; z-index:999999; background:#fff; border:3px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5);">

<iframe src="https://URL_TO_YOUR_FORM_OR_WEBSITE" width="500" height="600" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

<div id="modal_close" style="position:absolute; top:0; right:0; margin-top:-30px; margin-right:-30px; cursor:pointer; color: #fff; font-size: 25px; font-family:Arial; display: inline-block; padding:5px;">&#x2716;</div></div>`;
    var modalWrapper = document.getElementById("modal_blocker");
    var modalWindow  = document.getElementById("modal_window");                                = (-modalWindow.offsetHeight)/2 + "px"; = (-modalWindow.offsetWidth)/2 + "px";
    var closeModal = function(e)
      document.getElementById("modal_close").removeEventListener("onclick", closeModal);
      document.getElementById("modal_blocker").removeEventListener("onclick", closeModal);
      if (document.getElementById("modal_plugin") != null) document.getElementById("modal_plugin").remove();

    document.getElementById("modal_close").addEventListener("click", closeModal, false);
    document.getElementById("modal_blocker").addEventListener("click", closeModal, false);

  } catch (e) {

The code is triggered after a customer or agent ends the chat and displays a popup window. In this popup, you can display any content you want – just replace the 'bold' line with the iframe to your own HTML code.

In our example, we are displaying the iframe which loads a form. It looks like this:


NOTE: Please note that after the chat is closed there are still some calls running in the background. These calls have to be finished and then the plugin triggers our code and displays the popup. So the popup is not displayed immediately, but with a few seconds delay!