如何为Crisp.chat注册回调事件实现聊天框开关时元素显隐（JavaScript）

Got it, let's get this sorted out for you! Here's a straightforward implementation that will hide your .customtrigger element when the Crisp chat opens, and show it again when the chat closes:

// Wait until the Crisp API is fully loaded and ready
document.addEventListener('CrispReady', function() {
  // Callback to run when the Crisp chat is opened
  $crisp.push(["on", "chat:opened", function() {
    $('.customtrigger').hide();
  }]);

  // Callback to run when the Crisp chat is closed
  $crisp.push(["on", "chat:closed", function() {
    $('.customtrigger').show();
  }]);
});

Quick Notes: #

• We wrap everything in the CrispReady event listener to make sure the $crisp object is available before we try to use it—this prevents "undefined" errors that might pop up if the Crisp script hasn't finished loading yet.
• If you need the opposite behavior (show the element when chat opens, hide it when closed), just swap hide() and show() in the two callbacks.
• If you aren't using jQuery on your site, you can switch to vanilla JavaScript: replace $('.customtrigger').hide() with document.querySelector('.customtrigger').style.display = 'none', and show() with document.querySelector('.customtrigger').style.display = 'block' (adjust the display value to match your element's default styling if needed).

内容的提问来源于stack exchange，提问作者Shane Akira