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.