Increase Icon Size in Dialogflow CX Messenger Integration

[lastChatbot]

Hi everyone,

I'd like to increase the size of my Dialogflow CX agent icon. I've looked at the CSS documentation and despite adding the statements below, the icon size stays the same. Any ideas as to why this is happening?

--df-messenger-titlebar-icon-width: 40px;
--df-messenger-titlebar-icon-height: 40px;
--df-messenger-titlebar-icon-padding: 0 12px 0 0;

My embed-code:

<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
<df-messenger
  location="europe-west3"
  project-id="ABC"
  agent-id="abc"
  language-code="de"
  intent="WELCOME"
  max-query-length="-1">
  <df-messenger-chat-bubble
    chat-title="Demo Chatbot"
    chat-subtitle="I am online"
    chat-title-icon="https://firebasestorage.googleapis.com/v0/b/kitchx-iris.appspot.com/o/default_avatar.jpeg?alt=media&amp;token=f5ed6ea6-eb74-4cb1-b341-945314321716">
  </df-messenger-chat-bubble>
</df-messenger>

<style>
  df-messenger {
    z-index: 99999999999999;
    position: fixed;
    bottom: 20px;
    right: 20px;
    
    /* Title icon styling */
    --df-messenger-titlebar-icon-width: 80px;
    --df-messenger-titlebar-icon-height: 80px;
    --df-messenger-titlebar-icon-padding: 0 12px 0 0;
    
    /* Font settings */
    --df-messenger-font-family: "Inter", sans-serif;
    
    /* Chat window styling */
    --df-messenger-chat-window-width: 400px;
    --df-messenger-chat-window-height: 650px;
    --df-messenger-chat-border-radius: 16px;
    --df-messenger-chat-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    --df-messenger-chat-background: #ffffff;
    --df-messenger-titlebar-icon-width: 18px;
    --df-messenger-titlebar-icon-height: 18px;
  
    /* Header styling */
    --df-messenger-titlebar-background: #2b557b;
    --df-messenger-titlebar-font-color: #ffffff;
    --df-messenger-titlebar-padding: 12px;
    --df-messenger-titlebar-title-font-size: 16px;
    --df-messenger-titlebar-subtitle-font-size: 14px;
    --df-messenger-titlebar-subtitle-font-color: #ffffff
    /* Message styling */
    --df-messenger-message-bot-background: #e8e8e8;
    --df-messenger-message-user-background: #2b557b;
    --df-messenger-message-bot-font-color: #141414;
    --df-messenger-message-bot-background: #e8e8e8;
    --df-messenger-message-user-font-color: #ffffff;
    --df-messenger-message-padding: 12px 14px;
    --df-messenger-message-border-radius: 12px;
    
    /* Input area styling */
    --df-messenger-input-box-background: #ffffff;
    --df-messenger-input-font-color: #333333;
    --df-messenger-input-placeholder-font-color: #666666;
    --df-messenger-input-padding: 10px;
    --df-messenger-send-icon-color: #28547b;
  }

  /* Chat button styling */
  df-messenger-chat-bubble {
    --df-messenger-button-background: #ffffff;
    --df-messenger-button-font-color: #ffffff;
    --df-messenger-button-size: 60px;
    --df-messenger-button-border-radius: 100%;
    --df-messenger-button-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }

  /* Mobile responsiveness */
  @Media (max-width: 600px) {
    df-messenger {
      bottom: 0;
      right: 0;
      --df-messenger-chat-window-width: 100%;
      --df-messenger-chat-window-height: 100%;
      --df-messenger-chat-border-radius: 0;
    }
  }
</style>

[ibaui · Accepted solution]

Hi @lastChatbot,

Welcome to Google Cloud Community!

It seems like you're trying to customize the size of the title icon in your Dialogflow CX agent using the custom CSS properties for the df-messenger component. However, the issue is likely due to conflicting CSS declarations. Here are some possible approaches you can consider to address the issue:

• Overriding Values: In your <style> tag, you have two conflicting declarations for --df-messenger-titlebar-icon-width and --df-messenger-titlebar-icon-height. You are setting them to 80px in one part and then to 18px in another. The later declaration (which is 18px) will override the earlier one (which is 80px), so your icon ends up being 18px. Ensure you're only declaring the --df-messenger-titlebar-icon-width and --df-messenger-titlebar-icon-height once, with the desired values.
• Style Application Location: Make sure the CSS is correctly targeting the elements. If the styles are loaded before the JavaScript that initializes the df-messenger, the custom properties might not take effect immediately. It is important to make sure the <style> block is located after the <script> that loads the df-messenger.js file.
• Incorrect Element Targeting: You might be targeting the wrong CSS custom properties. While the names seem logical, the actual CSS structure within the Dialogflow Messenger might be different. Use your browser's developer tools to carefully examine the HTML structure of the Dialogflow Messenger. Look for the exact element that displays the icon, and identify its CSS classes and styles. This will tell you the correct properties to override.
• Ensure Clear Cache: Sometimes, browsers cache older versions of your CSS. Make sure to clear your browser cache or test it in an incognito window to see the changes.

You can also refer to the following documents for more details:

• Dialogflow CX Messenger CSS customizations
• Dialogflow CX Messenger HTML customizations
• Customization Example

Was this helpful? If so, please accept this answer as “Solution”. If you need additional assistance, reply here within 2 business days and I’ll be happy to help.

[lastChatbot]

Thank you, it was your first suggestion that was leading to my icon not showing in the right size. Thanks!