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
  • Signup / login popup
  • Message popup
  • Loader popup

Was this helpful?

  1. CANVAS FUNCTIONALITY
  2. Reference
  3. Reusable elements

Popups Reusable (derprecated)

Reusable name: popupsreusable

PreviousIntegrate some to parentNextCookies Permission

Last updated 4 years ago

Was this helpful?

Element name: popups_reusable Purpose: Provide commonly used functionality in an element that can be easily dropped in on any page.

There are a few standard popups that we put into a reusable element so you can trigger them as needed rather than creating many copies.

The reusable element popupresuable contains the sign up / login popup, loader popup, and message popup. You can trigger custom workflows from the header (which contains the popupsreusable element) to show certain popups. Or if the page that you're building does not have a header, please add the popupsreusable element to the page so you can trigger custom workflows from that element.

Signup / login popup

There is a signup/login reusable element which is used across the app (login page, homepageblocks, popupsreusable).

This popup can be used to display a popup on the page. Note that you can trigger a workflow to show this element from the header reusable element. From a page, you can trigger either of the following actions via the header's custom workflows: show login popup or show signup popup .

When using this popup, users will be able to login and signup from any page that contains the header without having to be redirected to the login or index page. There are a couple of caveats to this, though:

  1. If users sign up and need to verify their email, they'll be redirected to the "verify" page. However, if a user logs in to a page and that page needs verification (but the user hasn't verified his email yet) then the user will not be able to access that page.

For more information about the signup/login reusable, .

The below popups require some setup to be used in this reusable.

Message popup

With the message popup, you can display a simple message (e.g., “Your account is pending, and will become active once approved”) and make the user click “OK”.

  • The message popup (no esc) contains a popup title text, body message, and a button.

  • You can pass a string of text for the content of the popup by triggering a custom workflow from a reusable element (header or popupsreusable):

    • The custom workflow "show message popup (no esc)" is of type text

    • Simply pass a text string in this format:

      • This is a title{This is the body message}This is the close button text

        • Any text before { is the title of the popup

        • Any text between { } is the body text of the popup

        • Any text after } is the button text of the popup

Loader popup

With the loader popup, you can display a loading icon over the whole page for some time (to avoid a bad/choppy experience)

This should be used sparingly in cases of very complicated and slow pages.

  • The loader popup contains the standard full page HTML loader popup

  • On the page that you are displaying the loader popup, add the following workflow:

    • Do when condition is true and only when page loaded (entire) is "yes", trigger custom workflow "close loader popup" from reusable element

You can trigger the loader popup by triggering a custom workflow called "show loader popup" from a reusable element ( or popupsreusable)

header
click here