Bubble & ChatGPT - Chatbot opening message
In this Bubble.io tutorial we demonstrate how to create a Pie Chart in Bubble using ApexCharts by Thimo.
Unlock ChatGPT's full potential: Learn how to insert an opening message without affecting the AI conversation!
Master Bubble workflows: Discover the secret to adding a welcome message to your ChatGPT clone without sending it to OpenAI.
Elevate your chat bot UX: Create a seamless user experience with custom events and custom states in your Bubble app.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.