Question

是否有已知的聊天机器人与 Shopify 集成，让用户可以访问 CSS 属性，例如聊天机器人窗口的高度和宽度？

我尝试修改 Hubspot 的聊天机器人大小配置，但未能成功。看起来我无法访问它。

我一直未能找到与 Shopify 集成并让用户控制页面上显示的窗口大小的聊天机器人。

因为这些聊天机器人出现在 iframe 内的最终站点上，所以之后无法修改它们的 css。

感谢您对 Stack Overflow 的帮助！

Answer 1

Kommunicate 允许覆盖 CSS 属性并更改高度、宽度、颜色等

// Todo: replace <APP_ID> with your account APP_ID from Kommunicate
       (function(d, m){
        var kommunicateSettings = 
            {"appId":"<APP_ID>","popupWidget":true,"automaticChatOpenOnNavigation":true, onInit: function() {
var style = document.createElement('style');
var classSettings = ".change-kommunicate-iframe-height{height:100%!important;width: 390px!important;box-shadow: rgba(0, 0, 0, 0.3) 0px 1.5rem 2rem!important;max-height:calc(100% - 30px) !important;}";
style.type = 'text/css';
style.innerHTML = classSettings;
document.getElementsByTagName('head')[0].appendChild(style);

KommunicateGlobal.document.getElementById('mck-sidebox-launcher').addEventListener('click',function(){ var testClick = parent.document.getElementById("kommunicate-widget-iframe"); testClick.classList.add("change-kommunicate-iframe-height"); });

KommunicateGlobal.document.getElementById('km-chat-widget-close-button').addEventListener('click',function(){ var testClick = parent.document.getElementById("kommunicate-widget-iframe"); testClick.classList.remove("change-kommunicate-iframe-height"); });
 } };
        var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
        s.src = "https://widget.kommunicate.io/v2/kommunicate.app";
        var h = document.getElementsByTagName("head")[0]; h.appendChild(s);
        window.kommunicate = m; m._globals = kommunicateSettings;
    })(document, window.kommunicate || {});

您可以使用 Kommunicate.customizeWidgetCss 函数覆盖任何 CSS 属性。请参阅chat bot widget customization docs

提供了有关如何将 Kommunicate 聊天机器人添加到 Shopify 的说明here

是否有 Shopify 聊天机器人集成可以让实施者控制聊天机器人框的大小？

1 个答案: