Finally! Send a message with the Enter key
In this Bubble tutorial, you will learn how to submit input from a text using an enter key and for it to automatically run a workflow based off that key press.
Unlock the power of chat: Learn how to submit input with just an Enter key press in Bubble!
Streamline your Bubble app: Discover the secret to running workflows automatically from text input.
Elevate user experience: Master the art of integrating OpenAI responses with custom states in your Bubble chat app.
Submitting Input with the Enter Key in Bubble
If you're building any sort of chat in your Bubble app, whether that is a ChatGPT clone, adding in an AI chatbot or even chat between the users of your app, you're going to want to watch this video where I show you how you can submit input from a text using an enter key and for it to automatically run a workflow based off that key press.
Demonstrating the Enter Key Functionality
So I'm going to ask "What is the capital of France?" This is seriously my go-to question if you've watched more of these videos and now I'm going to hit enter and I get a reply back from OpenAI very quick and I'm using a custom state to display on my page.
Exploring OpenAI Integration
Now if you want to learn any more about how you can add OpenAI into your app then I encourage you to go and check out our other tutorials. But right now I'm just focused on the fact that it was hitting enter not clicking the button and hitting enter on a multi-line input that still ran the workflow.
Setting Up the Enter Key Functionality
So let me show you how I've got that working. First of all you're going to need to install this plugin called shift enter and this is basically the secret source. This is how it comes to working and having that effect on the front end.
Adding the Enter Event Element
Once you've installed that plugin you will then need to go ahead and add in the element into the page. So the enter event element and as is often the case with elements that apply changes to the front end of your Bubble app you have to add them to the page in order for the right scripts to load in. They don't actually need to take up space on the page so you can put the element somewhere where it's going to go unnoticed and you could make it really really small.
Configuring the Plugin
But let me show you how I've got this to work and also some things that I've learned that make this plugin work even better and reduce bugs. So first of all I need to supply in the plugin in here I need to supply an ID attribute for my input and my button. So my input ID attribute is inputted down here.
Setting Up ID Attributes
If you don't see ID attribute down the bottom of elements on your Bubble app go into settings scroll all the way down to the bottom of general and you can tick a box to make ID attribute appear and I've also got an ID attribute set on my button and I've then copied and pasted them identically into here.
Creating the Workflow
I then get on my workflows initially I thought I have to have a workflow for this new event when the enter event A is clicked but I found I was getting kind of repeat submissions so this is how I found that it works best. Because I've supplied it with the button ID I only need to create my workflow for my button so here's my request to OpenAI and here I am saving it to a custom state and that's how I'm printing it on the web page.
Avoiding Duplicate Submissions
Now yeah if you add in the the element this one here A event enter event event enter then you're going to end up with duplicate so I imagine that's going to be necessary if you don't then have a button but this just means you can run it all through this workflow and you would also important this point to note I'm not referring to the multi-line A I'm referring to the enter event A's value input this is because it clears it out automatically I don't have a what I'm looking for reset relevant inputs again when I was testing this I thought I needed that and it caused it to act in a really bizarre way so I don't need that but in order for this to not appear empty I have to use the enter event A's value input and so I'm guessing that because I've added this element to the page and so it's available for me in Workflows.
Final Demonstration
So once more I'll give you a demo let me refresh it and this time we can say how long is the coastline of the UK and I hit enter and we get it back now what if I wanted to put a line break in there actually I'm going to start the video there because I've I've put together my OpenAI integration really quickly here I've not made it JSON safe which means I won't be able to use punctuation I won't be able to use line breaks because I just wanted to really quickly before I hop on the Bubble coaching session with one of our members I wanted to get this video recorded where I demonstrate this really cool thing where you can submit a form using the enter key that even if you're using a multi-line input.
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.