Chatlio Addon/Hack

hack.js

/* 
=======
Description: Add a dropdown to Chatlio to let our website audience select an option before entering the live-chat context to provide more information to the support agent.
Author: @orliesaurus
Credits: Thanks to John @ Chatlio for his help figuring it out!
=======
*/
// First we wait for the event to be emitted by the chatlio widget when it is fully rendered on the page
document.addEventListener('chatlio.ready', function (e) {
  
// We create the dropdown element with jQuery and add it after the email/name field before the chat starts using its unique selector.
// The value of the value field in the select element will be rendered inside Slack's individual user support channel
  
  $('<select id="chatlio_customdropdown" style="font-size: 18px; max-width: 200px; border-width: 1px"><option value="customer_service">Do you need some Customer Service help?</option><option value="expert_advice">Would you like some advice from an Expert?</option></select>').insertAfter('div.chatlio-widget-body > div > div > input[type="text"]:nth-child(3)');
  
// We grab the value of the selected dropdown option and pass it on to chatlio when the start chat button is pressed
// It is important that we populate the `userid` field (shown in the official docs). In this scenario, I opted to go with the generated uuid by chatlio `_chatlio.vsUuid()`
  
  $(".chatlio-btn").click(function(){_chatlio.identify(_chatlio.vsUuid(), {dropdown_option: document.getElementById('chatlio_customdropdown').value});});

  }, false);
// Save all this in your page or inject it with Google Tag Manager or simil. (dont forget the <script></script> tags if you do that).