Home > Customizations > Chats > Chat window > How to display a custom message to the customer after chat

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:

 

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!

 

Ready to try LiveAgent?

It's free for the first 14 days! No credit card required.

Get Started
We work well with others...
Magento Joomla Wordpress Mailchimp
Contact us

support@liveagent.com

+1-800-811-6590 (Toll Free in USA & Canada)

+421 2 33 456 826 (European Union & Worldwide)

Quality Unit, LLC 616 Corporate Way, Suite 2-3278 Valley Cottage, NY 10989

Stay in touch
Blog Google+
© 2004-2020 LiveAgent.com, All rights reserved