Load Support Chat Client with Conversation Events

Some clients rely on other chat clients like Zendesk or Intercom for their support needs. Drift does not currently have full support capabilities, so it makes sense to use both in certain situations.

With additional JavaScript and our APIs, you can explicitly tell Drift when and how to launch a new chat client on your web pages or application.

In this tutorial, we’re going to take a look at one of the ways you can collapse Drift on a button click, and open your support chat client.

Zendesk

One of the most popular support clients is Zendesk. In the code below, we're going to listen specifically for a button with the text "Chat with support".

// If you're putting this directly below your Drift install code make sure to wrap it in a "<script>" tag.

zE(function() {
  $zopim(function() {
    $zopim.livechat.button.hide(); // Hide the Zendesk widget
  });
});

window.drift.on("conversation:buttonClicked", function(data) {
  console.log(data);
  if (data.buttonBody == "Chat with support") {
    drift.unload();
    $zopim.livechat.button.show();
    $zopim.livechat.window.show();
    // The next 5 lines are optional depending on what you want to do within Zendesk
    $zopim.livechat.say("Hi, there I need support and I came from Drift chat. I can either dump the transcript here or in the notes.");
    $zopim.livechat.concierge.setName('Chat transferred from Drift');
    // $zopim.livechat.setName();
    // $zopim.livechat.setEmail();
    // $zopim.livechat.setNotes();
  };
});

In this code snippet, the first function makes sure to hide the Zendesk widget. We need to be sure there's no conflict with two widgets on the page. Second, we need to listen for the button click with the text "Chat with support". You can change this text to be whatever you like, but it needs to match your playbooks' button exactly.

The last 5 lines are optional, and takes advantage of some other Zendesk-specific customization.

Intercom

Another well-known support client is Intercom. Below, we'll use the same methodology as before- listen for a button click, collapse Drift, and open Intercom.

<script>
  Intercom('shutdown');
    window.drift.on("conversation:buttonClicked", function(data) {
      console.log(data);
      if(data.buttonBody == "Chat with support") {
        drift.unload();
        Intercom('boot'); //Intercom-specific call
        Intercom('showNewMessage'); //Intercom-specific call
      };
    });
</script>

LiveAgent

To successfully switch to LiveAgent, you'll need to use your LiveAgent ID in the JavaScript.

// load Drift and LiveAgent here
// if Drift should fire first, hide LiveAgent -- if the other way, hide Drift.

window.drift.on("conversation:buttonClicked", function(data) {
  console.log(data);
  if (data.buttonBody == "Chat with support") {
    drift.unload();
    liveagent.startChat('XXXX0000000XXXX'); // change for your live agent ID
  };
});

ServiceNow

For customers using version 'Rome' of ServiceNow, Drift can execute a handoff to their chat tool. You can replace the 'moduleID' in the script below to alternate between loading a Virtual Agent or Live Chat.

//Install this right behind the normal Drift JavaScript snippet
<script src="https://chatdemo.service-now.com/scripts/sn_csm_ec.js?v=3.1"></script>
<script>
  function chatFeatureContext(){
    return {
      feature: "CHAT",
      openOnLoad: true,
      params: {
        "language": "en"
      }
    }
  };
</script>

//This listens for a specific button click to load ServiceNow
<script type="text/javascript">
    window.drift.on("conversation:buttonClicked", function(data) {
      console.log(data);
      if (data.buttonBody == "ServiceNow Handoff") {
        drift.unload();
        SN_CSM_EC.init({
         moduleID: "https://chatdemo.service-now.com/#e43a338c879e34100b4d916cebb35cf",
         loadFeature: chatFeatureContext(),
        });
      };
    });
</script>

Did this page help you?