How I do launch the Gist Messenger on clicking a link?

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

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

Make sure to place the following code after the Gist tracking snippet

<!-- place this script tag after the Gist tracking code -->
<script>
(function() {
    /* Add this class to any elements you want to use to open Gist chat
     *
     * Examples:
     * - <a class="gist-open-chat">Questions? We're here to help!</a>
     * - <button class="gist-open-chat">Chat now!</button>
     *
     * You can have any additional classes on those elements that you would like.
    */
    var GIST_CHAT_SELECTOR = '.gist-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);
    }

    /* Code to trigger the chat when clicking a link or a button */
    ready(function() {
        document.addEventListener('gistChatReady', function () {
            forEachElement(GIST_CHAT_SELECTOR, function(element) {
                element.addEventListener('click', function(event) {
                    event.preventDefault();
                    /* comment the below line and uncomment the next time, if you want to pre fill the response box with some text */
                    gist.chat("navigate", 'newConversation');
                    //gist.chat("navigate", "newConversation","INSERT PRE-POPULATED CONTENT");
                    return false;
                });
            });
        });
    });
  })();
</script>

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

<!-- simply add 'class="gist-open-chat"' to any link on your site -->
<p>
    We are here to help you out. Please feel free to
    <a class="gist-open-chat" href="https://docs.getgist.com/">chat with us</a>.
</p>

In the above example, if a visitor were to click “chat with us” the Gist Messenger will automatically pop open.

To learn more about this and other JavaScript API methods, here's a detailed guide.

Need Help?

If you have any further questions, please start a Live Chat. Just "Click" on the Chat Icon in the lower right corner to talk with our support team.