Start Chat with Any Link or Button

Are you looking to make the Drift chat sidebar open when somebody clicks on a button or link on your website or in your app?

You can use some Drift JavaScript to do cool things like keep the chat widget hidden by default on your page and trigger the chat sidebar to display when an icon or text on a page is clicked.

Launch a specific playbook

Method 1: Via Driftlink

Each Playbook has a specific #DriftLink that when placed into the URL of a page, that playbook will launch.

Playbooks with #Driftlinks are only available on the PRO plan and higher.

You can place this in the URL when a button is clicked with a few lines of JavaScript

const button = document.findElementById('button-to-launch-drift')
button.addEventListener('click', function() {
  location.hash = 'MY_DRIFT_LINK'
})

Method 2: Via direct interaction call

Using this method ignores playbook statuses

If you use startInteraction() for a playbook that is off or deleted, it currently still starts that playbook's flow.

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.

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.

To use this method of starting a leadbot playbook, you'll need to make sure Drift is loaded, and also that it's ready.

<script>
drift.on("ready", function(api) {
  drift.api.startInteraction({ interactionId: XXXXXX, goToConversation: true }) /* <-- your playbook's interaction ID here */
});
</script>

The parameter goToConversation is used to decide whether the bot should open the sidebar or just show the message preview when firing. True will open the sidebar on playbook fire.

Be sure Drift is loaded before trying to execute the function. This snippet will likely have to be placed after your Drift installation snippet (the one containing drift.load)

Launch a chat from any button

If you want to scale this up, you can place the following JavaScript onto your site and any button with the class drift-open-chat will launch Drift.

Make sure to place it after the Drift install snippet

<!-- place this script tag after the Drift embed tag -->
<script>
  (function() {
    /* Add this class to any elements you want to use to open Drift.
     *
     * Examples:
     * - <a class="drift-open-chat">Questions? We're here to help!</a>
     * - <button class="drift-open-chat">Chat now!</button>
     *
     * You can have any additional classes on those elements that you
     * would ilke.
     */
    var DRIFT_CHAT_SELECTOR = '.drift-open-chat'
    /* http://youmightnotneedjquery.com/#ready */
    function ready(fn) {
      if (document.readyState != 'loading') {
        fn();
      } else if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', fn);
      } else {
        document.attachEvent('onreadystatechange', function() {
          if (document.readyState != 'loading')
            fn();
        });
      }
    }
    /* http://youmightnotneedjquery.com/#each */
    function forEachElement(selector, fn) {
      var elements = document.querySelectorAll(selector);
      for (var i = 0; i < elements.length; i++)
        fn(elements[i], i);
    }
    function openSidebar(driftApi, event) {
      event.preventDefault();
      driftApi.sidebar.open();
      return false;
    }
    ready(function() {
      drift.on('ready', function(api) {
        var handleClick = openSidebar.bind(this, api)
        forEachElement(DRIFT_CHAT_SELECTOR, function(el) {
          el.addEventListener('click', handleClick);
        });
      });
    });
  })();
</script>

Now you can add class="drift-open-chat" to any link or button on your site and it will start the chat. Here's an example below:

<!-- simply add 'class="drift-open-chat"' to any link on your site -->
<p>
  We love our customers, please feel free to
  <a class="drift-open-chat" href="http://docs.drift.com/">chat with us</a>.
</p>

In the above example, if a visitor were to click โ€œchat with usโ€ the Drift sidebar will automatically pop open.

If you want to hide the chat bubble in the bottom corner, youโ€™ll want to use the api.widget.hide() method.

If you have any questions, let us know via chat. Weโ€™re here for you!

Start Chat with Any Link or Button


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.