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?
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: