如何为Smartsupp聊天组件添加点击打开事件监听

最优实现方式（推荐） #

不需要手动查找DOM元素绑定addEventListener，Smartsupp 内置了官方事件监听API，专门用于监听聊天框状态变更，不会因为官方更新组件结构导致代码失效。
你只需要在原有初始化代码后追加事件监听逻辑即可，完整整合代码如下：

<script type="text/javascript">
    var _smartsupp = _smartsupp || {};
    _smartsupp.key = 'f*****************89';
    window.smartsupp||(function(d) {
        var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
        s=d.getElementsByTagName('script')[0];c=d.createElement('script');
        c.type='text/javascript';c.charset='utf-8';c.async=true;
        c.src='https://www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
    })(document);

    smartsupp('language','<?php echo Yii::app()->language ?>');
    
    // 监听聊天框打开事件
    smartsupp('on', 'chat:opened', function() {
        console.log("OPENED");
        // 此处可添加其他需要触发的自定义逻辑
    });
</script>

手动绑定DOM方案（不推荐） #

如果确实需要直接绑定元素点击事件，可以在Smartsupp加载完成后绑定对应按钮的点击事件，需要额外判断聊天框展开状态避免收起时也触发逻辑，示例代码如下：

smartsupp('on', 'ready', function() {
    const chatTriggerBtn = document.querySelector('#smartsupp-widget-button');
    if (chatTriggerBtn) {
        chatTriggerBtn.addEventListener('click', () => {
            // 通过body上的挂载类判断当前是否为展开状态
            if (document.body.classList.contains('smartsupp-widget-opened')) {
                console.log("OPENED");
            }
        });
    }
});

注意：该方案依赖Smartsupp的DOM结构和类名规则，如果官方后续更新组件代码，可能会出现绑定失效的问题。

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