自定义Dialogflow Messenger集成聊天小部件的高度 [英] Customize the height of the chat widget of Dialogflow messenger integration

问题描述

我正在使用Dialogflow的新网站集成"Dialogflow Messenger".一切正常，但是当我单击聊天窗口小部件时，聊天窗口的高度超过了浏览器窗口的大小，如您在所附快照中所见.

I am using Dialogflow's new website integration "Dialogflow messenger". Everything is working fine but when I click on the chat widget the height of the chat window is exceeding the size of the browser window as you can see in the attached snapshot.

我已经阅读了正式的

如果有人可以提供解决方案，我会鼓励.谢谢

I will encourage if anyone can provide a solution to this. Thank you

推荐答案

阅读此内容.我发现它很有帮助

这对我有用:

$(document).ready(function() {
    
    // YOUR CODE (NOT RELATED TO DIALOGFLOW MESSENGER)

    window.addEventListener('dfMessengerLoaded', function (event) {
        $r1 = document.querySelector("df-messenger");
        $r2 = $r1.shadowRoot.querySelector("df-messenger-chat");
        $r3 = $r2.shadowRoot.querySelector("df-messenger-user-input"); //for other mods

        var sheet = new CSSStyleSheet;
        sheet.replaceSync( `div.chat-wrapper[opened="true"] { height: 400px }`);
        $r2.shadowRoot.adoptedStyleSheets = [ sheet ];

        // MORE OF YOUR DIALOGFLOW MESSENGER CODE
    });
});

您还可以更改其他详细信息，但要小心！Shadow DOM可能很棘手.

You can also change other details, but be careful! Shadow DOM can be tricky.

这篇关于自定义Dialogflow Messenger集成聊天小部件的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！