Load Support Chat Client with Conversation Events

Some clients rely on other chat clients like Zendesk or Intercom for their support needs. If other chat systems are also used on your site, use these examples below to hop a user from one tool to another

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>

Salesforce Chat

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

// load Drift and Salesforce Chat here
// if Drift should fire first, hide Salesforce Chat -- if the other way, hide Drift.
<script>
  window.drift.on("conversation:buttonClicked", function(data) {
    console.log(data);
    if (data.buttonBody == "Chat with support") {
      drift.unload();
      liveagent.startChat('XXXX0000000XXXX'); // change for your Salesforce Chat ID
    };
  });
</script>

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>

Ada

Be sure to add your unique Ada handle for this implementation.

<!-- Ada implementation - place above your Drift Javascript snippet-->
<script id="__ada" data-lazy data-handle="your-handle-name"
  src="https://static.ada.support/embed2.js">
</script>

<script>

  //Your Drift embed snippet goes here

  //Include the snippet below within the same <script> tags as your Drift Javascript Snippet
  window.drift.on("conversation:buttonClicked", function (data) {
      console.log(data);
      if (data.buttonBody == "I need support") {
        console.log("Button clicked");
        window.adaEmbed.start({
          handle: "your-handle-name",
          metaFields: {
            username: "Ada Lovelace",
            phone_number: "123-456-7890"
          },
          chatterTokenCallback: (chatter) => console.log(chatter)
        });
        window.adaEmbed.toggle();
        window.drift.hide();
     };
  });
</script>