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

Please refer to the below issue: https://stackoverflow.com/questions/61247463/how-to-change-styling-of-google-dialogflow-messenger — Muhammad Farhan, Aug 13 '20 at 12:15
I don't know why you have mentioned this issue even it doesn't relate to the main issue of this question — Jawwad Turabi, Aug 17 '20 at 11:25

score 2 · Answer 1 · edited Nov 03 '20 at 11:07

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.

score 2 · Answer 2 · edited Oct 08 '21 at 14:48

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.

This is the best option (Tested), just to make to close the addEvenListener function property. — wilo087, Oct 12 '21 at 20:56

score 0 · Answer 3 · edited Oct 20 '21 at 08:06

0

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

edited Oct 20 '21 at 08:06

Elikill58

4,050
24
23
45

answered Oct 20 '21 at 06:57

Techlar

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 20 '21 at 08:11

score 0 · Answer 4 · answered Aug 22 '22 at 08:50

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.

akuma6099 · Answer 5 · 2022-08-25T15:44:07.520

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>

score 0 · Answer 6 · answered Aug 24 '23 at 14:27

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.

score -1 · Answer 7 · answered Jul 27 '21 at 17:19

-1

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>

answered Jul 27 '21 at 17:19

Akshay

401
1
5
29

This makes the chat-icon dissapear. – Anshuman Kumar Oct 07 '21 at 09:43

score -2 · Answer 8 · answered Aug 13 '20 at 22:26

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

answered Aug 13 '20 at 22:26

Aldo González Ramírez

193
5

Hello Jawwad, when you say this doesn't work, do you mean you got any errors? it had no effect? Are you applying any other CSS properties besides the ones above? If you could share an snippet of how your CSS properties look like in your HTML code, that would be helpful. – ch_mike Aug 25 '20 at 15:27
It's simply had no effect. I have tried as you posted in this comment – Jawwad Turabi Sep 29 '20 at 13:37

Customize the height of the chat widget of Dialogflow messenger integration

8 Answers8

Linked