Visual Elements
Last updated
Last updated
A text element displays static or dynamic text. It can also trigger a workflow with a click.
This is the content to display in the text element. Enter static text or use the 'Insert dynamic data' button to enter dynamic text. In the dynamic case, create the expression to be rendered in run-mode piece by piece. It can be, for instance, 'Current user's first name.'
Note: Text elements that are just slightly taller than the height of the text inside of it may randomly fail to render on page load. Consider making your text elements a bit taller than the text inside of it.
Use the Rich text editor to format parts of the text differently from the main element style. Use bb-code to add richer content like a link.
Tip: Certain BBCode tags have limited or no ability for you to adjust the size of the resulting embedded item (example: [youtube]). Of special note is [image], which allows setting fixed dimensions but not maximum dimensions. For finer control over items embedded in text, consider using an HTML element instead (not safe for end users to enter contents though)
The canvas placeholder field allows you to display a preview text, making it easier to visualize the content of an element while designing your app. The text is only visible in the editor and will not be shown to your app's users.
When checked, the text element will truncate the text and add '...' to the end of the text. This option applies to Responsive mode. If line height is smaller than available content area, then all text will be cut off and the element will be blank.
Note: In the specific situation of a) a text element having height just tall enough to accommodate the contents, b) that element having "Cut off content if the element is not tall enough" and c) a user seeing that element on Firefox, that element can sometimes not be visible because the height is too close to the height of the text. To avoid this, try making the text element slightly taller.
When checked, the text element will adjust its height when the text changes, such as a font size change, even if the new height is lower than the original height set in the Bubble Editor. If this box is checked and the element is invisible, its height will be set to zero.
This option automatically resizes the text element when the content becomes longer. The elements on the page that are below the text are automatically pushed down to make room for the resized text.
By default, text elements apply bb-code to let you use advanced formatting and links in texts. If you do not want this to happen, for instance because the text displays user-generated texts, check this box.
When checked, this option will automatically convert URLs and email addresses in the text into clickable links in run mode. Note that if the element is set not to apply bb-code and if the text has some bb-code tags, links will not be recognized.
When the text element is set to detect links and email, you can optionally pick to color the links in a different color.
When the text element is set to detect links, you can optionally make them not endorse the source (for SEO purposes).
Checking the 'Expose the type of tags for text elements' checkbox in the SEO & Metatags section in the Settings Tab allows you to select an HTML tag to be applied to this element. Select the tag in the Style Tab. Use this option for SEO optimization.
Click this button to create a new workflow triggered by this element. The type of event depends on the element and is generally the most common event. For example, buttons will create a 'When this element is clicked...' event. If a workflow already exists, this takes you to the existing workflow in the Workflow Tab. To create a different type of event or create a second event, go to the Workflow Tab and click the 'Click here to add an event...' button.
When checked, the element will not trigger a workflow when clicked nor will the user's cursor change to a pointer when they hover over the element. In addition, the item will display according to any specified conditional formatting for the 'isn't clickable' state. This can be used to stop a user from moving forward in a flow until some condition is true. For example, we might disable a specific action until the user is logged in. 'This input should not be empty' can also be used to prevent the user from clicking.
Note: If a text element is narrow, words which are longer than that element will not automatically line break. If your text element needs to accommodate long words (especially in certain languages), consider making the element wider.
Similarly, if you try to rotate a narrow text element, the result may be different than what you expect. To fix this, give the rotated element a greater width.
An image displays an uploaded static image or dynamic image.
Note: For performance reasons, the Bubble run-mode engine pre-loads all images it can find in your app, including those that are conditionally visible. If your app contains images from password-protected sources, a password prompt may appear while your app loads due to this pre-loading logic. Consider using images from a public source or using the file uploader and conditions to make an image private.
This defines which image to display. Click Upload to select a file. The image will be resized to the element's dimensions. Clicking the 'Search for free images' button displays a popup to search for royalty-free images. For dynamic images, use the 'Dynamic image' box and click 'Insert dynamic data.' Then, create an expression to return the image in Live mode. For example, 'Current user's profile picture.'
Tip: We also offer partial compatibility for PDFs displayed in an image element. If the PDF is public, the browser will compress the PDF to create a thumbnail to view in the image element. Most browsers will bypass this for private files, however, and not display a thumbnail for a private file in an image element. Safari is the exception here and will compress private files to display a thumbnail.
The canvas placeholder field enables you to upload a preview image, making it easier to visualize and understand the appearance of an element while designing your app. This image is only visible in the editor and will not be shown to your app's users.
This option defines how to handle dynamic images if their size doesn't exactly fit the current element. Choose from:
Stretch: The image will be resized to fill the entire element. If the image and the element have different proportions, the image will be stretched and might look distorted.
Rescale: The image will be resized to fit inside the element. If the image and the element have different proportions, the parts of the element area that the image doesn't cover will be left blank. This is the best option for profile pictures.
Zoom: The image will be zoomed in until it can cover the element's whole area. If the image and the element have different proportions, the parts of the image that don't fit inside the element may be cut off.
Adjust element height: The image will be resized to be the same width as the element, keeping its proportions intact. If the image and the element have different proportions, the element's height will grow to fit the whole image, and elements below it will be pushed down to make room.
Click this button to crop a static image.
For SEO purposes, add an ALT tag to an image. It specifies alternate text for an image if the image cannot be displayed. The ALT attribute provides alternative information for an image if a user for some reason cannot view it, e.g., slow connection, an error in the src attribute, or if the user uses a screen reader. Note: This option is accessible when 'Expose the type of tags for text elements' is checked in the SEO & Metatags section in the Settings Tab.
Click this button to create a new workflow triggered by this element. The type of event depends on the element and is generally the most common event. For example, buttons will create a 'When this element is clicked...' event. If a workflow already exists, this takes you to the existing workflow in the Workflow Tab. To create a different type of event or create a second event, go to the Workflow Tab and click the 'Click here to add an event...' button.
When checked, the element will not trigger a workflow when clicked nor will the user's cursor change to a pointer when they hover over the element. In addition, the item will display according to any specified conditional formatting for the 'isn't clickable' state. This can be used to stop a user from moving forward in a flow until some condition is true. For example, we might disable a specific action until the user is logged in. 'This input should not be empty' can also be used to prevent the user from clicking.
Note: If you have an image element of a certain width that's trying to display a large horizontal image, it may overflow to the right if you do not change the cropping settings.
A button is an element a user can click to trigger a workflow.
This is the content to display in the button element. Enter static text or use the 'Insert dynamic data' button to enter dynamic text. In the dynamic case, create the expression to be rendered in run-mode piece by piece. It can be, for instance, 'Current user's first name.'
Click this button to create a new workflow triggered by this element. The type of event depends on the element and is generally the most common event. For example, buttons will create a 'When this element is clicked...' event. If a workflow already exists, this takes you to the existing workflow in the Workflow Tab. To create a different type of event or create a second event, go to the Workflow Tab and click the 'Click here to add an event...' button.
When checked, the element will not trigger a workflow when clicked nor will the user's cursor change to a pointer when they hover over the element. In addition, the item will display according to any specified conditional formatting for the 'isn't clickable' state. This can be used to stop a user from moving forward in a flow until some condition is true. For example, we might disable a specific action until the user is logged in. 'This input should not be empty' can also be used to prevent the user from clicking.
A link is a special element that takes the user to another page within the app or website. It has the same properties as links on a web page, meaning users can right-click them, open them in a new tab, copy them.
Check this box to display an icon instead of text. Choose an icon from the Font Awesome library.
This is the content to display. Enter static text or use the 'Insert dynamic data' button to enter dynamic text. In the dynamic case, create the expression to be rendered in run-mode piece by piece. It can be, for instance, 'Current user's profile page.'
Choose the icon to use for this link. Control the color and size of the icon with the text color and size properties.
Choose either Internal page or External URL from this dropdown menu. Internal page takes the user to another page in the app. External URL takes the user to a different website.
Select which page the link should go to.
Define what data should be sent to the linked page. This data should be of the type of content of the destination page. If you're building a profile page which has the type of content 'user,' send a user to that page. The Composer will be red until the type of data is the proper type. If the page doesn't have a type, you can send text instead to append a path to the URL.
Enter the URL the link should go to. Use the 'Insert dynamic data' button to enter dynamic text.
Check this box to open the link in a new browser tab. Use this option to keep users in the app.
Check this box to make the link unclickable. Use this option to disable and enable links dynamically.
Check this box if you do not endorse the link (for SEO purposes).
Use this checkbox to send additional data to a page that is not a thing. This can be text, a number for a search, etc. This option defines the series of keys and values to send. The way to use them in the destination page is by using the 'Get data from page URL' data source.
Enter the keys and values to send to the destination page. Warning: Because of Bubble's internal logic, do not use 'id,' 'debug_mode,' or 'resume' as keys.
If there is any data stored in the page URL parameters when the page changes the parameters will be carried over to the destination page as well. These parameters will be overridden by any parameters with the same name added using the "Send more parameters to the page" option.
Check this box if you want the link to be on more than one line when the page width becomes smaller.
This element is a way to use one of the free icons from the Font Awesome library.
Click this button to open the icon library and choose an icon. Search to refine the list.
Select the color for the icon.
Check this box to continuously rotate the icon.
Click this button to create a new workflow triggered by this element. The type of event depends on the element and is generally the most common event. For example, buttons will create a 'When this element is clicked...' event. If a workflow already exists, this takes you to the existing workflow in the Workflow Tab. To create a different type of event or create a second event, go to the Workflow Tab and click the 'Click here to add an event...' button.
When checked, the element will not trigger a workflow when clicked nor will the user's cursor change to a pointer when they hover over the element. In addition, the item will display according to any specified conditional formatting for the 'isn't clickable' state. This can be used to stop a user from moving forward in a flow until some condition is true. For example, we might disable a specific action until the user is logged in. 'This input should not be empty' can also be used to prevent the user from clicking.
A shape element is typically used for visual purposes, but it can also trigger a workflow when the user clicks it.
Click this button to create a new workflow triggered by this element. The type of event depends on the element and is generally the most common event. For example, buttons will create a 'When this element is clicked...' event. If a workflow already exists, this takes you to the existing workflow in the Workflow Tab. To create a different type of event or create a second event, go to the Workflow Tab and click the 'Click here to add an event...' button.
When checked, the element will not trigger a workflow when clicked nor will the user's cursor change to a pointer when they hover over the element. In addition, the item will display according to any specified conditional formatting for the 'isn't clickable' state. This can be used to stop a user from moving forward in a flow until some condition is true. For example, we might disable a specific action until the user is logged in. 'This input should not be empty' can also be used to prevent the user from clicking.
This element displays a YouTube or Vimeo player on the page. It can be a static or dynamic video. Ziggeo is also supported when the plugin is installed.
Tip: The Bubble engine does not have access to play/paused states for an embedded video. As long as a video has started, it will not stop by itself, even if the container is hidden. To force a video to stop playing if the group containing the video is hidden, consider using conditional states to change the video ID to null when the container is hidden.
Select the video's hosting service: YouTube or Vimeo. Ziggeo is also supported when the plugin is installed.
Tip: If cookies are opt-in for your Bubble application, your users will need to consent for a YouTube video to load.
Enter the ID of the video to run in the player. It's usually the ID shown in the URL when watching this video on YouTube or Vimeo. It can be a dynamic ID.
If this checkbox is selected, the video automatically plays when the page loads.
Plays the video in a continuous loop.
Select the color of the video player for Vimeo. YouTube does not offer this option.
Sets a server authentication token for Ziggeo videos to control access. Ziggeo is supported when the plugin is installed.
This element displays a single address or list of addresses on a map. It is powered by Google Maps.
A map can either display: – None: In this case, the map has no markers. – Single: The map centers this address in the map. This address can be static or dynamic. – List: The map displays a list of addresses and zooms to display the entire list. In this case, the list comes from the application database.
When the map is set to display a list of dynamic entries, define the type of things to be displayed on the map. It can be users, apartments, etc.
Define which address to display on the map. When the map is set to Single marker, it should either be a static entry, like an address, or a dynamic entry of the type geographic address. When the map is set to List of markers, the data source should be a list of geographic addresses. The Composer will be red until the list is of the correct type. It's generally going to be the result of a search.
When using a dynamic list to define the list to display, you must define which field contains the address. For example, if a type of thing is 'Apartment,' the field might be 'Address.' This field should be of type geographic address.
Choose from No, On click, and Always in this dropdown menu to determine when to show the title. When No is selected, the title never displays. When On click is selected, the title shows only when the marker is clicked. When Always is selected, the title always displays.
When using title windows, define the text to display. When building this expression, you can refer to the current marker. That is, the marker for the current box.
When this box is checked, the map will automatically close all title windows before displaying a new one when the user clicks on a marker.
This option defines the type of map to display, based on Google's types: Roadmap, Hybrid, Satellite, and Terrain.
Select a visual style for the map from this dropdown menu or create a custom map style. This is only for display purposes.
This lets you copy-paste (or build your own!) map style. This must be a parsable JSON object. Visit snazzymaps.com for examples.
When selected, the user can zoom and drag. When unchecked, the map will behave like a static map.
Check this box to prevent the map from zooming when the user scrolls over it.
When using List markers, the map automatically scales so that all markers are shown. To force a center and a zoom, check this box.
When using List markers, the map is centered so that all markers are shown, but you can force a center with this field. With a Single marker, the map is centered on the address.
Defines the initial zoom used when the map loads.
This option uploads a customized icon instead of using the Google icon.
When using the map with a list of markers, select from No, Upload custom, and Data dependent from this dropdown menu. When No is selected, no custom icon will be used. When Upload custom is selected, upload an image to use as an icon for all the markers. When Data dependent is selected, each marker will use a unique icon, which must be stored in the application database.
Use this field to upload a customized image to use as the marker.
If you're using a list of markers and set the marker to be Data dependent and coming from the database, define the field that contains the image. The field should be of type image.
When working with a list of map markers, you can optionally change the marker image for the currently selected marker. This makes it easy to see which marker the user has clicked on or selected. Choose 'upload custom' to pick an image to use. If you want to use a different image for different map markers, select 'Data dependent' and you will have an option to pick an image field on the marker to use for selections.
Only visible if 'Custom selected icon' is set to 'upload custom'. This lets you upload an image to use as the marker icon for the selected marker.
Only visible if 'Custom selected icon' is set to 'Data dependent'. Lets you pick an image field on the type of marker data you are displaying to use for the selected map marker: the image in that field will be displayed when the user clicks on the marker.
An alert displays a temporary message on the page, like a warning. It is displayed with a fade in and fade out animation. Show it through a workflow action.
This is the content to display in the alert. Enter static text or use the 'Insert dynamic data' button to enter dynamic text. In the dynamic case, create the expression to be rendered in run-mode piece by piece. It can be, for instance, 'Current user's first name.' This content can be modified directly by the action that shows the alert. In this case, the text defined at the element level is overwritten.
Check this option to float the alert at the top of the page and be as wide as the entire page area. If checked, this means that the responsive settings won't apply, and the alert will not affect the responsive behavior of your page.
This element runs HTML on the page, for instance to render elements. Some services provide embeddable HTML code to put on a page.
Paste the actual HTML to be rendered by the element. If the HTML contains script tags, the script tags will only run in run-mode and not in the editor. Customize the content of the HTML with dynamic data, if needed, by inserting dynamic entries with the 'Insert dynamic data' button.
Check this box if the HTML should run as if it was an independent web page. Refer to the code provider to decide if this is a relevant option.
When not in iFrame mode and this option is checked, the HTML element will resize automatically if the content is longer than the element. Elements under the resized HTML element will be pushed down automatically.
This element adds an icon or the text 'Built without code on Bubble.' Clicking it displays Bubble's homepage in a new browser tab. While it's not mandatory to put it in the app, we'd really appreciate your help in spreading the word about Bubble :)
Note: Some browser extensions can tamper with the Bubble banner or make Bubble think the banner isn't there, prompting a reminder about it.
Choose from Blue, Gray, White, and Text from this dropdown menu. Selecting a color option will display the text of the Bubble logo in that color. Selecting Text will display 'Built without code on Bubble' instead of an icon.
Check this box to add a border around the logo or text.
Customize the text color with this property.