Finally! Send a message with the Enter key

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

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.

How to Submit Input from a Text Using an Enter Key in

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.

Shift+Enter Plugin

First of all, you're going to need to install this plugin called Shift and Enter. And this is basically the secret sauce, this is how it comes to working and having that effect on the front end.

Adding 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.

Creating Workflows

I then, 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. 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.


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 a ID attribute for my input and my button.

If you add in the element, this one here, 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, it's important to note, I'm not referring to the multi-line A, I'm referring to the enter event A's value input.

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?