how could i change the input placehoder in dialogflow messenger?

Question

I need to change the placeholder text of the dialogflow messenger chatbot for customer requirements

<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger
  intent="WELCOME"
  chat-title="gestion de citas"
  agent-id="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
  language-code="es"
></df-messenger>

We have review deeply HTML customizations https://cloud.google.com/dialogflow/es/docs/integrations/dialogflow-messenger#html-customize

and CSS customizations https://cloud.google.com/dialogflow/es/docs/integrations/dialogflow-messenger#css-customize

from google cloud guides

How would it be possible to change the placeholder text?

Can you please share the tools you are using to render your web-page?. The placeholder text can be changed using a command like: document.querySelector("body > df-messenger").shadowRoot.querySelector("div > df-messenger-chat").shadowRoot.querySelector("div > df-messenger-user-input").shadowRoot.querySelector("div > div.input-box-wrapper > input[type=text]").placeholder = "THE-TEXT-YOU-WANT-TO-ADD” Is it possible for you to embed javascript code like the above one in a script, or in a HTML’s — quimiluzon, Nov 25 '20 at 15:21
I recommend going through this post. https://stackoverflow.com/questions/65215694/dialogflow-messenger-height-customization-issue-on-firefox-browser — metamorfosys, Feb 23 '22 at 21:23

score 0 · Accepted Answer · edited Nov 25 '20 at 15:49

Looking at the documentation you’ve provided, there isn’t any built-in functionality to change the placeholder text.

However, you can create code to customize the placeholder using javascript or jQuery.

Here’s a sample code I tested with:

<script>
setTimeout(function(){ document.querySelector("df-messenger").shadowRoot.querySelector("df-messenger-chat").shadowRoot.querySelector("df-messenger-user-input").shadowRoot.querySelector(".input-box-wrapper > input").placeholder="New placeholder text” }, 1000);
</script>

I got the placeholder element by looking into the Browser Developer tools.

Here's the sample output:

how could i change the input placehoder in dialogflow messenger?

1 Answers1