Canvas Documentation
v4.1
v4.1
  • Introduction
  • Key Features
  • What's New
  • Canvas Design System Figma File
  • CANVAS FUNCTIONALITY
    • Getting Started
    • Branding & Design
    • Marketing Pages
    • Bubble Pages & Blocks
    • Roles & Permissions
    • Menus & Navigation
    • Data & Workflows
    • Emails & Alerts
      • Mail merge terms
    • Privacy rule checker
    • Miscellaneous
      • Setting up two factor authentication
      • Cookie and consent banner
      • Setting your password policy
      • Set up Payment info on Account page
      • Loading screen
      • Configuring multiple languages
      • Customizing your app's portal page colors
    • Reference
      • Pages
        • Index
        • Admin Portal
        • Account
        • Login
        • Legal
        • Reset Password
        • 404
      • Reusable elements
        • Header
        • Footer
        • Signup & Login
        • Cookies Permission
        • Widgets
          • App security
          • Header 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 options settings
        • Menu Focus Elements
      • 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
  • Canvas library
    • Page templates
      • Free Bubble Marketing Page
      • Premium Bubble Marketing Page
      • Centered Profile Page
      • Left-Justified Profile Page
      • Standard page
      • Toggle Tabs Page
      • Menu Page
      • Mobile Menu Page
      • Video List Page
      • Standard Portal / Dashboard Page
      • Simple Portal / Dashboard Page with Icons
      • Double Sidebar Portal Page Template
      • Search Page
      • Map Search Page with Toggle and Filters
      • Floating Map Search Page
      • Search Bar Page
      • Multi-Step Page With Progress Bar
      • Standard Multi-Step Process Page
      • Multi-Step Process Page with Sidebar
      • Gallery Profile or Product Page
      • Sidebar Profile Page
      • 2-Column Menu Tabs Page
      • 2-Column Checkout Page
      • 2-Column Video Chat Page
      • Vertical Multi-Step Page Template
    • Blocks
      • Monthly Calendar Scheduling Widget
      • No Reply Comments Thread
      • Nested Comments Thread (with Like and Reply)
      • Placeholder Group
      • List with Circular Progress Bar Repeating Group
      • Top Input Chat Widget
      • Bottom Input Chat Widget
      • Toggle Tabs Group
      • Single-Select or Multi-Select Pill Tabs Group
      • Settings group
      • To-Do List Repeating Group
      • Title Group with Button and Filters
      • Product Details Group With Progress Bar
      • Listing details with Icons and Menu Focus Group
      • Week Daily Availability Group
      • Frequently Asked Questions (FAQ) Repeating Group
      • Dismissible Module
      • Video Group
      • About Group
      • Add to Cart Group
      • Full Width Map with Directions Link
      • Location Module (Map and Directions)
      • Drag and Drop Repeating Group
      • Infinite Columns Horizontal Scroll Data Table with Fixed First Column
      • Expiration timer
    • Popups
      • Confirmation Popup
      • Message Popup
      • Image Popup
      • Video Popup
      • Vertical Scroll Popup
      • Edit Popup
      • Standard Form Popup
      • Subscribe Popup
      • Feedback / Contact Popup
      • Details Popup
      • Add List Popup
      • Advanced Form Popup
      • Rating Popup
      • Toggle Tabs Popup
      • Share Popup
      • Multi-Step Popup
      • Invoice Popup
      • Stripe Credit Card Purchase Popup
      • View Profile Popup
      • Send Message Popup
      • Multi-Select Pill Tabs Popup
      • Pricing Plans Popup
    • Reusables
      • Multimage uploader
Powered by GitBook
On this page
  • Overview
  • Structure
  • How to set up
  • How to display different content in each tab

Was this helpful?

  1. Canvas library
  2. Popups

Pricing Plans Popup

Use this to display pricing plans with different billing frequencies.

PreviousMulti-Select Pill Tabs PopupNextReusables

Last updated 2 years ago

Was this helpful?

Overview

Use this popup to display pricing plans with different billing frequencies.

Structure

This popup includes the following:

  • A hidden variable called var - selection that captures the user's current selection

  • A title text and a collapsible description text that can be hidden.

  • A toggle tabs group (Group Main tab_text) with two inner tab options (Group Inner tab 1_text and Group Inner tab 2_text)

    • Clicking on each inner tab group will run a workflow to display the inner tab's group text (e.g. Monthly or Annually) in Group Main tab_text and change the current tab view.

    • Currently clicking on each tab will just change the "/month" and "/year" text in the repeating group.

  • RepeatingGroup Dummy displays a list of things

  • Clicking on Button Cancel and Button Confirm will close the popup

How to set up

  • Update the title and description text.

    • You can hide the description text by selecting Group Collapsible text and unchecking the box for This element is visible on page load.

  • Update the text data sources for Group Inner tab 1_text and Group Inner tab 2_text. Changing the name here will change the toggle tab text.

  • Update RepeatingGroup Dummy's data source to the data type you want to display.

    • Update all the inner groups in the repeating group to the new data type

    • Select Group Inner price_number, Text Basic, and Text For hobbyists and remove all conditional statements on those elements (these are placeholders).

    • Update var - selection's data source (this should be the same as the repeating group's data type).

  • Add workflow to Button Confirm.

How to display different content in each tab

  • If you want to change a text in the repeating group when the current tab is changed, you should update that text element directly and use the format as text: yes/no logic.

  • If you want to display a completely different set of list for the other tab, you should add a conditional statement to the repeating group similar to the following:

Conditional statement in a text element in the repeating group