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 1 · 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

3,190
22
17
38

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 -1 · Answer 4 · 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
3
25

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

score -2 · Answer 5 · 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

163
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

5 Answers5

Linked