Canvas Documentation
Bubble Best Practices
v3
v3
  • Introduction
  • Key Features
  • What's New
  • For Designers
  • CANVAS FUNCTIONALITY
    • Getting Started
    • Branding & Design
    • Marketing Pages
    • Bubble Pages & Blocks
    • Roles & Permissions
    • Menus & Navigation
    • Data & Workflows
    • Emails & Alerts
    • Miscellaneous
    • Reference
      • Pages
        • Index
        • Admin Portal
        • Account
        • Login
        • Legal
        • Reset Password
        • Verify
        • 404
        • Privacy Policy (deprecated)
        • Terms of Service (deprecated)
      • Reusable elements
        • Header
        • Footer
        • Signup & Login
          • Integrate some to parent
        • Popups Reusable (derprecated)
        • Cookies Permission
        • Widgets
          • UI Widgets
          • Workflow Widgets
        • Admin Portal
          • Admin analytics
          • Admin email templates
          • Admin header & footer
          • Admin legal popups
          • Admin branding, launch, and settings
          • Admin marketing pages
          • Admin portal canvas logic
          • Admin option settings
        • Menu Focus Elements
          • Integrate some to parent
      • Data types
      • Option Sets
      • Backend Workflows
      • Design standards
        • Manually Building UI
  • Bubble Best Practices
    • Learning Bubble Basics
    • Principles
    • Database
    • Design
    • Security
    • SEO
    • Speed
    • Modularity
      • Data triggers
Powered by GitBook
On this page
  • Notifications
  • Search
  • Shopping Cart

Was this helpful?

  1. CANVAS FUNCTIONALITY
  2. Reference
  3. Reusable elements
  4. Widgets

UI Widgets

UI widgets offer elements designed to be interacted with by your users on the front end and contain workflows specific to the reusable.

PreviousWidgetsNextWorkflow Widgets

Last updated 4 years ago

Was this helpful?

Notifications

Element name: widget_notifications Purpose: Display notifications to your users

This focus group reusable element contains a simple user interface for displaying unread messages or notifications. By default, we've included this reusable element in Group Loggedin in the header. This reusable element icon will only be visible when a user is logged into the app.

To use this UI, please replace all dummy data type with the data type you want to display (e.g., Messages or Notifications).

Add workflows to Button Mark as read, Group Select message, and Group view more. If you do not want this UI to be visible, you can hide Group notification icon in the header reusable element by unchecking the box for This element is visible on page load.

Search

Element name: widget_search Purpose: Provide a convenient location for your users to search and view results

This focus group reusable element contains a simple user interface for searching for things. By default, we've included this reusable element in Group Loggedin in the header. This reusable element icon will only be visible when a user is logged into the app.

To use this UI, please replace all dummy data type with the data type you want to display (e.g., Files or products).

Add workflows to Group Select item and update data source of RepeatingGroup Dummy. If you do not want this UI to be visible, you can hide Group search icon in the header reusable element by unchecking the box for This element is visible on page load.

Shopping Cart

Element name: widget_shopping_cart Purpose: Display the items in the user's cart for easy review and checkout

This focus group reusable element contains a simple user interface for reviewing the items in your cart. By default, we've included this reusable element in Group Loggedin in the header. This reusable element icon will only be visible when a user is logged into the app.

To use this UI, please replace all dummy data type with the data type you want to display (e.g., Product or Cart items).

Add workflows to Button removeand Button CHECKOUT. If you do not want this UI to be visible, you can hide Group shopping cart icon in the header reusable element by unchecking the box for This element is visible on page load.