Dev.DriftGuides

Start a Chat Programmatically

Suggest Edits

With a bit of JavaScript and our APIs, you can take your site to the next level by explicitly telling the chat when and how to fire on your web pages or application.

In this tutorial, we’re going to take a look at one of the ways you can start a conversation by clicking on a link on your page.

Before we start, you always want to make sure Drift has been installed properly. If you haven’t already, make sure to review our “Installing Drift” section to learn more.

Launching a specific playbook via StartInteraction call

All leadbot playbooks now also come with an interaction ID that allows you to programmatically start up the playbook, without having to change the URL to the driftlink.

1221

📘

Null interaction IDs

If your playbook has a null interaction ID value, your playbook is in a Draft state. Save the playbook or revert your changes to see the interaction ID.

Now that you know where to find a specific playbook’s interaction call, we’ll want to add some HTML to your page to create a hyperlink on your site

<p>Looking to chat with us, click <a class="drift-open-chat" href="#">here</a> and say hello!</p>

We now have our hyperlink in place where the text “here” would be what the visitors click to engage in conversation. We’re just missing our JavaScript and the StartInteraction call we talked about to fire the playbook. 

drift.on('ready', function(api) {
    document.querySelector('.drift-open-chat')
        .addEventListener("click", function(){
          drift.api.startInteraction({ interactionId: xxxxxxx }); /* <-- your playbook's interaction ID here */
        })
      })

You can see here we’re waiting for Drift to initialize with drift.on(‘ready), then selecting the DOM node .drift-open-chat from the class we defined in our HTML. We also added an event listener that executes our interaction call only when the hyperlink has been clicked.

🚧

Interaction ID

Remember to replace the interactionId in the example with your playbook’s interaction ID

That’s it! Simple right? Here is the complete code example and what it should look like.

<p>Looking to chat with us, click <a class="drift-open-chat" href="#">here</a> and say hello!</p>

<!-- Start of Async Drift Code -->
<script>
"use strict";

!function() {
  var t = window.driftt = window.drift = window.driftt || [];
  if (!t.init) {
    if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
    t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ], 
    t.factory = function(e) {
      return function() {
        var n = Array.prototype.slice.call(arguments);
        return n.unshift(e), t.push(n), t;
      };
    }, t.methods.forEach(function(e) {
      t[e] = t.factory(e);
    }), t.load = function(t) {
      var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
      o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
      var i = document.getElementsByTagName("script")[0];
      i.parentNode.insertBefore(o, i);
    };
  }
}();
drift.SNIPPET_VERSION = '0.3.1';
drift.load('xxxxxxxxxxx'); // <-- Your embed ID goes here

// Custom JS and startInteraction call here
drift.on('ready', (api) => {
        document.querySelector('.drift-open-chat').addEventListener("click", function(){
          drift.api.startInteraction({ interactionId: xxxxxxx }); // <-- Your interactionId goes here
        })
      })


</script>
<!-- End of Async Drift Code -->

StartInteraction Options

Below are the possible options you can provide to the widget when firing a playbook programmatically via window.drift.api.startInteraction(...)

window.drift.api.startInteraction({
    interactionId: 12345, //(number, required) The interaction ID tied to the playbook to be fired,
  goToConversation: true, //(boolean, default: true) Determines if the playbook should auto-expand the chat when fired. Set this to false if you want the playbook to show a preview message instead of popping it open.
  replaceActiveConversation: true //(boolean, default: true) Determines if the playbook should replace an already existing conversation. Set to false if you do not want the playbook fired over an existing conversation.
});

📘

Multiple clicks

If you're expecting the user to click a button multiple times (support link vs book a demo), we recommend using startInteraction. Additionally, we've noticed this method works better than Driftlinks in Firefox. If you're expecting a 'one-time' click, Driftlink is the way to go.

Updated 3 months ago