Skip to main content

How to Use the HTML Element

Sofia Maconi avatar
Written by Sofia Maconi
Updated over 2 months ago

Transcript

In this Quick Tip, we're going to learn about the HTML element.

While Bubble is a visual language, the HTML element allows you to enter custom HTML if you need to.

When we add the HTML element to the page, we simply paste any HTML code into the HTML property.

For example, you can use the HTML element to embed a chat service or feedback tool if there wasn’t a plugin already for it. If the HTML contains any script tags, the script tags will only run in run-mode and not in the editor as other HTML will.

Besides entering the HTML statically, you can store HTML as text on a datatype and retrieve it dynamically.

You can also set this to display as an iframe, which tells the HTML element to run this HTML as if it was an independent webpage. This can help you learn media like a YouTube video as well as display data from another application or service.

Finally, you can resize this element when not in the above iframe mode, and this option is checked. The HTML element will resize automatically if the content is longer than the element itself, and push down any elements that are placed underneath it.

The HTML element provides more flexibility with the ability to add in custom code, but do be careful as you may unknowingly cause something else to break. If you notice something not behaving correctly, and you’re using custom code like HTML element, be sure to run your app in safe mode without HTML to turn off custom code to see if you can then debug the issue.

That’s it for this Quick Tip! For more, be sure to check out bubble.io/academy.

Did this answer your question?