Bubble & ChatGPT - Chatbot opening message

Adding an Opening Message to Your Chatbot

We've received this question multiple times since releasing our Bubble and ChatGPT videos. And that is on the topic of how can I insert an opening question or an opening statement into the chat conversation without that actually being part of what's sent to ChatGPT. For example, a welcome message from the AI bot I'm creating asking the user to ask it a question. Now, we've received this question multiple times in the comments and via email. So please do leave a comment, like and subscribe. We read through every comment and we reply it to them in as much detail as we can. But let's move on. How do we add in an opening message into our chatbot?

Reviewing the Existing Chatbot Setup

So I'm gonna go back and just examine what I did to create this chatbot, which is we have a send button, which creates a message. This is the message that the user inputs. We create both a JSON version and a text human readable version. We reset our multi-site input. We send all of our messages so that we have that historical conversational awareness. And then we create a new message. And this is the response that OpenAI gives us. I've also got a simple way of navigating through conversations that's done by clicking here and displaying my conversation data into a group. I also have a mechanism in place so that when the page loads, if the conversation count is zero, it creates a new conversation. And if the conversation count is not zero, then the conversation shown is the repeating groups first item, so the first conversation in the repeating group.

Creating a Custom Event for the Opening Message

So when the page loads, let's say I'm on this one here. When the page loads, we go back to what is the capital of France. And it's important to explain that because of what I'm gonna demonstrate next, which is how we insert that opening message. So I'm gonna create a custom event because I want this to happen on two occasions, both page loads and conversations empty and when a new conversation is created. So I'm gonna say this is gonna be, I call it send first message from bot to user. And this is going to be create a new thing, create a message.

Setting Up the Custom Event

I'm gonna check in here how I'm, okay, so my message has a field called conversation. So I need to pass in conversation into my custom event here. Spell that correctly. So we create a new message and don't actually need to fill in the JSON because we're not gonna send this open to OpenAI. This is purely a UI message for our users. It's not ever gonna be sent to OpenAI. And so we can say that the conversation is the conversation we feed into the custom event. And then the text is going to be, hello, my name is Frank. I'm a chatbot. I'm gonna also add a field in here, which is going to be, do I do it in the negative or the positive? I'll do it in the positive just so it's clear. I'll say send to OpenAI. And this is going to be a yes/no field. And I'm gonna say no to this because I don't want this message to be sent to OpenAI because I'm pretending that it is being sent by the chatbot.

Updating the Workflow

So yeah, that's good. I then need to update here where I send my messages to OpenAI. It looks like I missed this off the original video. I need to set the conversation to be parent group's conversation. Otherwise it's sending all the messages. Whoops. But I need to add another constraint here, which is to only send the messages where it sends OpenAI equals yes. And then I need to add in that here. Tend to OpenAI equals yes because that's all the messages my user inputs. And then so that OpenAI is aware of what it said, this also needs to be yes.

Testing the Implementation

Right, to demonstrate this, I'm gonna clear out all of the conversations I've got. And clear out all the messages. Okay, let's see how this goes. So I'll just refresh that again. On page load. Ah, I've not triggered the workflow. I've not triggered my custom event. So my custom event is triggered here. And the conversation is the result of step one. Remember, this is what happens if the page loads and I have no conversations accessible to this user. So it creates a new conversation and then it's going to run the sends first message from bot to user. I also need to add that into new conversations clicked. Trigger a custom event. Again, results of step one. Right, let's try that.

Debugging the Implementation

Okay, I'm going to debug that. I do like making these videos nice and rough. So on page load, we find that conversations is zero. And so we display, conversation count is zero. Why is count not zero? Count is one. I think. Ah, okay, I've got an issue here, which is that my conversations, my conversation label is my messages first text. So I'm going to say here that the, when current search for current messages, first item is is empty. Text is, I'll just call this conversation placeholder. Gonna check that it's all empty. Yeah, right, let's load it again.

Finalizing the Implementation

Okay, there we go. So it has added in that, hello, my name is Frank, I'm a chatbot. And now I'm going to reply back saying, what is the capital of the USA? So what should be happening is from OpenAI's perspective, our conversation is only this long. It's not including the hello, my name is Frank, I'm a chatbot. So I'm gonna start a new conversation. And there you go, we start off once more with, hello, my name is Frank, I'm a chatbot. Now to correct what I've done down this left hand side by way of prompting and guiding my users into what the chat was actually about, I'm gonna change this to item two is empty. And I'm gonna change this to item two's text.

Conclusion and Additional Resources

Okay, so there we go. We now have it showing the second message in the conversation from the Bubble's app perspective, which is here, but this is from OpenAI's perspective, the first message and the second message and so on. So I hope that goes to show some way of expanding upon the previous tutorial for a Bubble integration in with OpenAI's ChatGPT, GPT 3.5 Turbo. And this is just one way of going about it. And I wanted to go for a way which had the opening message still actually becomes part of the repeating group that shows all the messages. So that's not a reasoning behind it. If you're unsure of anything uncovered here, do check the previous video where we go through basically building this whole app out in under 30 minutes. Yeah, if you have any questions, leave them in the comments. If you need one-to-one help, you can put Bubble coaching through our website. If you like our videos, you can go to our website where we've got videos that are exclusive to members. You can't find them on YouTube, but they will teach you how to build a Bubble app and many things about Bubble.