Hi guys, I have a custom rasa chatbot api that I wanted to connect with my bubble front-end. The api was developed separately using Rasa and on AWS servers. I have used the api before in an Angular app so it works for sure. But when using API connector on bubble I’m a bit lost in terms of how to connect it to the front-end. The API has been connected so now I just need to assign the workflows so the chat interface can send messages via the API to the AI bot and then return bot messages to the user.
- This is the current front-end which is using a basic chat interface. In normal chats we simply connect the data type with the interface and it stores data etc. But I’m not sure how to approach this with an API.
- I have spent few hours trying to figure out workflows but not much helped. This is the previous attempt I tried but at this point I removed the older workflows as it wasnt working.
- I also played around with few data types and elements in it including POST & GET request within the database. But no luck. As you can see with things being all over the place, I’m a bit lost.
I have used bubble a bit before but never had to use an API connector until recently. I would appreciate any ideas on how to make the API connection work with the chat interface. Thanks!
What is the data structure returned? Can you share a link to the editor?
This is the current API return…
I’ll need to check with the project admin as it was a stealth project for someone. In the meantime, if you have any suggestions that would be great!
So when someone sends a message, I’m assuming via a post request, is there someone replying or is it just a bot that sends a response to the post request? If the response is an immediate response to the api call you are making then I think the chat messages just need to be saved in the database with a field that describes them as either outgoing or incoming, afield that contains the text of the message, a field the date/time, and a field for the user. When someone types a message and hits the send button it should create a message in the database with the text value in the input as the “message” and the “direction” as “outgoing”. Then in that same workflow you could create another message with the results from the previous step. Then in that same workflow you could create another message with the results from the previous step and save the direction of that message as incoming. Then on your design it just needs to be a repeating group of messages from the database and have conditional cells that hide/show based on the incoming/outgoing field.
Yes, when someone sends a message then the custom bot will reply instantly through the api. Some of the responses are also button based which means the bot might ask the user to select some option based on a question it asked and The other times it’s just a normal chat conversation text based.
A live conversation example from a separate angular deployment. The image where it says “Finance”. There were 6 button choices there like the other image and once the user selects a particular option then the AI then diverts the conversation to that topic. So it mixes choice based responses and normal text.
I tried what you suggested as much as I could but had some confusion on these points:
“the chat messages just need to be saved in the database” - Will we save both incoming and outgoing? If so will they be under one datatype and just be different fields. or will it need two separate datatpe and fields for incoming and outgoing respectively.
I was able to setup the outgoing database action where the sent message get’s saved in the database. But not sure how to setup the POST request workflow so the message goes from the outgoing action to the post request too.
"and the “direction” as “outgoing”. - not sure what you meant by this? Won’t it be saved into the type I set anyways, unless I misunderstand what oyu meant by “direction”.
“save the direction of that message as incoming” - But where do I add the workflow to call the API? As without it it’ll be just a normal chat workflow.
The GET request is related to the conversation history so its more database related and pulling chat history.
Is this what you meant for the database?