Search code examples
javascripthtmlcssdialogflow-es

Dialogflow messenger chat icon position

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
Solution

  • 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"
});