Skip to content

Instantly share code, notes, and snippets.

@cliffordp
Created November 21, 2022 01:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cliffordp/927a92f2f2db962673d1deef48a31a0f to your computer and use it in GitHub Desktop.
Save cliffordp/927a92f2f2db962673d1deef48a31a0f to your computer and use it in GitHub Desktop.
High Level Chat Widget: anything with specified class can open the chat widget -- Demo: https://share.getcloudapp.com/d5uylPyE
// This snippet: https://gist.github.com/cliffordp/927a92f2f2db962673d1deef48a31a0f
jQuery(document).ready( function($) {
// Hide until Chat Widget loads to prevent ineffective clicks.
$( ".open-chat-widget" ).hide();
$(window).one( "LC_chatWidgetLoaded", function() {
const chatWidget = window.leadConnector.chatWidget;
// Show once Chat Widget is loaded.
$(".open-chat-widget").show();
// Open Chat Widget once clicked. Works on menu item, button, link, etc.
$(".open-chat-widget").click( function(e){
chatWidget.openWidget();
e.preventDefault(e);
});
});
});
@cliffordp
Copy link
Author

If you need to add jQuery, such as to get this code snippet working on a GHL site/funnel:

  1. get it from https://www.jsdelivr.com/package/npm/jquery
  2. select either Latest Major or Latest Minor
  3. click the Copy icon and select HTML + SRI
  4. go to your website and paste that HTML + SRI into your <head> or <body>
  5. Optional: possibly add async or defer, and, if you're a dev, reference https://idiallo.com/javascript/async-jquery for more goodies

@cliffordp
Copy link
Author

Alternatively, if you don't need jQuery for anything else, just convert the code above to vanilla JS (i.e. don't rely on jQuery)

WARNING: I haven't reviewed or attempted to use either of these, but you might want to before adding jQuery to your site.

ChatGPT came up with this conversion:

document.addEventListener("DOMContentLoaded", function() {
  // Hide until Chat Widget loads to prevent ineffective clicks.
  var openChatWidget = document.querySelectorAll(".open-chat-widget");
  openChatWidget.forEach(function(widget) {
    widget.style.display = "none";
  });

  function chatWidgetLoaded() {
    var chatWidget = window.leadConnector.chatWidget;

    // Show once Chat Widget is loaded.
    openChatWidget.forEach(function(widget) {
      widget.style.display = "block";
    });

    // Open Chat Widget once clicked. Works on menu item, button, link, etc.
    openChatWidget.forEach(function(widget) {
      widget.addEventListener("click", function(e) {
        chatWidget.openWidget();
        e.preventDefault();
      });
    });
  }

  // Listen for the "LC_chatWidgetLoaded" event only once
  window.addEventListener("LC_chatWidgetLoaded", chatWidgetLoaded, { once: true });
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment