I am trying to host my web app on localhost. I am using directline 3.0 and I want to push the messages into a window using websockets. I don't want to embed the bot. I already have the GET and POST request so I can send and receive the conversation by running the javascript files with the bearer tokens and get back the conversation running by sending and receiving messages from the bot but I want this to take place on the localhost website on a chat based window without embedding.
How can I do this? How do I link the chat window of websockets to the GET and post files so i can send the messages in real time.
I would recommend you integrate Direct Line directly (no pun intended) into you project by using the BotFramework-DirectLineJS package. This package is built specifically for communicating with a bot without using WebChat as the UI component.
There is a v3 example that you can reference. The project splits between the DirectLineBot and the DirectLineClient. The DirectLineBot demonstrates a v3 bot. You'll need to update this folder to include your v4 bot. The DirectLineClient works the same with v3 or v4. So, as your client connects, generates a token, and begins sending activities, your v4 bot should pick these up and respond accordingly. Similarly, your client should pick up the bot's responses.
At this point, you need to update your client to display the activities as they are sent and received from the user / bot.
You might also consider looking over this unofficial "plain ui" sample from the WebChat dev. It uses React however it does not rely on WebChat as the UI component. I was able to spin it up in about 5 mins. It is purposefully stripped of any styling and simply posts activities to the page as text/json objects.
You could remove the input field and configure the page to accept inputs to render on the page. It might be a useful starting place and could fit well with the above DirectLineJS option.
If none of those options are agreeable, then you will need to use Axios, Fetch, or some similar package to make your GET, POST, etc., calls between your client and bot.
Hope of help!
Related
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?
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
Create the chatbot for dialoflow messenger,
Launch a web server with NodeJs and personalize the imagen of the chatbot
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.
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.
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
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.
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.
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.
Enable the develop menu by going to Preferences > Advanced.
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
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.
You can just create an html index just like overhere on my github page. Here is 5 minute guide to github pages, Will take less than 15 minutes for the whole process.
Me and my friends are building the same app on different platforms, but with a single RESTful API built with Node.js and MongoDB. If, for instance, a user changes something, like a setting, and the setting gets updated in the database, how can I make it so other users get notifications from their app? Like one user sends a friend request to me, and then I get a
notification with the friend request. This applies to both Flutter and SwiftUI. It seems weird for me, because working with this API, it's only about requests and responses, and I don't have any idea how to make the API trigger notifications on the app. So please, tell me a way to do this, or something I can look into. Thank you.
I'm learning Dialogflow right now, and I'd like to connect a bot to some frontend web code. I know about the Node.js API for Dialogflow, but for my current purposes, it seems a little over-complicated. The only functionality I need right now is sending user input to the bot and receiving the bot's response, so it seems like setting up an entire server just to communicate with the bot is pretty excessive.
Is there a way to communicate with the bot from the frontend directly, like an HTTP API? Or is the NPM package the only option?
This is the only endpoint that you need: https://cloud.google.com/dialogflow-enterprise/docs/reference/rest/v2/projects.agent.sessions/detectIntent. As long as you get the authentication right you should be good to go.
basically I am trying to figure out a way to make a connection between my Discord Bot and my Website, I have some ideas in mind in using GET and POST methods but IDK how to use them in NodeJs nor in the website as I am still new to it, so what I want is to send a packet of data from the website after a submit button and the bot which is hosted locally with the website will receive this data and work with it.
Express is a commonly used web framework for Node that takes care of routing fairly easily. You can see their documentation here.
I'm new at Firebase, I'm starting making a project which has to include Firebase and angular2, but I am such confused about how to implement them. I don't know if a there's the need to have a Back-end implementation (like Java or NodeJs) to handle some security issues (like form validation, authentication, routing etc), or it's enough just implementing Angular2 to handle all these issues. I would be so Thankful about any helpful advice how I could implement these both technologies to build my project successfully. Thanks
first firebase is something like your backend firebase can safe get and send request as your backend apps...
and angular js will do the rest like you just said andd all the backend stuff you can handle by firebase :)
This is my simple explanation on how this 2 works together
Always keep in mind that Angular works only in front-end. Its domain is the look and feel, application events, sending data to server and anything else that has something to do with displaying data is coded in this area.
Backend services in the other hand interacts with your database, creating business logic, handling authentications, saving / sending of data and other stuff that interacts with the database is coded from here.
Now how these two interact is done by the frontend service to send HTTP requests to the Server which is the backend service. This is done by using Angulars $http service or the so called jQuery AJAX or the infamous XMLHttpRequest JavaScript native. New technologies today utilizes Web Sockets which is being used by Firebase and some other frameworks, Web Sockets offers a faster way sending / fetching data from server.
The server then interprets the data being sent and send appropriate response. For example getting user list, saving profile, getting reports, logging in, etc.. It would work in this workflow.
1) Angular sends http request to server to get list of users.
2) Backend service installed in the server then interprets the data being sent.
3) Backend service then gets list of users from the database.
4) Backend then sends the data back to the frontend service.
5) Frontend then recieves server response and displays the data to the view.
Also these two is coded separately. To have more detailed explations research about how frontend and backend services interact you can find so much resouces in Google.