El flujo de diálogo de Google tiene este fragmento de código para integrar su chatbot en una página html.
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script> <df-messenger intent="WELCOME" chat-title="FirstTest" agent-id="xxxxxxxxxxx" language-code="en" ></df-messenger>Siento que esto debería implementarse fácilmente de manera similar a cómo puede implementar el componente aws kendra en un archivo tsx como este
<Search kendra={kendra} s3={s3} indexId={indexId} facetConfiguration={facetConfiguration} />Esto funciona, pero el fragmento de flujo de diálogo de Google no funciona.
Intente agregar el script en la etiqueta principal de la aplicación
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>Luego, usa el prop peligrosamente SetInnerHTML de React.
<div dangerouslySetInnerHTML={{ __html: ` <df-messenger intent="WELCOME" chat-title="FirstTest" agent-id="xxxxxxxxxxx" language-code="en"> </df-messenger> ` }} />