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 the Widget API 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.

For example, you can add a “Contact Us” link in the top navigation of your website and once somebody clicks on that, it will open the Drift sidebar to start a new conversation.

Below is an example of what you can do with any old link on your website to display the chat sidebar by default.

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