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;
<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&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>
Solved! Go to 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:
You can also refer to the following documents for more details:
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.
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:
You can also refer to the following documents for more details:
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.
Thank you, it was your first suggestion that was leading to my icon not showing in the right size. Thanks!
User | Count |
---|---|
2 | |
1 | |
1 | |
1 | |
1 |