Chatbot api.ai using html

html
chat
classic

#1

Api.ai #classicdiscuss

api.ai chat bot.For more…

What I did?

I embedded api.ai bot in an app made with thunkable/any app made with any appinventor platform.

Using webviewer component

Using @ILoveThunkable’s webviewer dialog extension

Setting up

1.Go to api.ai and create new bot.

2.Go to integration.

3.And connect to web demo.

4.You can see like this

5.Copy it and create an html file upload it to assets and load in webviewer or webview dialog extension.

I used @Taifun’s path to assets extension to get exact path to html file.
You can get it here http://puravidaapps.com/extensions.php

Example

Assistant.apk (2.3 MB)

Thank you
Jerin Jacob

.

.


Use api.ai with Thunkable
#2

Would it be possible to send the message to some kind of sevrer and then it will use the web component to give you a response? Also, how will alarms and other backround tasks work?


#3

If it supports, then yes.


#4

wow.its amazing thanks @Jerin_Jacob


#5

How would you do that? Would you use the web component and json


#6

Yes, web component & special tools extension’s parse method.


#8

Getting this error:

Attempt to invoke virtual method ‘void android.webkit.WebView.loadUrl(java.lang.String)’ on a null object reference
Note: You will not see another error reported for 5 seconds.

how do i fix it?


#9

Happy that you tried this method.
Thank you.
Are you trying the apk I made or apk you made?

Jerin Jacob


#10

Hi Jerin!

I got it to work, not with the embeded code inside the html file but with the code that was inside the src, I called the URL directly without saving in the assets

now I need to change the CSS of the chat and couldn’t make it work yet, I made this:

data:text/html,<style={.b-agent-demo .back-ground-color:#fff }

what is wrong?


#11

Please make a tutorial on this


#13

hi @Jerin_Jacob. Is there a way that I can save the user’s response in my database? Nice and clear tutorial, btw. thanks


#14

I will look into it.


#15

How did you put your iimage in my case the APi.ai logo is there.

and is there any way to remove that powered by dialog flow?


#16

I don’t think to remove the branding ,since its embedd , may be with JavaScript or any other trick.

And you can set your image and detials in settings near your bot
https://community.thunkable.com/uploads/default/original/2X/0/011a8345165bafcd85e3eb006631e82843b83719.png

See that setting near to my_weather


#17

I am making my own AI assistant using Dialogflow .
I imported alarm which is a pre built agent in it. Now , whenever I ask it to set an alarm , it responds with [empty response].
Please , help me solve this problem


#18

I need an aia file please.


#19

You can read the documentation, it’s simple and easy.


#20

I don’t understand how api.ai works. Can i combine all the agents into on to make the ultimate assistant.?


#21

I have made an fully functional app using dialogflow(formerly api.ai). Check it out here:


#22

congrats! I’m following the app DAD but I was told that there is a bug with sound component in the project. How did you manage to get it done? could you help me?