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

Ever wanted to customize when and how your Gist Messenger launches? This guide will instruct you on how to make the Gist Messenger open when somebody clicks a specific button or link on your website or in your app. This functionality is great if you want to keep the chat widget hidden by default and reveal it only upon specific user interactions.

Important: Make sure you have the Gist JavaScript tracking code already installed on your site.

Implementing the Messenger Trigger Code

Insert the following JavaScript code after your 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>

This script assigns the function of opening the Gist Messenger to any elements with the class "gist-open-chat". It ensures the function is executed when the document is fully loaded, and when the chat is ready. Note that it also prevents the default action of the element (for example, navigating to a link's href) from happening when clicked.

Adding the Trigger to Elements

Now you can add class="gist-open-chat" to any link or button on your site. This will make the element trigger the chat to open upon being clicked. Here's an example:

<!-- 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, enhancing the user experience and accessibility of your customer service.

Remember: While this guide is straightforward, please ensure your web developer is involved in implementing these changes to avoid any disruptions to your site.

For further customization and information on other JavaScript API methods, please refer to our comprehensive API documentation.

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.