Dialogflow messenger chat icon position

user_7917579 0
Viewed 758

I have successfully embedded the Dialogflow messenger in my website, however, when it is in mobile view, the chat icon kinda blocks the bottom navigation bar (please see screenshot for your preference)

Dialogflow in mobile view

Could anyone tell me how can I move up the chat icon ? I have tried different ways without success

  • Javascript: document.querySelector('df-messenger').shadowRoot.querySelector('.df-messenger-wrapper').querySelector('#widgetIcon').setAttribute('style', 'bottom:30px'); */
  • css: button#widgetIcon doesn't work too, may be because of the #shadow-root (open) enter image description here
dialogflow-es css html javascript
1 Answers

For people who want to change the position of the icon. I have found a solution using javascript

dfMessenger.addEventListener('df-messenger-loaded',  function (event) {
    dfMessenger.renderCustomText('Welcome to the new and improved version of Dexter');
    document.querySelector('df-messenger').shadowRoot.querySelector('.df-messenger-wrapper').querySelector('#widgetIcon').style.bottom = "5vh"
});
user_79175790
Related