Provide custom HTML tags/ids/attributes to bubble elements?

Is it possible to create custom html fields in generic bubble elements? Not for forms, but to take a general

element and provide it with an id on the page?

Looking for this to integrate selenium/headless-chrome tests with my bubble application. Thank you.


@nchoi Did you figure out how to do this?

You have to enable that option. Do it here:

Your Bubble elements then have a new field you can customize like so:

BTW, this is pretty well documented and starting to type “html” in the Bubble reference search pops it right up… (which is prolly why nobody ever answered @nchoi’s original question).

The Bubble Reference is our friend! :wink: Introduction - Bubble Docs

Yeah I did! Thanks for asking!

Thanks @keith, I knew about the ID capabilities but was more so looking to add a custom html tag.


What do you mean by that (“custom html tag”)? If you want to add a new attribute to an element, you first need its ID. Once you have that you can do whatever you need in the page vis-a-vis attributes.

Are you referring to actual tags? Like, heading tags (h1, h2, etc.)? If so, you can select those properties to use either in the inspector for text elements:

… or (if the text element is using a style, the HTML tag setting migrates into the style itself), in the Style properties for a given Style (Styles tab):

Or are you asking about something else?

@keith I’m trying to add data attribute to a Preformatted text<div> tag. So you’re saying once I have it’s ID I can set it via attributes.
Where are attributes?

What do you mean, “where are they?”

Some basics about attributes (also called properties sometimes):

I believe what @Blake is asking if there’s a way to set ‘data-xxx = “bla bla”’ on an element without using code in bubble.

It’s easy to set the ID attribute of an element. He’s asking if it’s possible to set another attribute via the bubble editor.


Exactly @gaurav. Wasn’t wanting to do it with JavaScript. Thanks for responding though @keith.

Ah, I see. I suppose if there were such a capability the interface would be code-like at some level. As far as setting a property via code, the slick/unobtrusive way to do it would be in a Run JavaScript action in a when Page is loaded workflow. (That way you don’t have to have an HTML element on your page and you also ensure that the object is actually exists before attempting to operate on it.)

Agreed on run vs. html.

@keith Quick question - How does that ensure that the target object exists? The run JavaScript will need to be run when that specific object is visible no (assuming it’s hidden in page load)

I was assuming object is visible on load. The “Page is loaded” condition occurs when all on page elements are ready for manipulation.

You’re correct that if element IS NOT visible on page load one would have to check for its existence (not necessarily via JavaScript, as the Run JS action could be put in a “When element is visible” type workflow, which is another nice advantage to that action.)

BTW, for an insanely detailed analysis of the “Page is loaded” condition and how that relates to element visibility in the user’s browser, see this reply and my later one(s) — some interesting observations and techniques discussed there:

1 Like

Was this ever answered? I am also looking to add a “data-XXX” to a div or other HTML element? Like <div id="idOfThisThing" data-XXX="SomeData">SomeText</div> ?

The HTML specification for reference:*

1 Like

Great description of the issue, I’m also interested on knowing how to do this, anyone found a solution?

Try plugin jquery set/add attributes plugin