Customize the height of the chat widget of Dialogflow messenger integration

问题

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 have read out the official documentation for CSS customization of this chat widget but I couldn't found any useful method to handle this issue. I have tried with different browsers like firefox, chrome, safari, etc. But the issue remains the same. The documentation provides only the following CSS variables which don't help out too much.

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

回答1:

read this. I found it helpful

this works for me:

$(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
    });
});

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

回答2:

You could try resizing the height of the container where the widget chat displays using CSS

With CSS, you can define the height, max-height and min-height of an HTML element like:

df-messenger {
    height: 300px;
    max-height: 90%;
    min-height: 30%;
}

Also, please embed the meta tag to allow responsivenes:

<meta name="viewport" content="width-device-width, initial-scale=1">

来源：https://stackoverflow.com/questions/63394248/customize-the-height-of-the-chat-widget-of-dialogflow-messenger-integration