Chat avatar icon beside the DF-messenger title

[Trushali Utekar]

Hi, 

I am integrating the bot with DF_messenger, my requirement is to add the bot-avatar icon or any icon or image in front of the df-messenger chat title.

So how can I implement this?

Thanks,

Trushali.

============================================================================================================================

Disclaimer:  This message and the information contained herein is proprietary and confidential and subject to the Tech Mahindra policy statement, you may review the policy at http://www.techmahindra.com/Disclaimer.html externally http://tim.techmahindra.com/tim/disclaimer.html internally within TechMahindra.

============================================================================================================================

[Jun Lu]

Hi Trushali,

You can customize your chat icon for your Dialogflow Messenger through the df-messenger HTML element (specifically the chat-icon attribute) as per [1], and please keep in mind that "This field must be a public URL. The icon size should be 36px by 36px.". If you want to change the location of your Dialogflow messenger icon, you can look into the StackOverflow thread regarding this at [2]. 

[1] https://cloud.google.com/dialogflow/es/docs/integrations/dialogflow-messenger#html-customize

[2] https://stackoverflow.com/questions/61195890/change-the-location-of-dialogflow-messenger-icon

[Trushali Utekar]

Thanks, Jun Lu for the response. I referred to both links. 

I am using the below script code to make changes in the df-messenger titlebar, but it is not working.

$(document).ready(function() {

    

  // YOUR CODE (NOT RELATED TO DIALOGFLOW MESSENGER)

  window.addEventListener('dfMessengerLoaded', function (event) {

      $r1 = document.querySelector("df-messenger");

      $r2 = $r1.shadowRoot.querySelector("df-messenger-chat");

      $r3 = $r2.shadowRoot.querySelector("df-messenger-titlebar"); 

      var sheet = new CSSStyleSheet;

      sheet.replaceSync( `title-wrapper[opened="true"] { color:red; }`);

      $r3.shadowRoot.adoptedStyleSheets = [ sheet ];

      // MORE OF YOUR DIALOGFLOW MESSENGER CODE

  });    

});

So I need to ask is it possible that we can customize it using external javascript / jquery.

[Jun Lu]

Hey Trushali,

From the public documentation at [1] shared in my previous message, it looks that you can not customize chat icon using external JavaScript/jQuery. 

[1] https://cloud.google.com/dialogflow/es/docs/integrations/dialogflow-messenger#html-customize