CODEWITHSUNDEEP
jquerycssgoogle-chromefirefoxdialogflow-es
Samadhi
Samadhi

Reputation: 46

Dialogflow messenger height customization issue on Firefox browser

I've developed a chatbot messenger using the dialogflow-ES. When I integrate it with my Wordpress website, as you can see in the attached snapshop, the height of the chat window overlaps across the site's navigation bar.

Customize the height of the chat widget of Dialogflow messenger integration

By going through this first answer in the the link above, I changed my code and could successfully achieve the customization required for my chatbot. But the problem I'm having now is the code only works on Google chrome and Edge browsers and it doesn't work on Firefox. As I went through the browser compatibility documentations, I found out that "adpotedStyleSheets" functionality doesn't work on firefox.

On Google Chrome On Firefox

This is the test server link. You can check the difference using it. http://3.137.86.206/testingbot.html

Is there any optional way to implement this, as it works in both Chrome and Firefox browsers??

Here's my code

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function() {
    window.addEventListener('dfMessengerLoaded', function (event) {
        $r1 = document.querySelector("df-messenger");
        $r2 = $r1.shadowRoot.querySelector("df-messenger-chat");
        $r5 = $r2.shadowRoot.querySelector("df-message-list");

        var sheet = new CSSStyleSheet;
        sheet.replaceSync(`div.chat-wrapper[opened="true"] { height: 420px; width: 300px; }`); //To change Height and Width
        $r2.shadowRoot.adoptedStyleSheets = [ sheet ];

        var sheet3 = new CSSStyleSheet;
        sheet3.replaceSync(`#messageList .message {font-size:0.9em !important;}
         #messageList .message.bot-message {margin-right: 20px ;} 
         #messageList .message.user-message {margin-left: 20px; margin-top: 15px; margin-bottom: 6px;} 
         .message-list-wrapper.minimized #messageList {margin-right: -15px;} 
         .message-list-wrapper.minimized #dismissIcon {padding: 1px}`); //To change margin sizes of user and bot messages
        $r5.shadowRoot.adoptedStyleSheets = [ sheet3 ];

        var sheet5 = new CSSStyleSheet;
        sheet5.replaceSync(`button#widgetIcon .df-chat-icon {height: 56px; width: 56px; left: 0px; top:0px;}`); //To change chat icon 
        $r1.shadowRoot.adoptedStyleSheets = [ sheet5 ];    
    });
});

</script>

Upvotes: 2

Views: 1034

Answers (1)

metamorfosys
metamorfosys

Reputation: 11

I have been doing a lot of research to try to solve this problem and I found a way to customize it for all browsers. The styleSheet constructor is currently only supported by Google Chrome.

I recommend this method to create CSS customizations in the chatbot components for cross browser.

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('df-messenger-loaded', function () {
        $r1 = document.querySelector("df-messenger");
        $r2 = $r1.shadowRoot.querySelector("df-messenger-chat");

        var style = document.createElement( 'style' );
        style.innerHTML = 'div.chat-wrapper[opened="true"]{height:480px;max-height:480px;}';
        $r2.shadowRoot.appendChild( style );
});

Upvotes: 1

Related Questions