ARTICLE AD BOX
Problem 1 — Clicking the custom widget doesn't open the chat
The root cause is that your triggerGoogleChat() tries three approaches (showChat(), setAttribute('opened', 'true'), and a custom event) none of which are part of the official API.
According to the official docs at
openChat
"This function opens the chat. Call it on the df-messenger-chat-bubble element to open the chat."
So the correct call is openChat() on df-messenger-chat-bubble, not on df-messenger:
function triggerGoogleChat() { document.querySelector('df-messenger-chat-bubble').openChat(); }There is however a secondary issue: you have df-messenger-chat-bubble { display: none !important; } which may prevent the element from initializing properly. Hide it visually without removing it from the DOM:
df-messenger-chat-bubble { visibility: hidden; position: absolute; pointer-events: none; }Also your open/close event listeners use non-existent event names.
df-chat-open-changed
"The chat is opened or closed. Note: Only active if the df-messenger-chat-bubble is used."
Replace your two listeners with:
window.addEventListener('df-chat-open-changed', (event) => { const tab = document.getElementById('custom-ai-sidebar-tab'); tab.style.display = event.detail.isOpen ? 'none' : 'flex'; });Problem 2 — Positioning the chat window
Your existing CSS position: fixed; bottom: 16px; right: 16px on df-messenger is already the correct approach — the chat window renders relative to that element. For controlling the chat window dimensions, the official CSS variables are documented at https://docs.cloud.google.com/dialogflow/cx/docs/concept/integration/dialogflow-messenger/css.
Add these to your df-messenger rule:
df-messenger { position: fixed; bottom: 16px; right: 16px; --df-messenger-chat-window-height: 500px; --df-messenger-chat-window-width: 350px; /* your other existing variables */ }Complete corrected code:
<style> #custom-ai-sidebar-tab { position: fixed; right: 0; top: 65%; transform: translateY(-50%); background-color: #4C9176; color: #ffffff; padding: 25px 12px; cursor: pointer; border-radius: 12px 0 0 12px; box-shadow: -4px 0 15px rgba(0,0,0,0.15); z-index: 10000; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } #custom-ai-sidebar-tab span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; pointer-events: none; } #custom-ai-sidebar-tab:hover { padding-right: 20px; background-color: #3d755f; } df-messenger { z-index: 9999; position: fixed; bottom: 16px; right: 16px; --df-messenger-chat-window-height: 500px; --df-messenger-chat-window-width: 350px; --df-messenger-font-color: #000; --df-messenger-font-family: Roboto; --df-messenger-chat-background: #f3f6fc; --df-messenger-message-user-background: #d3e3fd; --df-messenger-message-bot-background: #fff; --df-messenger-titlebar-background: #4C9176; --df-messenger-chat-bubble-background: #A5C8BA; } /* Hide bubble visually but keep it in the DOM so openChat() works */ df-messenger-chat-bubble { visibility: hidden; position: absolute; pointer-events: none; } </style> <div id="custom-ai-sidebar-tab" onclick="triggerGoogleChat()"> <span>AI COMPASS</span> </div> <df-messenger id="gtp-agent" project-id="gtp-ai-compass" agent-id="ad9654d2-1a13-4ff2-b004-f22f93bd5bf3" language-code="en"> <df-messenger-chat-bubble chat-title="AI Compass"></df-messenger-chat-bubble> </df-messenger> <script> function triggerGoogleChat() { document.querySelector('df-messenger-chat-bubble').openChat(); } window.addEventListener('df-chat-open-changed', (event) => { const tab = document.getElementById('custom-ai-sidebar-tab'); tab.style.display = event.detail.isOpen ? 'none' : 'flex'; }); </script>