Customize the height of the chat widget of Dialogflow messenger integration

Question

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

Answer 1

I wasn't able to access the event, so I have prepared two separate solutions, based on the login from Anshuman Kumar's answer:

<script>
$(function() {
//  const dfMessengerChat = document.querySelector("df-messenger-chat-bubble");
//  const chatWrapper = dfMessengerChat.shadowRoot.querySelector(".chat-wrapper")
//  $(chatWrapper).css({"width": "480px", "height": "65vh"});
    
    const dfMessengerChat = document.querySelector("df-messenger-chat-bubble");
    if (dfMessengerChat) {
      const chatWrapper = dfMessengerChat.shadowRoot.querySelector(".chat-wrapper");
      if (chatWrapper) {
        chatWrapper.style.width = "480px";
        chatWrapper.style.height = "65vh";
      }
    }
});
</script>

The commended code also works. You can pick the desired solution, both of them being working solutions.

Answer 2

The chat Div is nested 2 shadowRoots deep. On top of that the CSS is a "constructed stylesheet" from JS so it is built by functions. The integrated messenger just changed recently (8/20/22) so the code above won't work anymore without a slight modification. Also the code above will wipe out any existing styles applied and just leave the height or width style in place. A better solution is to append your new CSSStyleSheet to the adoptedStyleSheets of the shadowRoot instead of just assigning the new sheet. Add height or whatever else below. You could also hook an event on this and do the math to get your height boundaries and then set height.

<script>
    window.addEventListener('dfMessengerLoaded', function (event) {
        $df_messenger = document.querySelector("df-messenger");
        $df_messenger_chat = $df_messenger.shadowRoot.querySelector("df-messenger-chat");

        var sheet = new CSSStyleSheet;
        sheet.replaceSync( `div.chat-wrapper.chat-open { width: 500px; }`);
        $df_messenger_chat.shadowRoot.adoptedStyleSheets = [ ...$df_messenger_chat.shadowRoot.adoptedStyleSheets, sheet ];

        $df_messenger.renderCustomText('Testing renderer.');
    });
</script>

Answer 3

Please add the below script in your javascript file

window.addEventListener("dfMessengerLoaded", function () {
    const dfMessengerWrapper = document.querySelector("df-messenger").shadowRoot.querySelector("df-messenger-chat").shadowRoot.querySelector(".chat-wrapper");

    dfMessengerWrapper.style.height = "600px";
    dfMessengerWrapper.style.width = "500px";
});

with this you can fix your issue by changing the height to your desired value or auto.

Answer 4

This worked for me :

//To minimise the height of chatbox
$(document).ready(function() {
    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;
    // manage box height from here
    sheet.replaceSync( `div.chat-wrapper[opened="true"] { height: 340px }`);
         $r2.shadowRoot.adoptedStyleSheets = [ sheet ];
    });
});

Source

Answer 5

I have a solution that worked for me:

window.addEventListener('dfMessengerLoaded', function (event) {
    const dfMessenger = document.querySelector('df-messenger'); 
    const style = document.createElement('style');

    const nonMobileMinWidth = 501; // Breakpoint where DF Messenger switches between mobile/non-mobile styles

    style.textContent = '@media screen and (min-width: ' + nonMobileMinWidth + 'px) { .chat-wrapper { max-height: 65% } }';

    dfMessenger.shadowRoot.querySelector('df-messenger-chat').shadowRoot.appendChild(style);
.
.
.

DF Messenger offers many helpful events that you can refer to here but it hasn't given many examples on how to use them unfortunately.

Answer 6

The below solution worked for me. Put the code in the head section of your index page

<style>
  df-messenger {
    margin: 0;
    padding: 0;
    position: fixed;
    right: 0;
    transform: translateX(50%) translateY(50%);
    bottom: -90px;
  }
</style>

Answer 7

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.

Answer 8

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">