How do I put this google dialogflow code into a typescript react app?

user_9560388 0
Viewed 417

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.

react-typescript dialogflow-es typescript google-cloud-platform javascript
1 Answers

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>
` }} />
user_45368820
Related