如何更改 dialogflow Messenger 中的输入占位符？答案

【问题标题】：how could i change the input placehoder in dialogflow messenger?如何更改 dialogflow Messenger 中的输入占位符？
【发布时间】：2020-11-24 09:44:01
【问题描述】：

我需要根据客户要求更改 dialogflow Messenger 聊天机器人的占位符文本

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

我们深入审查了 HTML 自定义 https://cloud.google.com/dialogflow/es/docs/integrations/dialogflow-messenger#html-customize

和 CSS 自定义 https://cloud.google.com/dialogflow/es/docs/integrations/dialogflow-messenger#css-customize

来自谷歌云指南

如何更改占位符文本？

【问题讨论】：

您能分享一下您用来呈现网页的工具吗？可以使用如下命令更改占位符文本： 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" 你可以吗在脚本或 HTML 的
我推荐阅读这篇文章。 stackoverflow.com/questions/65215694/…

标签： dialogflow-es dialogflow-es-fulfillment dialogflow-cx

【解决方案1】：

查看您提供的文档，没有任何内置功能可以更改占位符文本。

但是，您可以使用 javascript 或 jQuery 创建代码来自定义占位符。

这是我测试的示例代码：

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

我通过浏览器开发工具获得了占位符元素。

这是示例输出：

【讨论】：