CODEWITHSUNDEEP
javascriptcsscss-selectorshostshadow-dom
supersaiyan
supersaiyan

Reputation: 1730

How to change styling of google Dialogflow Messenger

i am trying to do some custom styling on google Dialogflow Messenger but not able to do that due to #shadow-root Below are the list of few value i can change but i need to style it more.

  --df-messenger-bot-message: #fff;
          --df-messenger-button-titlebar-color: #0041C2;
          --df-messenger-button-titlebar-color: #0041C2;
          --df-messenger-chat-background-color: #fafafa;
          --df-messenger-font-color: #000;
          --df-messenger-send-icon: #00adff;
          --df-messenger-user-message: #0041C2;
          --df-messenger-chip-border-color:#0041C2;





<div class="container">
    <script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
    <df-messenger intent="WELCOME" chat-title="test" agent-id="" language-code="en" chat-icon="vest.jpg">
      <style>
        .container {
          background-image: url("img.png");
          background-repeat: no-repeat;
          min-height: 940px;
          height: 100%;
          margin: 10px 30px;
        }

        df-messenger {
          --df-messenger-bot-message: #fff;
          --df-messenger-button-titlebar-color: #0041C2;
          --df-messenger-button-titlebar-color: #0041C2;
          --df-messenger-chat-background-color: #fafafa;
          --df-messenger-font-color: #000;
          --df-messenger-send-icon: #00adff;
          --df-messenger-user-message: #0041C2;
          --df-messenger-chip-border-color:#0041C2;
        }
      </style>
    </df-messenger>

  </div>

Upvotes: 1

Views: 10830

Answers (4)

Resiel
Resiel

Reputation: 21

Trying and trying again here is the complete solution (in addition to the customization offered by the environment css variables).

In practice, I use the "df-messenger-loaded" event to start operations only after the messenger has been loaded.

Later (to make my life easier), I hide the original main button and create my custom button to which I connect the "click" event of the original button (I also preserve the internal mechanics even in the case of updates to the original code).

I then move to the hidden directories, ignoring the overload css rules from time to time.

The real problem lies in overloading the styles of the chat window, since its content is dynamically added only when the window is opened and removed when it is closed. I solved it with a change listen (MutationObserver) that takes care to ignore the remaining customization rules for the "message list" and "user input area".

const dfMessenger = document.querySelector( 'df-messenger' );
if( dfMessenger )
{
    dfMessenger.addEventListener( 'df-messenger-loaded', function( event )
    {
        // CUSTOMIZE THE MAIN BUTTON
            $( '<button>', { class: 'dfmessenger', title: this.getAttribute( 'chat-title' ) } ).append( '<span class="material-icons">support_agent</span>' ).insertBefore( $( '...query for selecting the element before which the new button must be placed...' ) );
            $( '.dfmessenger' ).click( function( event )
            {
                event.preventDefault();
                $( '.dfmessenger .material-icons' ).text( dfMessenger.shadowRoot.getElementById( 'df-chat-wrapper' ).shadowRoot.querySelector( '.chat-wrapper.chat-open' ) ? 'support_agent' : 'south_east' );
                $( dfMessenger.shadowRoot.getElementById( 'widgetIcon' ) ).trigger( 'click' );
                return false;
            } );
            $( this.shadowRoot ).find( '#widgetIcon' ).hide();

        // CUSTOMIZE THE DIALOGUE WINDOW
            $( this.shadowRoot.getElementById( 'df-chat-wrapper' ).shadowRoot ).prepend( $( '<style>' ).text( '.chat-wrapper { ...your !important style rules... } .chat-wrapper.chat-closed { display: none; /* with this rule, the opening animation will be lost, but the ghost element that intercepts and blocks clicks to any underlying elements near the button will also disappear. */ } df-message-list { ...your !important style rules... } @media screen and ( max-width: 500px ) { .chat-wrapper.chat-open { ...your !important style rules... } }' ) );

        new MutationObserver( function()
        {
            var dialog = dfMessenger.shadowRoot.getElementById( 'df-chat-wrapper' ).shadowRoot.querySelector( '.chat-wrapper.chat-open' );
            if( dialog )
            {
                // CUSTOMIZE THE MESSAGE AREA ( AVAILABLE ONLY WHEN THE CHAT OPENS )
                    var list = dialog.querySelector( 'df-message-list' ).shadowRoot;
                    if( !$( list ).find( '> style' ).length )
                        $( list ).prepend( $( '<style>' ).text( '#messageList .message { ...your !important style rules... }' ) );

                // CUSTOMIZE THE INPUT AREA ( AVAILABLE ONLY WHEN THE CHAT OPENS )
                    var input = dialog.querySelector( 'df-messenger-user-input' ).shadowRoot;
                    if( !$( input ).find( '> style' ).length )
                        $( input ).prepend( $( '<style>' ).text( '.input-box-wrapper { ...your !important style rules... } #sendIcon:hover { fill: ...your !important color...; }' ) );
    
                var moList = new MutationObserver( function()
                {   // CUSTOMIZE SUGGESTIONS ( AVAILABLE ONLY DURING THE CONVERSATION ) 
                    $( list.getElementById( 'messageList' ).querySelectorAll( 'df-chips' ) ).each( function()
                    {
                        if( !$( this.shadowRoot ).find( '> style' ).length )
                            $( this.shadowRoot ).prepend( $( '<style>' ).text( '.df-chips-wrapper .chip { ...your !important style rules... } .df-chips-wrapper .chip:hover { ...your !important style rules... } .df-chips-wrapper a, button { ...your !important style rules... } .df-chips-wrapper .chip:hover button { ...your !important style rules... }' ) );
                    } );
                } ).observe( list, { childList: true, characterData: false, attributes: false, subtree: true } );
            }
        } ).observe( dfMessenger.shadowRoot.getElementById( 'df-chat-wrapper' ).shadowRoot, { childList: true, characterData: false, attributes: false, subtree: true } );
    } );
}

Upvotes: 0

Vaisakh Gopinath
Vaisakh Gopinath

Reputation: 123

You can download the script files locally and use, go to the first link and download the script, you can see this script imports another scripts their links are also provided download all and keep it local

https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1

https://www.gstatic.com/dialogflow-console/fast/messenger/messenger-internal.min.js?v=4

if you go to the second link you can see where all the stylings are given it's a bit crowded but if you really need to make more changes, then make changes inside this script

Upvotes: 1

Akshay
Akshay

Reputation: 391

The below solution worked for me. You can also customize your bot. Put the code in the head tag of your index page

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

Upvotes: 0

Mihir
Mihir

Reputation: 514

Just try placing style tag in your HTML head. This is something working for me.


<html>
<head>
    <title>Student helpdesk - Demo</title>
    <meta name="viewport" content="width-device-width, initial-scale=1">
    <style>
        df-messenger {
            --df-messenger-bot-message: #878fac;
            --df-messenger-button-titlebar-color: #df9b56;
            --df-messenger-chat-background-color: #fafafa;
            --df-messenger-font-color: white;
            --df-messenger-send-icon: #878fac;
            --df-messenger-user-message: #479b3d;
        }
    </style>
</head>
<body>
...

Upvotes: 0

Related Questions