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.
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! 
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):
https://www.w3schools.com/js/js_object_properties.asp
https://www.w3schools.com/jsref/met_element_setattribute.asp
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.
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:
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: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
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
