Google Dialog flow has this code snippet for integrating your chatbot into an html page.
<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>
I feel like this should easily be implemented similarly to how you can implements aws kendra component into a tsx file like this
<Search
kendra={kendra}
s3={s3}
indexId={indexId}
facetConfiguration={facetConfiguration}
/>
This works but the google dialog flow snippet doesn't work.
Try adding the script in application's head tag
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
Then, use react's dangerouslySetInnerHTML prop
<div dangerouslySetInnerHTML={{ __html: `
<df-messenger
intent="WELCOME"
chat-title="FirstTest"
agent-id="xxxxxxxxxxx"
language-code="en">
</df-messenger>
` }} />