Using your own icon or button for chat

Updated 2 months ago ​by Matt Bilotti

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” 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.

<!-- 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>
<!-- 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 do want to hide the chat bubble in the bottom corner, you’ll want to use the api.widget.hide method in our widget API help doc.

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

Not using Drift yet? Get your free account here.


Was this article helpful?


Can’t find what you’re looking for?

Talk To Us