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>`;
document.body.appendChild(node); 
    var modalWrapper = document.getElementById("modal_blocker");
    var modalWindow  = document.getElementById("modal_window");                                    
    modalWindow.style.marginTop = (-modalWindow.offsetHeight)/2 + "px";
    modalWindow.style.marginLeft = (-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: