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

【问题标题】：Is there a Shopify chatbot integration that gives the implementer control over the chatbot box size?是否有 Shopify 聊天机器人集成让实施者可以控制聊天机器人框的大小？
【发布时间】：2021-01-18 20:26:01
【问题描述】：

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

我尝试修改 Hubspot 的聊天机器人大小配置，但失败了。看起来我无法访问它。

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

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

感谢您对 Stack Overflow 的帮助！

【问题讨论】：

标签： css shopify integration chatbot hubspot

【解决方案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 获得

【讨论】：