Google's dialogflow integration "dialogflow messenger" (beta)

Question

I am trying to use dialogflow's integration called "Dialogflow messenger" (This isn't the interface to microsoft messenger). The integration is at beta stage, but I would have expected it to work at this bsaic level. When I configure it, if I click "try it here" ini the dialogflow console all is well.

I copied and pasted the dialogflow messenger integration into an html page on my laptop but when I open the page I get a CORS error.

Here is what I pasted - copied from the integration item I copied and pasted the dialogflow messenger integration into an html page on my laptop but when I open the page I get a CORS error.

Here is what I pasted - copied from the integration item

<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger
  chat-icon="417a4c06-c7a0-4fb4-8b42-8d4ba853f941_x.png"
  intent="WELCOME"
  chat-title="SupaMoov"
  agent-id="xxx"
  language-code="en"
></df-messenger>

here is the error:

SupaChat%20-%20google-1.html:1 Access to XMLHttpRequest at 'https://dialogflow.cloud.google.com/v1/integrations/messenger/webhook/xxx/sessions/dfMessenger-20080482' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

How do I resolve this?

Answer 1

The problem is that you can't insert the html and open it directly from your file system. You need to open from a web server that could be with NodeJs, Java, php or whatever you want. Then put this script at the end of the body.

If it can be useful for you, I am intesively expimenting with this and I have prepared three videos in Youtube that can help to

1. Create the chatbot for dialoflow messenger,
2. Launch a web server with NodeJs and personalize the imagen of the chatbot
3. How to capture the javascript event in your web that generate the interactions with the chatbot.

I have prepare a Youtube list with those videos (in spanish but code can be understood easily) https://www.youtube.com/playlist?list=PLnNbmcjjevxs_Uj-hAeekSbb4Yb7FZERe

I hope that this could help.

Answer 2

I got in touch with Google support. Their answer is: "to work you have to run it within a web server, you can try xampp"

Not great! I was looking to convert from IBM watson to dialogflow, but the watson integration is much more sophisticated, so I'll be staying with IBM.

Answer 3

I also had this problem.

I decided to publish it on an S3 (Static Site) on Amazon. Just put the html and another files in Bucket.

Complete information here: https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html

Answer 4

You can paste the embedding code into an embed code block in a Google Site and then you will not need a web server. Here is the embed button Once you click embed, then click Embed code and paste in the code from Dialogflow.

Answer 5

You can also work on it on your local host using a simple Flask script.

from flask import Flask, request, send_from_directory,render_template
app = Flask(__name__, static_url_path='/static',template_folder='./')

@app.route("/")
def shadow():
    return render_template("shadow.html")#assuming this is the name of your html file

if __name__ == "__main__":
    app.run(host='localhost' , port=5000 , debug=True)

Then just open it at http://localhost:5000/ in your browser.

There is a dependency as this is assuming you have installed Python3 and Flask in your system.

To install Flask using Python 3.x

pip install flask

Or if you have Python2 by default, you would need to do

pip3 install Flask

This is of course, if you are working locally that is.

Answer 6

CORS is a mechanism that restricts requests coming from a different origin (domain). This is usually common when testing locally so when you deploy, the error will go away.

Usually, A request coming from a different origin is known as a cross-origin request. Cross-origin requests are vital for when your site needs to load data from other services. Essentially, CORS allows servers to specify who can access their resources and how.

-- The easiest and most reliable way to CORS in Safari is to disable CORS in the develop menu.

1. Enable the develop menu by going to Preferences > Advanced.
2. Then select “Disable Cross-Origin Restrictions” from the develop menu.

MAKE SURE YOU SWITCH IT BACK WHEN YOU FINISH TESTING.

-- I believe Firefox has a plugin you can install as well.

-- There are other more technical ways of fixing this via middleware, but this is a simple workaround.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Answer 7

The way I solve having a webchat with Dialogflow is by using the WebChat by Voximplant Kit.

Is very simple to use and allows you to connect your DF ES or CX Agent through a JS function.

You can test the platform and then having human agents connected than can answer the questions that the DF Agent can't. Don't forget about that.

Web Chat creation with Voximplant Kit in action demo video

Web Chat Documentation

JS Script to create a Function to Connect the Dialogflow Agent with a Queue created in Voximplant Kit.

I hope this simplifies your life! You can reach me out in Discord.