# Table of Contents
- [Design standards | Canvas Documentation](#design-standards-canvas-documentation)
- [Cookies Permission | Canvas Documentation](#cookies-permission-canvas-documentation)
- [404 | Canvas Documentation](#404-canvas-documentation)
- [Widgets | Canvas Documentation](#widgets-canvas-documentation)
- [Reusable elements | Canvas Documentation](#reusable-elements-canvas-documentation)
- [Legal | Canvas Documentation](#legal-canvas-documentation)
- [Login | Canvas Documentation](#login-canvas-documentation)
- [Reset Password | Canvas Documentation](#reset-password-canvas-documentation)
- [Index | Canvas Documentation](#index-canvas-documentation)
- [Reference | Canvas Documentation](#reference-canvas-documentation)
- [SEO | Canvas Documentation](#seo-canvas-documentation)
- [Verify | Canvas Documentation](#verify-canvas-documentation)
- [Key Features | Canvas Documentation](#key-features-canvas-documentation)
- [Introduction | Canvas Documentation](#introduction-canvas-documentation)
- [Admin Portal | Canvas Documentation](#admin-portal-canvas-documentation)
- [Principles | Canvas Documentation](#principles-canvas-documentation)
- [Account | Canvas Documentation](#account-canvas-documentation)
- [Pages | Canvas Documentation](#pages-canvas-documentation)
- [Footer | Canvas Documentation](#footer-canvas-documentation)
- [Backend Workflows | Canvas Documentation](#backend-workflows-canvas-documentation)
- [Signup & Login | Canvas Documentation](#signup-login-canvas-documentation)
- [Getting Started | Canvas Documentation](#getting-started-canvas-documentation)
- [Roles & Permissions | Canvas Documentation](#roles-permissions-canvas-documentation)
- [Menu Focus Elements | Canvas Documentation](#menu-focus-elements-canvas-documentation)
- [Branding & Design | Canvas Documentation](#branding-design-canvas-documentation)
- [Introduction | Canvas Documentation](#introduction-canvas-documentation)
- [Learning Bubble Basics | Canvas Documentation](#learning-bubble-basics-canvas-documentation)
- [Data & Workflows | Canvas Documentation](#data-workflows-canvas-documentation)
- [Database | Canvas Documentation](#database-canvas-documentation)
- [For Designers | Canvas Documentation](#for-designers-canvas-documentation)
- [Data triggers | Canvas Documentation](#data-triggers-canvas-documentation)
- [Admin Portal | Canvas Documentation](#admin-portal-canvas-documentation)
- [Header | Canvas Documentation](#header-canvas-documentation)
- [Miscellaneous | Canvas Documentation](#miscellaneous-canvas-documentation)
- [What's New | Canvas Documentation](#what-s-new-canvas-documentation)
- [Modularity | Canvas Documentation](#modularity-canvas-documentation)
- [Option Sets | Canvas Documentation](#option-sets-canvas-documentation)
- [Reference | Canvas Documentation](#reference-canvas-documentation)
- [Index | Canvas Documentation](#index-canvas-documentation)
- [Key Features | Canvas Documentation](#key-features-canvas-documentation)
- [Cookie and consent banner | Canvas Documentation](#cookie-and-consent-banner-canvas-documentation)
- [Introduction | Canvas Documentation](#introduction-canvas-documentation)
- [Pages | Canvas Documentation](#pages-canvas-documentation)
- [Set up Payment info on Account page | Canvas Documentation](#set-up-payment-info-on-account-page-canvas-documentation)
- [Marketing Pages | Canvas Documentation](#marketing-pages-canvas-documentation)
- [Security | Canvas Documentation](#security-canvas-documentation)
- [Miscellaneous | Canvas Documentation](#miscellaneous-canvas-documentation)
- [Menus & Navigation | Canvas Documentation](#menus-navigation-canvas-documentation)
- [Data & Workflows | Canvas Documentation](#data-workflows-canvas-documentation)
- [Customizing your app's portal page colors | Canvas Documentation](#customizing-your-app-s-portal-page-colors-canvas-documentation)
- [Data types | Canvas Documentation](#data-types-canvas-documentation)
- [Manually Building UI | Canvas Documentation](#manually-building-ui-canvas-documentation)
- [Setting your password policy | Canvas Documentation](#setting-your-password-policy-canvas-documentation)
- [Configuring multiple languages | Canvas Documentation](#configuring-multiple-languages-canvas-documentation)
- [Design | Canvas Documentation](#design-canvas-documentation)
- [Bubble Pages & Blocks | Canvas Documentation](#bubble-pages-blocks-canvas-documentation)
- [Roles & Permissions | Canvas Documentation](#roles-permissions-canvas-documentation)
- [Speed | Canvas Documentation](#speed-canvas-documentation)
- [Loading screen | Canvas Documentation](#loading-screen-canvas-documentation)
- [Emails & Alerts | Canvas Documentation](#emails-alerts-canvas-documentation)
- [Getting Started | Canvas Documentation](#getting-started-canvas-documentation)
- [Setting up two factor authentication | Canvas Documentation](#setting-up-two-factor-authentication-canvas-documentation)
- [Marketing Pages | Canvas Documentation](#marketing-pages-canvas-documentation)
- [Bubble Pages & Blocks | Canvas Documentation](#bubble-pages-blocks-canvas-documentation)
- [Mail merge terms | Canvas Documentation](#mail-merge-terms-canvas-documentation)
- [Branding & Design | Canvas Documentation](#branding-design-canvas-documentation)
- [Key Features | Canvas Documentation](#key-features-canvas-documentation)
- [Reference | Canvas Documentation](#reference-canvas-documentation)
- [Pages | Canvas Documentation](#pages-canvas-documentation)
- [Introduction | Canvas Documentation](#introduction-canvas-documentation)
- [Privacy Policy (deprecated) | Canvas Documentation](#privacy-policy-deprecated-canvas-documentation)
- [Login | Canvas Documentation](#login-canvas-documentation)
- [Index | Canvas Documentation](#index-canvas-documentation)
- [Account | Canvas Documentation](#account-canvas-documentation)
- [404 | Canvas Documentation](#404-canvas-documentation)
- [Reset Password | Canvas Documentation](#reset-password-canvas-documentation)
- [404 | Canvas Documentation](#404-canvas-documentation)
- [Legal | Canvas Documentation](#legal-canvas-documentation)
- [Getting Started | Canvas Documentation](#getting-started-canvas-documentation)
- [Reset Password | Canvas Documentation](#reset-password-canvas-documentation)
- [Canvas Design System Figma File | Canvas Documentation](#canvas-design-system-figma-file-canvas-documentation)
- [Admin Portal | Canvas Documentation](#admin-portal-canvas-documentation)
- [Cookies Permission | Canvas Documentation](#cookies-permission-canvas-documentation)
- [About us | Canvas Documentation](#about-us-canvas-documentation)
- [Verify | Canvas Documentation](#verify-canvas-documentation)
- [Marketplace homepage | Canvas Documentation](#marketplace-homepage-canvas-documentation)
- [Product homepage | Canvas Documentation](#product-homepage-canvas-documentation)
- [Pricing | Canvas Documentation](#pricing-canvas-documentation)
- [Widgets | Canvas Documentation](#widgets-canvas-documentation)
- [SaaS homepage | Canvas Documentation](#saas-homepage-canvas-documentation)
- [Legal | Canvas Documentation](#legal-canvas-documentation)
- [Sidebar tab | Canvas Documentation](#sidebar-tab-canvas-documentation)
- [Backend Workflows | Canvas Documentation](#backend-workflows-canvas-documentation)
- [Reusable elements | Canvas Documentation](#reusable-elements-canvas-documentation)
- [Reusable elements | Canvas Documentation](#reusable-elements-canvas-documentation)
- [Roles & Permissions | Canvas Documentation](#roles-permissions-canvas-documentation)
- [Branding & Design | Canvas Documentation](#branding-design-canvas-documentation)
- [Login | Canvas Documentation](#login-canvas-documentation)
- [Data & Workflows | Canvas Documentation](#data-workflows-canvas-documentation)
- [Menus & Navigation | Canvas Documentation](#menus-navigation-canvas-documentation)
- [Account | Canvas Documentation](#account-canvas-documentation)
- [Signup & Log in | Canvas Documentation](#signup-log-in-canvas-documentation)
- [Terms of Service (deprecated) | Canvas Documentation](#terms-of-service-deprecated-canvas-documentation)
- [Miscellaneous | Canvas Documentation](#miscellaneous-canvas-documentation)
- [What's New | Canvas Documentation](#what-s-new-canvas-documentation)
- [Menu Focus Elements | Canvas Documentation](#menu-focus-elements-canvas-documentation)
- [Footer | Canvas Documentation](#footer-canvas-documentation)
- [Marketing Pages | Canvas Documentation](#marketing-pages-canvas-documentation)
- [For Designers | Canvas Documentation](#for-designers-canvas-documentation)
- [Menus & Navigation | Canvas Documentation](#menus-navigation-canvas-documentation)
- [Admin Portal | Canvas Documentation](#admin-portal-canvas-documentation)
- [Bubble Pages & Blocks | Canvas Documentation](#bubble-pages-blocks-canvas-documentation)
- [Option Sets | Canvas Documentation](#option-sets-canvas-documentation)
- [Data types | Canvas Documentation](#data-types-canvas-documentation)
- [Admin Portal | Canvas Documentation](#admin-portal-canvas-documentation)
- [Emails & Alerts | Canvas Documentation](#emails-alerts-canvas-documentation)
- [Widgets | Canvas Documentation](#widgets-canvas-documentation)
- [Cookies Permission | Canvas Documentation](#cookies-permission-canvas-documentation)
- [Header | Canvas Documentation](#header-canvas-documentation)
- [Admin Portal | Canvas Documentation](#admin-portal-canvas-documentation)
- [Header | Canvas Documentation](#header-canvas-documentation)
- [Footer | Canvas Documentation](#footer-canvas-documentation)
- [Popups Reusable (derprecated) | Canvas Documentation](#popups-reusable-derprecated-canvas-documentation)
- [Signup & Login | Canvas Documentation](#signup-login-canvas-documentation)
- [Backend Workflows | Canvas Documentation](#backend-workflows-canvas-documentation)
- [Design standards | Canvas Documentation](#design-standards-canvas-documentation)
- [Principles | Canvas Documentation](#principles-canvas-documentation)
- [Learning Bubble Basics | Canvas Documentation](#learning-bubble-basics-canvas-documentation)
- [Manually Building UI | Canvas Documentation](#manually-building-ui-canvas-documentation)
- [Menu Focus Elements | Canvas Documentation](#menu-focus-elements-canvas-documentation)
- [Option Sets | Canvas Documentation](#option-sets-canvas-documentation)
- [Data types | Canvas Documentation](#data-types-canvas-documentation)
- [Design | Canvas Documentation](#design-canvas-documentation)
---
# Design standards | Canvas Documentation
[PreviousBackend Workflows](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/api-workflows)
[NextManually Building UI](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/design-standards/manually-building-ui)
Last updated 4 years ago
Was this helpful?
[Manually Building UI](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/design-standards/manually-building-ui)
---
# Cookies Permission | Canvas Documentation
[PreviousSignup & Login](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/signup-login)
[NextWidgets](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/widgets)
Last updated 4 years ago
Was this helpful?
**Element name:** cookies\_permission **Purpose:** Get the user's consent to store cookies on their device
To use this feature, make sure you enable this setting in the .
By default, the cookies\_permission reusable element is placed in a floating group anchored to the bottom of marketing pages.
To add this banner to another page, simply select "FloatingGroup cookies" and copy the floating group with workflows. On the new page, right click and select page with workflows. Make sure the floating group is flushed to the bottom of the page and set to "vertically float to the bottom".
[Admin portal](https://docs.airdev.co/canvas/v/2.0.0/using-the-template/reference/pages/owners-portal-page#admin-portal-overview)
---
# 404 | Canvas Documentation
[PreviousVerify](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/verify)
[NextReusable elements](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements)
Last updated 4 years ago
Was this helpful?
**Page name:** 404 **Purpose:** Users are redirected to this page anytime they try to navigate to a page the does not exist
Your app will come with a simple 404 page. A 404 page is also known as an “error page” or “Page Not Found” page. This page indicates that the user reached the domain they requested, but the URL path provided no information or the page does not exist.
---
# Widgets | Canvas Documentation
[PreviousCookies Permission](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/cookiespermission)
[NextApp security](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/widgets/app-security)
Last updated 4 years ago
Was this helpful?
**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. Typically you should clone these reusables and customize them for your specific use case.
**Workflow Widgets** Workflow widgets contain workflows that can be referenced from the page using the 'Trigger a custom workflow from a reusable element' action.
[UI Widgets](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/widgets/ui-widgets)
[Workflow Widgets](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/widgets/workflow-widgets)
---
# Reusable elements | Canvas Documentation
[Previous404](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/404)
[NextHeader](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header)
Last updated 4 years ago
Was this helpful?
Detailed references for each reusable element in the Canvas Base Template, complete with screenshots and in-depth descriptions.
[Header](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header)
[Footer](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/footer)
[Signup & Login](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/signup-login)
[Cookies Permission](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/cookiespermission)
[Admin Portal](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/owners-portal-reusables)
---
# Legal | Canvas Documentation
[PreviousLogin](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/login)
[NextReset Password](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/reset-password)
Last updated 4 years ago
Was this helpful?
**Page name:** legal **Purpose:** Displays the text content for the Terms & Conditions and Privacy Policy.
You can mange the **Privacy policy** content from Settings > Privacy policy in the .
You can mange the **Terms of service** content from Settings > Terms of service in the . You can change the color of the legal banner from Settings > Legal page banner color in the .
[Admin portal](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal)
[Admin portal](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal)
[Admin portal](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal)
---
# Login | Canvas Documentation
[PreviousAccount](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/account)
[NextLegal](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/legal)
Last updated 4 years ago
Was this helpful?
**Page name:** login **Purpose:** Provides functionality for your users to signup and login to your application and go through the forgot password process You can mange the log in page design from Branding > Log in page style in the .
[Admin portal](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal)
---
# Reset Password | Canvas Documentation
[PreviousLegal](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/legal)
[NextVerify](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/verify)
Last updated 4 years ago
Was this helpful?
**Page name:** reset\_pw **Purpose:** Allows the user to reset their password when they click the 'Forgot password' link on the login page
When the user goes through the 'Forgot password' flow they will receive an email with a link to reset their password. Clicking that link will bring them to this page.
---
# Index | Canvas Documentation
[PreviousPages](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages)
[NextAdmin Portal](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal)
Last updated 4 years ago
Was this helpful?
**Page name:** index **Purpose:** Acts as the home page for your application and manages all user redirection for logged in users
The index page is the landing page for all non logged in users. You can manage the design and content through the in the Admin Portal.
[Pages tab](https://docs.airdev.co/canvas/3.6/canvas-functionality/marketing-pages#building-your-marketing-page)
---
# Reference | Canvas Documentation
[PreviousMiscellaneous](https://docs.airdev.co/canvas/3.6/canvas-functionality/miscellaneous)
[NextPages](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages)
Last updated 4 years ago
Was this helpful?
The content in the reference section assumes an intermediate level of proficiency with both Bubble and the Canvas system and contains detailed reference materials on the .
If you want to extend the app in more complex ways than outlined in the previous sections, or understand each page's function in more detail, read through this section.
[Canvas Base Template](https://bubble.io/template/canvas-starter-template-1541110863579x114287102114398200)
[Pages](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages)
[Menu Focus Elements](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/menu-focus-elements)
[Data types](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/data-structure)
[Option Sets](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/option-sets)
[Backend Workflows](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/api-workflows)
[Reusable elements](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements)
---
# SEO | Canvas Documentation
[](https://docs.airdev.co/canvas/3.6/using-bubble/seo#optimizing-your-site)
Optimizing your site
-----------------------------------------------------------------------------------------------------
There are a few best practices that you can follow to make sure your site is optimized for SEO
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/seo#meta-tags-for-pages)
Meta tags for pages
Make sure that each of your pages has an SEO Title & Description set up as those will be read by the search engine and will show up on the search results page.
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/seo#h1-h2-...-tags-for-text-content)
H1/H2/... tags for text content
Set header text for text content that represents headings of various levels on your page. That will help search engines better understand the structure of the page.
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/seo#alt-tags-for-images)
Alt tags for images
Set these tags for each of the images used on your page. This will help search engines understand what your images are.
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/seo#links-instead-of-buttons)
Links instead of buttons
For navigation within the site it's often better to use links instead of buttons. That's because links are recognized by the search engine as connected to a page they're linking to and buttons aren't.
[](https://docs.airdev.co/canvas/3.6/using-bubble/seo#getting-pages-indexed)
Getting pages indexed
-------------------------------------------------------------------------------------------------------
Now that your content is optimized, the key thing that you have to do in order to be discoverable through Google is to make sure that Google knows about your site. On a high level there are 2 ways that you can do that:
1. You can wait for the Google crawler to come across a link to your content on other sites that Google knows about
2. You can tell Google about your site and its page
The first option relies on there being links to your site, which can take a long time to happen. So the second option is your best bet. Here's how to do that:
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/seo#set-up-your-sitemap)
Set up your sitemap
You'll first need to set up your "sitemap.xml" file, which is the file that gives Google the full list of pages in your application. Bubble makes it very easy to do so under the Settings tab.
Note that some of those pages will be static and some of them will be dynamic (i.e. product page). Luckily Bubble is smart enough to handle both.
For dynamic pages you should set a pretty URL field for your page, so that the URL has human readable text it in instead of the unique ID of the object
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/seo#provide-your-sitemap-to-google)
Provide your sitemap to Google
Now that you have your sitemap set up, you should tell Google about it.
[PreviousSecurity](https://docs.airdev.co/canvas/3.6/using-bubble/security)
[NextSpeed](https://docs.airdev.co/canvas/3.6/using-bubble/speed)
Last updated 4 years ago
Was this helpful?
Create a account and add your domain to it. This might require you to verify the domain ownership as part of the process. Then, once your domain is set up, just add a link to your sitemap file, which will generally be https://\[yourdomain.com\]/sitemap.xml. Google will then take a little while (up to a few days) to crawl all of the links and discover their content.
[Search Console](https://search.google.com/search-console)
---
# Verify | Canvas Documentation
[PreviousReset Password](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/reset-password)
[Next404](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/404)
Last updated 4 years ago
Was this helpful?
**Page name:** verify **Purpose:** Destination page where users are directed to when they click the verify button from the email in the email verification process
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/verify#workflows)
Workflows
------------------------------------------------------------------------------------------------------------------
The verify page has four events that trigger different workflows depending on the scenario
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/verify#page-is-loaded-and-current-email-verification-is-empty)
**Page is loaded and current email verification is empty**
If`current page email verification is empty`, users will be shown an expired link group, and they will automatically be sent a new verification email.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/verify#page-is-loaded-and-current-email-verification-is-not-empty)
**Page is loaded and current email verification is not empty**
They will be shown am email verified group and the user's `date completed sign up` will be marked as completed. If the `email verification user's email`is different from the email verification's `email` field, then the user's email will be updated to the new email. Once the user's email is verified on this page, an API workflow will be scheduled to delete the current page email verification.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/verify#button-continue-is-clicked)
**Button continue is clicked**
Users will be redirect to the `index` page if they are logged in. If they are not logged in, they will be taken to the `login` page.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/verify#button-go-home-is-clicked)
**Button go home is clicked**
They will be redirected to the index page.
If the user waits too long to verify their email the link will expire
---
# Key Features | Canvas Documentation
[PreviousIntroduction](https://docs.airdev.co/canvas/3.6)
[NextWhat's New](https://docs.airdev.co/canvas/3.6/whats-new)
Last updated 4 years ago
Was this helpful?
[](https://docs.airdev.co/canvas/3.6/features#admin-portal)
Admin portal
-----------------------------------------------------------------------------
Canvas has a fully designed and functional admin portal built in to the base template. Manage your app settings, view and add users, create new marketing pages, and much more.
[](https://docs.airdev.co/canvas/3.6/features#marketing-page-builder)
Marketing page builder
-------------------------------------------------------------------------------------------------
Need fast loading, SEO friendly marketing pages to show off your application to potential users? Canvas now comes with a and a host of professionally designed blocks to create a beautiful marketing site on top of your main application!
[](https://docs.airdev.co/canvas/3.6/features#canvas-extension)
Canvas extension
-------------------------------------------------------------------------------------
Use the Canvas extension at any time during development to expand your application with professionally designed, fully responsive or update the colors throughout your application all directly from within the Bubble editor.
[](https://docs.airdev.co/canvas/3.6/features#custom-email-templates)
Custom email templates
-------------------------------------------------------------------------------------------------
We've integrated Canvas with Sendgrid to send transactional emails using a beautiful HTML template. You can create unlimited with dynamically populated data directly from the admin portal.
[](https://docs.airdev.co/canvas/3.6/features#built-in-user-management)
Built-in user management
-----------------------------------------------------------------------------------------------------
Almost every application will need to provide their users some basic functionality for signing up, logging in, and managing their account details. However, creating this functionality can add a lot of time to your build.
As much of the functionality for user management is the same across applications, you can find yourself rebuilding the same elements and workflows many times.
We have been able to streamline this process and from signup/login, password reset, email verification, profile management and much more, the Canvas base template comes with a robust and fully functional user management system ready to go as soon as it is downloaded.
[page builder](https://docs.airdev.co/canvas/3.6/canvas-functionality/marketing-pages)
[pages & blocks](https://docs.airdev.co/canvas/3.6/canvas-functionality/pages-and-modules)
[email templates](https://docs.airdev.co/canvas/3.6/canvas-functionality/emails-and-alerts#email-templates)
---
# Introduction | Canvas Documentation
[NextKey Features](https://docs.airdev.co/canvas/3.6/features)
Last updated 4 years ago
Was this helpful?
[](https://docs.airdev.co/canvas/3.6#welcome-to-canvas)
Welcome to Canvas!
-------------------------------------------------------------------------------
Canvas is a framework based on that non-coders can use to very rapidly build powerful and beautiful web applications. The framework is built and maintained by , an ultra-rapid software development firm based in San Francisco.
Canvas doesn't require any previous software knowledge or experience. But learning how Bubble and Canvas work does require significant time investment to get to the point when you can build something great. If you are starting from scratch, you should plan on spending at least a few weeks learning both of the tools.
[](https://docs.airdev.co/canvas/3.6#what-is-canvas)
What is Canvas?
-------------------------------------------------------------------------
Canvas is a development framework based on that combines 3 things:
1. **Base Template**: This app template contains features that almost every application needs - things like marketing pages, user management, admin portal, and so much more.
2. **Pages & blocks:** These are smaller UI & UX components that can be added to the Base Template in order to build almost anything that you might imagine. They also provide consistency to your app's design, so pages you add to the app don't look out of place.
3. **Standards & best practices:** These will help you make sure your application's functionality, design, and integrations are properly built and result in the best product possible.
[](https://docs.airdev.co/canvas/3.6#why-canvas)
Why Canvas?
-----------------------------------------------------------------
There is a major shift happening that's changing not only how software is built, but who builds it. Specifically, no-code tools like Bubble now allow non-coders to build complex software applications without writing a single line of code.
At AirDev, we've spent years building software without code for companies ranging from one-person startups to Fortune 50 enterprises. Through our work we've identified common patterns that exist in applications and turned those into this framework. Here's what the framework helps us do:
1. **Build and launch faster:** Because large parts of both functionality and design are templatized, we don't have to spend time reinventing the wheel and instead focus only on the parts that are different about a particular application.
2. **Build better products:** We've spent a lot of time thinking through and iterating on our templates and standards. When we use them we can be sure that the application will look good and work well.
3. **Build in a transferrable way:** Because our products follow the same framework, they're much easier to transfer between developers who know the framework. This is critical for long-term projects that require lots of people to be involved.
We're excited to share the Canvas framework with people and teams outside of AirDev, we hope you find it useful!
[Bubble](https://bubble.is/?ref=LBRPNATG)
[AirDev](https://airdev.co/)
[Bubble](https://bubble.is/?ref=LBRPNATG)
---
# Admin Portal | Canvas Documentation
[PreviousWorkflow Widgets](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/widgets/workflow-widgets)
[NextAdmin analytics](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/owners-portal-reusables/ownerdashboard)
Last updated 4 years ago
Was this helpful?
The is a complex page where the app admin of the platform can view, manage, and download raw site data.
To reduce the amount of workflows in the Admin Portal page, we've moved a lot of the app-wide settings workflows and UIs to separate reusable elements.
In each reusable element, we've included placeholder groups so you can easily add additional content to the groups by resizing the placeholder groups.
[Admin analytics](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/owners-portal-reusables/ownerdashboard)
[Admin email templates](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/owners-portal-reusables/adminemail)
[Admin legal popups](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/owners-portal-reusables/ownerlegalpages)
[Admin header & footer](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/owners-portal-reusables/ownerseosettings)
[Admin marketing pages](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/owners-portal-reusables/ownerhomepagesetup)
[Admin branding, launch, and settings](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/owners-portal-reusables/ownergeneralsettings)
[Admin portal canvas logic](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/owners-portal-reusables/ownersocialmediasettings)
[Admin Portal](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages#admin-portal-overview)
---
# Principles | Canvas Documentation
[PreviousLearning Bubble Basics](https://docs.airdev.co/canvas/3.6/using-bubble/bubble-basics)
[NextDatabase](https://docs.airdev.co/canvas/3.6/using-bubble/database)
Last updated 4 years ago
Was this helpful?
[](https://docs.airdev.co/canvas/3.6/using-bubble/principles#measure-twice-cut-once)
Measure twice, cut once
-----------------------------------------------------------------------------------------------------------------
It's much easier to use Bubble than it is to code, which makes it tempting to jump right in when trying to build something or change something that you've already built. That's usually a bad idea because you're much more likely to end up with a "Spaghetti Bubble App" (see ), which is difficult or impossible to maintain and iterate on. What you should do instead is carefully plan and structure both your initial functionality and ongoing improvements.
####
[](https://docs.airdev.co/canvas/3.6/using-bubble/principles#well-planned-vs-haphazard-development)
Well-planned vs haphazard development
Imagine this scenario (which we've seen multiple times): A startup is using Bubble for their SaaS product. The Bubble development team builds an initial version in a few weeks, which makes the sales team very happy. They go out to try to sell the product and start receiving feedback right away. Their first potential customer says, "If only your product had X feature, we would buy." "No problem," replies sales. They go to the development team and in just a few days, feature X is live. The potential customer is amazed and the first sale is made. This continues over and over again until sales gets used to the gratification of being able to quickly deliver any feature that customers ask for.
This model of development is not sustainable without factoring in the costs of maintenance that come with ever-increasing app complexity. Creating an app with all of those requested features would require substantial revision after every couple deliveries, or a smaller amount of up-front planning if the client knows which features they want to include in the application.
Over time, when an app is built by adding on many quickly delivered features, the Bubble logic gets very convoluted, poorly structured, and layered on top of each other. Eventually it becomes very difficult to maintain and build these applications which are filled with band-aids instead of thoughtful planning, which undermines one of the main advantages of using a no-code platform in the first place.
The bottom line is that you should stay very disciplined and not let Bubble lull you into a false sense of "this is easy." A well-built development process includes carefully planning every feature and making sure that you're building for maintainability and scalability.
[](https://docs.airdev.co/canvas/3.6/using-bubble/principles#find-the-simplest-way)
Find the simplest way
--------------------------------------------------------------------------------------------------------------
Blaise Pascal famously said, "I would have written a shorter letter, but I did not have the time." The same can be applied to software generally and Bubble applications specifically. It often takes much more effort and mental energy to come up with a simple way to do something than it takes to come up with a hard way to do it.
If you think about some of the most successful tech products as of late, these principles hold true. Uber, Slack, Stripe, and more all launched with a minimal set of critical functionality. All were easy to use and not bloated with unnecessary bells and whistles.
You may not be looking to build the next unicorn but the the lessons are universal:
* Eliminate any functionality that's not absolutely needed right away
* Make the UI as clean and simple as possible
* Decrease redundancy in your pages, workflows, and database structure
Making things simple may indeed end up taking more time than making them more complex. But the result will be a product that's easier to both use and maintain.
[](https://docs.airdev.co/canvas/3.6/using-bubble/principles#think-in-modules)
Think in modules
----------------------------------------------------------------------------------------------------
Modular structures are everywhere. Buildings are modular from the elevator (big module) to the brick (small module). Legos are very obviously modular. And our Bubble apps should be modular. Why? A few reasons:
* Modules have clearly defined inputs and outputs and can be plugged in anywhere without requiring duplicate work
* Modules are self-contained/independent and can thus be safely updated without affecting the rest of the application
* Modules allow multiple people to work together on a single project and then combine their efforts
* Modules structures are easier to understand
There are many ways to create modules in Bubble - through reuseables, custom workflows, API workflows, data triggers, and more. We'll talk more about these later.
[Spaghetti Code](https://en.wikipedia.org/wiki/Spaghetti_code)
---
# Account | Canvas Documentation
[PreviousAdmin Portal](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal)
[NextLogin](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/login)
Last updated 4 years ago
Was this helpful?
**Page name:** account **Purpose:** Enables your users to manage their profile and account credentials through a self service portal
The Canvas base template has the following navigation tabs visible by default but you can hide any of these by going to Group Main content > Group Main sidebar > Group Inner sidebar content in the elements tree.
We also have included 6 placeholder groups to add additional functionality.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/account#profile)
Profile
---------------------------------------------------------------------------------------------------------------
Here the user can update the profile picture as well as the first and last name on their account.
There are also two hidden groups that contain the UI for a user to set their username as well as fill out an about me section.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/account#login-credentials)
Login credentials
-----------------------------------------------------------------------------------------------------------------------------------
Let your users manage the email and password for their account while providing account security by requiring the current password for any changes to be made.
Contains all the UI and workflows to ensure the new password meets the password policy you have set up for your app.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/account#payments)
Payments
-----------------------------------------------------------------------------------------------------------------
Allow your users to update their payment method as well as view all their payment history on your platform
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/account#notifications)
Notifications
---------------------------------------------------------------------------------------------------------------------------
In the notifications tab the user can set their notification preferences. Please note, this is UI only in the base template and does not make any changes to your app. You will need to set up the workflows and logic to manage the preferences set here.
---
# Pages | Canvas Documentation
[Index](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/index)
[Admin Portal](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal)
[Account](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/account)
[Login](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/login)
[Legal](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/legal)
[Reset Password](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/reset-password)
[Verify](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/verify)
[404](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/404)
[PreviousReference](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference)
[NextIndex](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/index)
Last updated 3 years ago
Was this helpful?
---
# Footer | Canvas Documentation
[PreviousHeader](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header)
[NextSignup & Login](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/signup-login)
Last updated 3 years ago
Was this helpful?
**Element name:** footer **Purpose:** Provide the user with links to important pages and information at the bottom of the page.
Navigate to Headers/Footers > Footer navigation from the left side menu to get started.
The footer element is included by default on all marketing pages. For Bubble pages you will need to add it manually to any page you want to include it on.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/footer#pages)
Pages
You can set up links to any page you like in the pages tab. These can be the same pages you set up in the header or completely different.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/footer#legal)
Legal
The Canvas template comes standard with Terms and Privacy pages. Edit all the settings for these pages here.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/footer#social-media)
Social Media
Get the most out of your social media by adding all your social media pages to the footer of your application!
Elements as they are displayed in the footer
Actions available for the page links in the footer
---
# Backend Workflows | Canvas Documentation
[PreviousOption Sets](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/option-sets)
[NextDesign standards](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/design-standards)
Last updated 3 years ago
Was this helpful?
Your app must be on a paid Bubble plan to use Backend Workflows
Using backend workflows can be ideal and/or necessary in the following situations:
1. When you have long and complex workflows with a lot of actions
2. When you need to reuse the same workflow from different parts (pages/reusables) of the application
3. When you need to run a workflow on a list of things, (i.e., loop through a list)
4. When you need to schedule a workflow in the future (with the ability to cancel the workflow)
5. If you want your workflow to run asynchronously. Backend workflows run on Bubble's server, and any workflow on a standard Bubble page which schedules a Backend workflow won't need to wait for the entire (Backend) workflow to finish before moving on to the next step in the front-end workflow.
6. If you want to create a webhook - or endpoint - to allow other applications to send and receive data from your Bubble app.
For more information on Backend workflows, read AirDev's and .
Pro tip: If you'd like to run backend workflows synchronously (in order in the WF) and receive a response to the workflow action, set up an API connector action that points at the backend Workflow's API. Note that any API token used in the API Connector action should not be passed in the URL, but in the headers, and it should be marked as "Hidden" so that it cannot be stolen by app users.
Our template comes with 11 Backend workflows in the following folders
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/api-workflows#verify)
Verify
* **verify\_send:** This will create a new verify record in the database and send a code to the user via email or sms
* **verify\_check:** This endpoint is called when the user submits a code to verify their email or phone number. When run, Canvas will verify whether the code is valid and return true or false
* **verify\_delete:** Deletes a verify record 15 minutes after it has been created.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/api-workflows#emails)
Emails
* **send\_email**_**\_**_**template:** This workflow is a template action that can be copied and edited for new email template backend actions.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/api-workflows#canvas)
Canvas
* **check\_app\_location:** Determines if this application's identifiers are correct. This is necessary for the Canvas Page Builder to function properly.
* **record\_registration:** Used one time when the Canvas app is registered with the Page Builder. It generates a private token which will be used for authentication between the two apps. Additionally, it re-generates the public token, since the public token used for this call was sent in the URL of the Canvas admin user's browser during the registration process.
* **update\_usersnap** \- When you start a project with AirDev, we'll use this workflow to enable usersnap testing on your app so you can submit feedback in our client management portal.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/api-workflows#page-builder)
Page builder
* **check\_request:** Page builder uses this to authenticate both the private and public tokens with a Canvas app. Returns information used by the page builder, like page files' names and URLs.
* **update\_page:** The Canvas Page Builder uses this as part of the page publishing flow. It updates a page's HTML and other fields.
* **upload\_files:** Canvas Page Builder uses this to upload a list of files and images to a page.
* **upload\_image:** Canvas Page Builder uses this to a single image to a page.
[Bubble Development Guide](https://docs.airdev.co/canvas/3.6/using-bubble/bubble-basics)
[Bubble's Manual](https://manual.bubble.is/using-the-bubble-api/how-to-use-the-api.html)
---
# Signup & Login | Canvas Documentation
[PreviousFooter](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/footer)
[NextCookies Permission](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/cookiespermission)
Last updated 4 years ago
Was this helpful?
**Element name:** signup/login **Purpose:** Provide the user with signup, login, and password reset functionality
Our standard signup/login reusable element can be put on a login page, and is included in a popup in the popupreusables reusable element. We add the popupreusables reusable element to the so we can trigger widely used popups from any page in the app.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/signup-login#custom-workflows)
Custom workflows
------------------------------------------------------------------------------------------------------------------------------------------
* **complete sign up** \- This will mark the current user's `Date completed sign up` field as completed and end the sign up flow.
* **move current step** - This will move the sign up step to the next step.
* **select user type** - This will update the user type selection
* **update signup method (of type text)** \- By default, the signup method will be "Email". If a user is signing up with a social media account, please update the custom workflow "update signup method" in the sign up workflow to the name of the social media login method (e.g. Linkedin, Facebook, Twitter, and etc.). This will ensure that a logged in user cannot see the login credentials tab on the account page (it will only be visible if a user's login method is "Email").
* **update profile (email verification)** - This workflow will only fire if the App owner requires users to verify their emails during sign up. This will schedule an API workflow to send an email verification link to the user.
* **update profile (no email verification)** - This workflow will only fire if the App owner does not require users to verify their emails during sign up. This will mark the current user's `Date completed sign up` field as completed and end the sign up flow.
* **set login** - Show the login view
* **set reset\_pwd** \- Show the reset PW view
* **set signup** - Show the signup view
* **restrict to login** \- Restrict the reusable to show only the log in view
* **restrict to signup** \- Restrict the reusable to show only the sign up view
* **close popup** \- close the popup that this signup/login reusable is placed on. This is already set up in the template on the popupsreusable element.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/signup-login#popup-usage)
Popup usage
--------------------------------------------------------------------------------------------------------------------------------
When using the signup/login popup, instead of signing in on the signup/login page, users will remain on the page that they've signed up on until they fill out the form in step 2 of the signup process. By default, step 2 is where a new User inputs their First and Last name.
After this, if email verification is enabled, users will be redirected to the login page until they've verified their email. Otherwise, this popup will close.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/signup-login#api-workflows)
API workflows
------------------------------------------------------------------------------------------------------------------------------------
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/signup-login#more-signup-login-info)
More signup/login info
------------------------------------------------------------------------------------------------------------------------------------------------------
See the "Email Verification" section for more info on how to configure this reusable element.
There are ten custom workflows in the signup/login reusable element (some are duplicated in the popupsreusable so they can be triggered from the as well):
[header](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header)
[header](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header)
Bubble editor view
---
# Getting Started | Canvas Documentation
[PreviousFor Designers](https://docs.airdev.co/canvas/3.6/for-designers)
[NextBranding & Design](https://docs.airdev.co/canvas/3.6/canvas-functionality/branding-and-design)
Last updated 3 years ago
Was this helpful?
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/getting-started#get-the-template)
Get the Template
-----------------------------------------------------------------------------------------------------------------
Getting the AirDev Canvas Base Template through Bubble's template marketplace is a snap.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/getting-started#add-to-your-account)
Add to your account
The first step to getting the template is adding it to your Bubble account. To do this, go to the and press Use Template.
If you aren't signed in to a Bubble account, you'll be prompted to log in or sign up. Follow the prompts from Bubble to complete this process.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/getting-started#create-a-new-app)
Create a new app
Now that you've added the template to your account you can create new apps in Bubble using the Canvas template! From the My Apps tab on your Bubble home page, click the blue 'New App' button. In the popup, click on the 'Start from a template' dropdown and select Canvas Base Template.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/getting-started#get-the-chrome-extension)
Get the Chrome Extension
---------------------------------------------------------------------------------------------------------------------------------
To extend your template with new Bubble pages and blocks from Canvas you will need to .
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/getting-started#explore-the-admin-portal)
Explore the Admin Portal
---------------------------------------------------------------------------------------------------------------------------------
A great feature of the Canvas template is that it comes preconfigured with an Admin Portal where you can manage all the settings for your application.
The Admin Portal is accessed from the front end of your application (not from the Bubble editor). To begin exploring your Admin Portal, when you are logged into the Bubble editor go to Data > App Data > All Users and then click on`'Run as'` beside the user with the email '[\[email protected\]](https://docs.airdev.co/cdn-cgi/l/email-protection)
'
The admin portal offers access to the following settings from the left navigation menu:
**Launch Checklist** The Launch Checklist provides step by step guidance to help you get started with your new application as quickly as possible.
**Settings** Here you can update all the general settings for your application like the user signup process and your privacy policy
**Analytics** View analytics on new, active, and total users across your application.
**Users** View a list of all your users including role, last login, and email. Add a new Admin to your application.
**Data Type 1** A sample setup to demonstrate how to expand the functionality of the admin portal using your own custom data types.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/getting-started#naming-conventions)
Naming conventions
---------------------------------------------------------------------------------------------------------------------
In names of data types and reusable elements, we have included a gear emoji (⚙) to indicate that these specific elements should not be edited, or that you should be very cautious about making changes there. These data types and reusables touch a lot of different features or are easy to break when changed.
The data types also include "system\_" prior to the reusable's name.
Another thing to note is that Canvas workflows are green. We encourage using workflow folders or creating a color coding convention for your app in order to better organize your app's workflows.
**Branding** From your app's name to your social media links you can setup all your applications branding here.
**Pages** View Bubble pages and add unlimited marketing pages to your app using the Canvas page builder.
**Header / Footer** Manage the navigational links and icons for your header and footer.
**Emails** Add and edit email templates across your platform.
To unlock all the features of the base template such as the ability to use the , adding , and updating your , be sure to complete the Add App Identifiers and Register App steps from the Launch Checklist.
[template page](https://bubble.io/template/canvas-starter-template-1541110863579x114287102114398200)
[install the Chrome extension](https://chrome.google.com/webstore/detail/canvas-by-airdev/apmembkcpmjhmecifhckdidppfoiajie)
[Learn More](https://docs.airdev.co/canvas/3.6/canvas-functionality/branding-and-design)
[Learn More](https://docs.airdev.co/canvas/3.6/canvas-functionality/pages-and-modules)
[Learn More](https://docs.airdev.co/canvas/3.6/canvas-functionality/menus-and-navigation#header-menu)
[page builder](https://docs.airdev.co/canvas/3.6/canvas-functionality/pages-and-modules#adding-static-marketing-pages)
[Bubble pages and blocks with the extension](https://docs.airdev.co/canvas/3.6/canvas-functionality/pages-and-modules#adding-dynamic-canvas-pages-and-modules)
Please don't change the existing data fields on these data types
The "system" reusable elements as of July 30, 2021
[app's colors](https://docs.airdev.co/canvas/3.6/canvas-functionality/branding-and-design#update-your-apps-colors)
[Learn More](https://docs.airdev.co/canvas/3.6/canvas-functionality/emails-and-alerts#emails)
---
# Roles & Permissions | Canvas Documentation
[PreviousBubble Pages & Blocks](https://docs.airdev.co/canvas/3.6/canvas-functionality/pages-and-modules)
[NextMenus & Navigation](https://docs.airdev.co/canvas/3.6/canvas-functionality/menus-and-navigation)
Last updated 4 years ago
Was this helpful?
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/roles-and-permissions#the-bubble-pages-option-set)
The 'Bubble Pages' option set
-----------------------------------------------------------------------------------------------------------------------------------------------
This option set is used to manage a user's permission to view a specific page.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/roles-and-permissions#display-attribute)
Display attribute
In the header element is a workflow that checks whether the current users role is allowed to access the current page. This is done by checking the page name in the url against the page names listed in this option set.
For this reason, it is imperative that the Display text matches exactly the page name shown in the editor.
If you change the name of a Bubble page, don't forget to update it here!
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/roles-and-permissions#private-attribute)
Private? attribute
When checking for a user's permission to access a page, Canvas checks whether the page is marked as private. If this attribute is set to yes, the user will only be allowed to view the page if this option's List of Roles contains the current user's role.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/roles-and-permissions#roles-attribute)
Roles attribute
This is a list connection to the Role option set. Any user role that should be able to access this page should be added to this list.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/roles-and-permissions#the-role-option-set)
The 'Role' option set
-------------------------------------------------------------------------------------------------------------------------------
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/roles-and-permissions#display-attribute-1)
Display attribute
This text is what is shown in the admin portal and throughout your application to display the role of a user.
Since the 'account' page lets a user manage their login credentials and profile data, you will typically want to add every role you create to the Account page's list of roles
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/roles-and-permissions#default-roles)
Default Roles
Your Canvas template has two user roles preconfigured for you but you can add as many roles as you need to meet your applications needs.
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/roles-and-permissions#the-app-admin-role)
The App Admin Role
Redirects and permissions are predefined in your template that will automatically direct a user assigned the App Admin role to the admin portal when they are logged in. Privacy conditions are in place as well that will prevent any user without the App Admin role from being able to view the admin portal.
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/roles-and-permissions#the-standard-role)
The Standard Role
This role represents any default user on your platform that does not need access to the admin portal
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/roles-and-permissions#adding-a-new-role)
Adding a new role
To add a new role:
* Add a new option to the Role option set (e.g. Account Admin or Outside Sales)
* Add the new role to any Bubble Page option that the role should be allowed to access
* Assign the Role to Users, usually through one of these methods:
* Assign the new Role to users manually in the Bubble Editor's Data tab
* Build the logic to let App Admins sign those Users up from the admin page
* Build the logic to assign the new Role to the Users when they're signed up
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/roles-and-permissions#page-redirects)
Page Redirects
-------------------------------------------------------------------------------------------------------------------
As a best practice we recommend using the index page of your app as the default page to which a user is redirected when the user doesn't meet privacy rules for a specific page. This gives you a single place to manage all the redirects for your application for each type of user role.
In the standard Canvas Template the Index page redirects users to the Admin Portal page if they are logged in as a user with an App Admin role . Otherwise they will not be redirected away from the Index page.
Included in your Canvas template is an option set named Role that is used to manage the user permissions for your application. See below.
If you create a new page to which a specific role should be redirected, you can add additional actions to the above workflows. For more details on how they are currently set up or how to add conditional redirects see our complete reference for the
While Canvas provides you a great way to manage user permissions and page redirects at a high level you should always create the appropriate to protect your data within the Bubble editor.
[privacy rules](https://manual.bubble.io/working-with-data/privacy-and-security)
[Default Roles](https://docs.airdev.co/canvas/3.6/canvas-functionality/roles-and-permissions#default-roles)
The Display text should match the page name shown here exactly
Default redirects set up on the Canvas index page
[Index page.](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages#index-page)
---
# Menu Focus Elements | Canvas Documentation
[PreviousAdmin options settings](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/owners-portal-reusables/admin-option-settings)
[NextData types](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/data-structure)
Last updated 3 years ago
Was this helpful?
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/menu-focus-elements#dropdown-menu)
Dropdown menu
-------------------------------------------------------------------------------------------------------------------------------------------
**Element name:** menufocus\_template **Purpose:** Provide the user with a concise list of actions they can take in a convenient dropdown menu.
The dropdown menu is used consistently throughout the Canvas template to provide the user with actions they can take such as Edit/delete a thing, View more details, Send a message, etc.
The dropdown is triggered by clicking on the icon, can be dismissed by clicking anywhere outside the dropdown, and is most often used in repeating groups to provide action items for each thing in the list.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/menu-focus-elements#clone-the-reusable-template)
**Clone the reusable template**
Open the **menufocus\_template** and from the top bar of the Bubble editor click Edit > Clone this Page.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/menu-focus-elements#assign-the-type-of-content)
Assign the type of content
With your cloned menufocus\_template open, double-click in the gray area of the editor to open up the settings for the reusable. Change the 'Type of content' to the datatype you will be using this menu to edit. You will need to change the type of content for the GroupFocus Dummy as well.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/menu-focus-elements#set-up-the-dropdown-buttons)
Set up the dropdown buttons
In the elements tree click the '+' to open the GroupFocus Dummy. This group contains all the dropdown buttons in the menu. Group Option 2 and Group Option 3 are already set up as the Edit and Delete actions.
There are three more Group Options (1, 4, & 5) that are unused and can be customized to add more buttons to your menu. Each of these groups has a corresponding event in the workflow tab that will be run when the group is clicked.
The menufocus\_template reusable element also contains two popups that correlate to the Edit and Delete actions:
* **Popup Edit** Clicking on Option 2 (Edit) in the dropdown will open a standard edit form popup to create or edit a thing.
* **Popup Remove** Clicking on Option 3 (Delete) in the dropdown will open a popup to remove a thing.
Customize/duplicate these popups to your purposes.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/menu-focus-elements#using-the-custom-events)
Using the custom events
Each popups can be triggered by the corresponding custom events 'Create/edit thing' and 'Remove thing'.
Setting up custom events within a reusable gives you the option of using that workflow from the page it is on with the 'Trigger a custom event from a reusable element' action.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/menu-focus-elements#user-menu-overview)
User Menu Overview
-----------------------------------------------------------------------------------------------------------------------------------------------------
Element name: **admin\_users\_menu**
This focus group reusable element contains a menu of dropdown buttons for the user object. The menu popover is triggered by clicking on the icon and can be dismissed by clicking anywhere outside of the focus group. This reusable element is used in the Users tab in the Owner's Portal.
1. Clicking on Option 1 (Password reset) will schedule an API workflow to send a password reset email to the user.
2. Clicking on Option 3 (Deactivate) will open `Popup Remove user`. Deactivating the user will only mark the user as inactive and would not delete the user from the app.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/menu-focus-elements#email-templates-menu)
Email Templates Menu
---------------------------------------------------------------------------------------------------------------------------------------------------------
Element name: **admin\_email\_menu**
This focus group reusable element contains a menu of dropdown buttons for the Email template object. The menu popover is triggered by clicking on the icon and can be dismissed by clicking anywhere outside of the focus group. This reusable element is used in the Emails tab in the Admin Portal.
This reusable element contains two popups:
1)Popup Edit Email Popup - Clicking on Option 2 (Edit) in the dropdown will open a standard add/edit form popup to create or edit an Email template. To learn more about email templates and how to use them, please click here.
2)`Popup Remove` - This dummy popup is included and can be used to delete a thing.
For example, you can add the menufocus\_template element to the on a page and trigger a custom event to create/edit or remove a thing.
3)
[hidden variables popup](https://docs.airdev.co/canvas/v/3.6/canvas-functionality/data-and-workflows#using-the-hidden-variables-popup)
[`Hidden variables popup`](https://docs.airdev.co/canvas/v/3.6/canvas-functionality/data-and-workflows#using-the-hidden-variables-popup)
Dropdown menu for a Canvas marketing page
---
# Branding & Design | Canvas Documentation
[PreviousGetting Started](https://docs.airdev.co/canvas/3.6/canvas-functionality/getting-started)
[NextMarketing Pages](https://docs.airdev.co/canvas/3.6/canvas-functionality/marketing-pages)
Last updated 4 years ago
Was this helpful?
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/branding-and-design#basic-branding)
Basic Branding
-----------------------------------------------------------------------------------------------------------------
It's important to update the branding of your application in the admin portal as we use this data throughout the application to display your company's information.
To get started, click the Branding tab under Setting in the left menu of the admin portal.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/branding-and-design#name)
Name
The name that is set here is used extensively throughout the front end of your application as well as in emails and notifications sent to your users.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/branding-and-design#logo)
Logo
In this tool you can set desktop and mobile logos for both light and dark backgrounds. The logos set here are displayed in the top left of your application header as well as in your emails and other communication.
The browser favicon cannot be set here and must be uploaded to the Bubble editor under Settings > General > Favicon
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/branding-and-design#seo-and-social)
SEO & Social
---------------------------------------------------------------------------------------------------------------
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/branding-and-design#seo)
SEO
SEO descriptions and tag lines are set under Branding > Default SEO/Social Tags. This data is when indexing your app's pages for search results and by other services to display data about your platform in link previews.
Marketing pages created using the page builder and Bubble pages that are added with the extension will all use these SEO tags by default.
If you would like to customize these tags for a specific page:
* **Marketing pages** Change the SEO settings for an individual page from the Pages tab in the admin portal
* **Bubble pages** Edit the SEO settings directly from the page header input on the page's property inspector
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/branding-and-design#social-links)
Social Links
Links to your social media channels can be shown in the footer throughout the application. To manage what is displayed click on the Header/Footer link in the left menu, scroll down to the Footer section, and click on Social media tab.
Here you can manage what links are shown and the icons that should be displayed.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/branding-and-design#styles-and-colors)
Styles & Colors
---------------------------------------------------------------------------------------------------------------------
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/branding-and-design#using-styles-instead-of-setting-individual-properties)
Using Styles instead of setting individual properties
Canvas uses a consistent set of styles (set in the`Styles` tab). We recommend using these styles instead of manually setting visual attributes on an element, as this maintains consistency and makes it easier to make adjustments later.
You can make adjustments to these styles by going to the Styles tab in the Bubble editor.
If you might be using some of our advanced features such as style updates, you should refrain from modifying existing styles or changing any of their names.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/branding-and-design#use-conditional-properties-if-you-need-to-deviate-from-a-style)
Use conditional properties if you need to deviate from a style
It's not unusual for a specific element to need formatting specific to only that element. When this scenario arises, you can use a conditional to set a specific property for that element. For instance, maybe all the properties on the `Text_Regular_Black_Body_16pt` style are perfect except you need the text to be center aligned.
Rather than removing the style for that text element, we can adjust the text alignment property using a conditional that has an expression which will always be true.
Under the Conditional tab in the property editor for the element you need to change, click 'Define another condition', add an expression that say's `This url is not empty`, select the Text alignment property and set it to Center.
Because the url for the site will always exist (i.e. is not empty) this condition will always be true so the text will display with center alignment. And since we have maintained the linkage to the style itself, if we make any changes to this style it will automatically be reflected in this element as well!
There are other 'always true' expressions that can be used such as `Current date/time is not empty` or `This element is visible`
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/branding-and-design#update-your-apps-colors)
**Update your App's Colors**
At times you need to change the main colors your app is using. While you could do this by going through all the styles one by one, Canvas makes this simple by providing a tool in the Canvas extension that will do all the work for you.
Open the Chrome extension and click on 'Update app color'. Here you can select your primary, secondary, and tertiary colors for the app. Select your new colors and click 'Update colors'.
It will take Canvas up to 5 minutes to update the colors across all the styles in your application. You will need to leave your browser window open while the colors are being updated so plan accordingly when triggering this action.
**How to use the different types of colors**
**Primary Colors**: Styles with this color should be used for the main colors through your application and for positive action elements such as a button that creates or updates a thing in your database.
**Secondary Colors**: Styles with this color should be used to accent the design of your application as well as secondary action elements such as a Save As Draft button that is an alternative to a primary action Save & Publish button.
**Tertiary Colors**: Styles with this color should be reserved for warning, alert, and negative action elements such as a delete button
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/branding-and-design#update-your-apps-styles)
Update your App's Styles
If your version of Canvas is not the latest version, when you add a new page or block to your app it may contain styles that have not yet been added to your Bubble application . In this scenario you will be prompted to update the app's styles.
It will take Canvas 5 - 10 minutes to update the styles in your application. You will need to leave your browser window open while the styles are being updated so plan accordingly when triggering this action.
The Canvas template is based on the principles, which we use with most of our clients. This makes it easy to translate specs into apps without getting caught up in the creative process.
Not sure what colors to use? Check out this r for ideas!
[AirDev Canvas Design](https://airdev.co/design)
[color palette generato](https://coolors.co/app)
[used by Google](https://docs.airdev.co/canvas/3.6/using-bubble/seo)
Link preview for Canvas
Edit properties in the Styles tab
---
# Introduction | Canvas Documentation
[NextKey Features](https://docs.airdev.co/canvas/features)
Was this helpful?
[](https://docs.airdev.co/canvas#welcome-to-canvas)
Welcome to Canvas!
---------------------------------------------------------------------------
Canvas is a framework based on that non-coders can use to very rapidly build powerful and beautiful web applications. The framework is built and maintained by , an ultra-rapid software development firm based in San Francisco.
Canvas doesn't require any previous software knowledge or experience. But learning how Bubble and Canvas work does require significant time investment to get to the point when you can build something great. If you are starting from scratch, you should plan on spending at least a few weeks learning both of the tools.
[](https://docs.airdev.co/canvas#what-is-canvas)
What is Canvas?
---------------------------------------------------------------------
Canvas is a development framework based on that combines 3 things:
1. **Building Framework Template**: This app template contains features that almost every application needs - things like marketing pages, user management, admin portal, and so much more.
2. **Pages, blocks & elements:** These are smaller UI & UX components that can be added to the template in order to build almost anything that you might imagine. They also provide consistency to your app's design, so pages you add to the app don't look out of place.
3. **UI patterns:** These are full page UI patterns with built-in UI & UX components and blocks that you can easily customize right out of the box.
4. **Standards & best practices:** These will help you make sure your application's functionality, design, and integrations are properly built and result in the best product possible.
[](https://docs.airdev.co/canvas#why-canvas)
Why Canvas?
-------------------------------------------------------------
There is a major shift happening that's changing not only how software is built, but who builds it. Specifically, no-code tools like Bubble now allow non-coders to build complex software applications without writing a single line of code.
At Airdev, we've spent years building software without code for companies ranging from one-person startups to Fortune 50 enterprises. Through our work we've identified common patterns that exist in applications and turned those into this framework. Here's what the framework helps us do:
1. **Build and launch faster:** Because large parts of both functionality and design are templatized, we don't have to spend time reinventing the wheel and instead focus only on the parts that are different about a particular application.
2. **Build better products:** We've spent a lot of time thinking through and iterating on our templates and standards. When we use them we can be sure that the application will look good and work well.
3. **Build in a transferrable way:** Because our products follow the same framework, they're much easier to transfer between developers who know the framework. This is critical for long-term projects that require lots of people to be involved.
We're excited to share the Canvas framework with people and teams outside of Airdev, we hope you find it useful!
[Bubble](https://bubble.is/?ref=LBRPNATG)
[Airdev](https://airdev.co/)
[Bubble](https://bubble.is/?ref=LBRPNATG)
---
# Learning Bubble Basics | Canvas Documentation
Learning how to use Bubble takes work. While not as complicated as learning how to build web apps with code, there are still a lot of different things that go into Bubble. You'll need to learn things like:
* What a database is and how Bubble's database works
* How web pages are created in Bubble
* How to make pages that work on laptops, tablets and mobile phones (this is called responsiveness)
* Rules for setting up logic in Bubble (e.g. what to do when a user clicks on a button)
[](https://docs.airdev.co/canvas/3.6/using-bubble/bubble-basics#how-to-use-this-guide)
How to use this guide
-----------------------------------------------------------------------------------------------------------------
This Best Practices guide is a tool that is intended to be accessible to Bubble beginners (who have spent a few hours using the Bubble editor), intermediate users, and Bubble experts. Depending on your level, it should be useful for the following:
* Beginners: learn best practices and build good habits early on
* Intermediate: use this as a reference on how to approach many technical choices in Bubble
* Experts: learn how AirDev builds and compare our design choices to your own experience
For more experienced users of Bubble, this guide will be a window into the way AirDev chooses to build their apps. The motivation for most design choices AirDev makes in client apps, AirDev products, and templates is also explained here.
[](https://docs.airdev.co/canvas/3.6/using-bubble/bubble-basics#what-to-learn)
What to learn
-------------------------------------------------------------------------------------------------
If you're not sure where to start learning, you can follow this path of resources. These tasks are intended to be completed by beginners.
**Topic**
Goal
Content
**What is Bubble?**
What is Bubble and when/why to use it
**Why Bubble?**
Is Bubble the right tool for you? (This is for entreprenuers)
**Basics**
Overview of how Bubble works
**Bubble editor**
Get familiar with the Bubble editor
**Design basics**
Create and edit elements
3. Read these two sections of the Bubble manual (10 minutes):
**Workflow basics**
Visual workflows, data workflows, plugins' workflows
**Database basics**
Quick intro to the Bubble Database and Workflows
**Using plugins**
How to install and set up a new plugin
**Bubble dev tools**
How to use some tools in the Bubble editor and run mode
1. 1. Topics covered: Element dropdown, Element tree, App search tool, Run mode inspector, Run mode debugger, Edit mode element inspector
**Basics recap**
Practice the skills from the above areas
[](https://docs.airdev.co/canvas/3.6/using-bubble/bubble-basics#learning-resources)
Learning resources
-----------------------------------------------------------------------------------------------------------
This section contains links to general Bubble resources. These are useful for your learning at different stages - some of them are for beginners, while others are useful for Bubble users of all skill levels.
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/bubble-basics#core-resources)
Core resources
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/bubble-basics#additional-resources)
Additional resources
Additionally, you can use the Bubble Reference as a first resource when you run into some feature that you're not familiar with in the Bubble editor. Users with experience in web development outside of Bubble will be likely to learn quickly by using the reference and practicing in the editor.
[PreviousManually Building UI](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/design-standards/manually-building-ui)
[NextPrinciples](https://docs.airdev.co/canvas/3.6/using-bubble/principles)
Last updated 4 years ago
Was this helpful?
from the Bubble manual (5 minutes)
Check out to see what is possible with Bubble (5-30 minutes)
Watch (20 minutes)
(10 minutes)
Read on Bubble Basics. (5 minutes)
Complete the (5-15 minutes)
Play with Bubble's home page (5-15 minutes)
(Optional):
Complete (10 minutes)
Complete the (5 minutes)
(5-10 minutes)
(10 minutes)
(5-10 minutes)
(5 minutes)
(5-10 minutes)
(5-10 minutes) (also very design-focused, no workflows/db objects)
(5-10 minutes)
(5 minutes)
. (25 minutes - if the pace is too slow, run on 2x speed or skip around.)
Redo all of the on "Hard Mode", which appears after completing a lesson on normal mode (1-2 hours)
: These lessons are Bubble's training program, a set of 12 short lessons walking users through the basics of building apps on Bubble. **If you're a complete beginner, start here** - in the next page we direct you through the lessons in a more organized fashion. Complete these lessons and try to understand each action you take before moving on to the next action. Estimated time to complete: 2-3 hours (or longer if you read through related resources while completing these lessons).
: This official Bubble manual can be used for an in-depth understanding of how Bubble works. You should spend a few hours going through this resource. We recommend you use it as a guide to different parts of the Bubble editor as you learn, instead of trying to read it straight through.
: A Bubble education startup, Coaching No Code Apps has developed a YouTube series available free of charge. They have published about 100 videos, each covering one topic in Bubble development. Follow along by building while Gaby explains the what, how, and why of what you build. There is a from this channel that will guide you through some basics of how to build on Bubble. If you just want to watch one video that is a more complete walkthrough, check out .
: If you run into a brick wall while building on Bubble, someone else has probably run into the same issue before. This is a great place to check for previous users' questions and to ask your own questions, too.
: The official reference from Bubble is a useful tool to look up detailed information about how certain features are supposed to work. This document is helpful to read if you want an in-depth understanding of how each part of Bubble functions.
[**Bubble Lessons**](https://bubble.io/lessons)
[**Bubble Manual**](https://manual.bubble.io/)
[**Coaching No Code Apps**](https://www.youtube.com/watch?v=6OKVj1A9OcY&list=PL8fkQddJmh-gVOECXWNY-5JHO3Nh3fv2D&index=4)
[series of videos](https://www.youtube.com/watch?v=F7jQmMHgOHU&list=PL8fkQddJmh-gVOECXWNY-5JHO3Nh3fv2D)
[this 2 hour tutorial](https://www.youtube.com/watch?v=6OKVj1A9OcY&list=PL8fkQddJmh-gVOECXWNY-5JHO3Nh3fv2D&index=4)
[**Bubble Forum**](http://forum.bubble.io/)
[**Bubble Reference**](https://bubble.io/reference)
[Read Bubble's own intro](https://manual.bubble.io/the-bubble-fundamentals/what-is-bubble-for.html)
[Bubble's Showcase](https://bubble.io/showcase)
[Coaching No Code's video on Bubble pros/cons](https://www.youtube.com/watch?v=4W-LENVu8uc&list=PL8fkQddJmh-gVOECXWNY-5JHO3Nh3fv2D&index=5)
[Coaching No Code Intro to Bubble](https://www.youtube.com/watch?v=F7jQmMHgOHU&list=PL8fkQddJmh-gVOECXWNY-5JHO3Nh3fv2D&index=1)
[this manual page](https://manual.bubble.io/the-bubble-fundamentals/building-principles.html)
[first interactive Bubble lesson](https://bubble.io/page?type=page&name=index&id=learn&tab=tabs-1&lesson_ref=1)
[in the Bubble editor](https://bubble.io/page?id=meta_public&tab=tabs-1)
[Read the manual pages about the Editor](https://manual.bubble.io/application-editor.html)
[the Image Uploader lesson](https://bubble.io/page?type=page&name=index&id=learn&tab=tabs-1&lesson_ref=9)
[Image Slideshow lesson](https://bubble.io/page?type=page&name=index&id=learn&tab=tabs-1&lesson_ref=2)
[General design info](https://manual.bubble.io/building-a-user-interface/general-principles.html)
[Handling conditionality](https://manual.bubble.io/building-a-user-interface/handling-conditionality.html)
[City Upvoting Lesson](https://bubble.io/page?type=page&name=index&id=learn&tab=tabs-1&lesson_ref=3)
[User Signup/Login/Logout Lesson](https://bubble.io/page?name=index&id=learn&lesson_ref=5&tab=tabs-1)
[Using conditions on design elements and workflows](https://bubble.io/page?name=index&id=learn&lesson_ref=6&tab=tabs-1)
[Bubble lesson on making a shopping list](https://bubble.io/page?name=index&id=learn&lesson_ref=8&tab=tabs-1)
[Bubble lesson with Giphy plugin](https://bubble.io/page?name=index&type=page&id=learn&lesson_ref=10&tab=tabs-1)
[Bubble lesson with iTunes plugin](https://bubble.io/page?name=index&id=learn&lesson_ref=4&tab=tabs-1)
[Chart lesson](https://bubble.io/page?name=index&id=learn&lesson_ref=7&tab=tabs-1)
[Facebook auth lesson](https://bubble.io/page?name=index&type=page&id=learn&lesson_ref=11&tab=tabs-1)
[Watch this video on how to use some tools from the Bubble editor](https://vimeo.com/426247008)
[Bubble lessons](https://bubble.io/lessons)
---
# Data & Workflows | Canvas Documentation
[](https://docs.airdev.co/canvas/5.3/canvas-functionality/data-and-workflows#copying-development-data-to-live)
Copying development data to live
----------------------------------------------------------------------------------------------------------------------------------------------------
Canvas uses the database extensively to create a highly functional and dynamic application. While in development, all this data is being saved to the development database of your app.
It's important to remember that your Bubble app has two separate databases for the live and development versions. When deploying live the first time you will need to copy the development database to the live database for Canvas to have access to all the settings you have applied during development.
To do this, from the Bubble editor navigate to the Data tab, open App data, and then click on 'Copy and restore database' in the top right.
In the popup click the 'Copy development data into the live database' button, ensure 'Data type to copy' is set to All types, type 'COPY FROM DEVELOPMENT TO LIVE' in the input and press the Confirm button.
Be aware that copying the data from one version to the other will overwrite all information in the database to which you are copying data.
###
[](https://docs.airdev.co/canvas/5.3/canvas-functionality/data-and-workflows#copying-specific-data-types)
Copying specific data types
After your initial deployment to a live application you may find scenarios where you need to copy a specific data type from Live to Development or Development to Live. This is common especially with email templates and marketing pages where you make updates in development and need to have the new data copied directly to the live site.
To do this, you will follow the same steps as outlined above for copying the entire database. But instead of setting the 'Data type to copy' to All types, define the specific Data type you need to copy and then proceed as normal.
We have added a gear icon (⚙️) before all data types, and field names that are core to the Canvas template. In general, these elements should not be edited unless you understand the impact changes will have on the template.
Below is some guidance on when and how to copy Canvas data types from one database to the other.
Data type
Guidance and best practices
⚙️ **App Settings**
If you have made a lot of changes to the app settings in the development version it may be easier to simply copy the app settings data over to the live version rather than duplicating all the changes manually. However, it is a best practice to update app settings directly in the live admin portal once your site has been deployed.
⚙️ **Header & ⚙️ Navigation item & ⚙️ Legal**
It is important to always keep the header and navigation item data types in sync. Before initial deployment, we recommend creating or editing your header and navigation item in the development version and then copy those data types to your live site. After initial deployment, we recommend to not copy the header or navigation item data types from one version to the other. Instead, you should make any header or navigation related updates directly in your live site via the admin portal. Whether it is the live or development version, you should add and update these data types from the same version to avoid content conflicts with your headers and navigation items.
⚙️ **Email Template & ⚙️ Email Template Variant**
Since email templates must be set up with their own custom workflows, adding a new template will require making and deploying workflow changes from the development version of your app. Whether it is the live or development version, you should add and update email templates and email template variants from the same version (and copy to the other) to avoid content conflicts with these data types.
⚙️ **Verify**
Email verification request data is generated automatically and is only valid within the version it is created. You will never need to copy this data type.
**App variables**
After the initial deployment, copying this data type from one version to the other will overwrite any existing app variables in the other version.
**User**
After the initial deployment, it's not recommended to copy users from one version to the other as this will overwrite any users that have been added to the app in the other version.
[](https://docs.airdev.co/canvas/5.3/canvas-functionality/data-and-workflows#how-the-app-settings-data-type-is-being-used)
How the ⚙️ **App Settings** data type is being used
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
There should only ever be one ⚙️ App Settings entry. More than one ⚙️ App Settings entry will break the Canvas Template.
Every Canvas template will have a ⚙️ App Settings data type that is used to manage all app-wide settings such as colors, app name, contact information, etc. Almost all data for the ⚙️ App Settings object is controlled from within the Admin portal.
While you can add additional fields to the ⚙️ App Settings object as needed to customize your application, we recommend not changing the default fields in any way.
[](https://docs.airdev.co/canvas/5.3/canvas-functionality/data-and-workflows#using-the-hidden-variables-popup)
Using the hidden variables popup
----------------------------------------------------------------------------------------------------------------------------------------------------
**Variable** simply refers to the use of an element to hold one or more values. Instead of repeating these values in multiple places in your page or workflows, the **variable** holds the results of a calculation, a single thing from a database search, a list of things from a database search, or some other value and can be referenced multiple times from other page elements and actions.
Each page has a popup called 'Popup Hidden Variables' designed to hold app data as variables for easy reference.
As an example, each page has a group element in this popup called 'var - ⚙️ app settings' with the type of content set to ⚙️ App Settings. The data source then is a 'Search for ⚙️ App Settings: first item'.
With this variable set up, anywhere you need to reference the ⚙️ App Settings on the page (e.g. the app name), rather than doing a search for the ⚙️ App Settings object you can simply reference 'var - ⚙️ app settings object's app setting' instead. This keeps your data organization clean and concise on the page.
Any data that is referenced from multiple elements or actions on the same page should be stored in a variable group in this popup to avoid redundancy in retrieving data. This helps minimize the possibility of error when searches are duplicated across elements. It also makes it much simpler to update any search parameters as the search only needs to be changed in one location.
###
[](https://docs.airdev.co/canvas/5.3/canvas-functionality/data-and-workflows#types-of-variables)
Types of Variables
Variables are stored in two kinds of elements: **Groups** and **Repeating Groups**. These elements are often more useful than custom states because they can have default data sources, conditional data sources, or have their data set by a workflow. A custom state's data can only be set by a workflow.
It is good practice to name each Group or RG with a naming convention of `var - [Name of variable]` as opposed to the normal 'Group..." convention. This allows you to quickly search for the page variables using the 'var' prefix.
**GROUPS** Groups are used to store single item variables such as a number, text, or single Thing from the database.
**REPEATING GROUPS** Repeating groups are used to store list variables such as a list of numbers, list of texts, list of Things, etc.
When using a Repeating Group as a list variable, use the **Vertical scrolling** layout style to allow your page to only load the data that is needed to display in the current page view.
[](https://docs.airdev.co/canvas/5.3/canvas-functionality/data-and-workflows#using-the-inclusive-yes-no-option-set)
Using the inclusive Yes/No option set
--------------------------------------------------------------------------------------------------------------------------------------------------------------
When filtering data by the yes/no field type in Bubble, you can only return values that are either Yes or No. For instance:
The inclusive yes/no option set allows you to create search parameters based on the yes/no field type in Bubble and return all things with a value of 'Yes' OR 'No', a value of only 'Yes', or a value of only 'No'. For instance:
The enable this we've added a list of yes/no values as an attribute to the Options in the Yes/No Option set.
* For the Yes value we add only the 'yes' value to this list.
* For the No value we add only the 'no' value to this list.
* For the Yes or No value we add both the 'yes' and 'no' values to this list
The search logic then is to check, not if the value is EQUAL TO the Yes/no values, but if the value IS IN the Yes/no values.
To see how we use this in Canvas, check out the dropdown to filter users by active status on the admin page of your app. It can be found in the elements tree by clicking the '+' to open Group Main Content > Group Nav 8 - Users > Group User header > Dropdown Users.
[PreviousMenus & Navigation](https://docs.airdev.co/canvas/5.3/canvas-functionality/menus-and-navigation)
[NextEmails & Alerts](https://docs.airdev.co/canvas/5.3/canvas-functionality/emails-and-alerts)
Last updated 11 months ago
Check if value 'is in' the list of Yes/no values
---
# Database | Canvas Documentation
[PreviousPrinciples](https://docs.airdev.co/canvas/3.6/using-bubble/principles)
[NextDesign](https://docs.airdev.co/canvas/3.6/using-bubble/design)
Last updated 5 years ago
Was this helpful?
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#foundation-of-your-app)
Foundation of your app
--------------------------------------------------------------------------------------------------------------
The data structure is the foundation of a Bubble application and setting up the database should be the very first thing you do. In fact, most of the time it’s something that we at AirDev do before even opening the Bubble editor. Instead, we pull up a spreadsheet and create the entire database structure there first, thinking through the data types and the fields until most details fall into place. This ensures that we have a clean & robust set-up that’s ready for the logic to be built on top.
The alternative is setting up your database as you build functionality and, while it’s sometimes necessary (if you can’t anticipate everything you’ll need in the beginning, such as when the project evolves as it’s built), it should mostly be avoided because your app is likely to end up with a messier data structure. And that’s a big deal because as the application grows, the database structure really influences how easy or hard it is to evolve and maintain your application. With a mature application, it may mean a difference of weeks or months of development effort. That’s a pretty major impact of a few clicks that the Bubble database requires to set up.
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#the-essentials)
The essentials
----------------------------------------------------------------------------------------------
To start, let’s take a look at the core things you should know when building your database.
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#data-types-and-data-fields)
Data types and data fields
Data types are essentially tables of data where each row represents a single object that has one or more data fields. A data field is a single piece of data about that object. So, if you’re building Twitter, you may have a data type called “Tweet” that represents a single tweet and that data type would have a bunch of fields that represent information about that tweet - the text of the tweet, who created it, how many likes it has, how many retweets it has, when it was created, etc.
The first step in setting up your database is figuring out what data types you’ll need. There are a couple of ways you can think about that:
1. Think of the actions that take place in your platform. There is a good chance that your data types correspond pretty well to those actions. If you’re building Twitter, here are some actions that may come up:
1. Registering for the platform - this would require “User” data type
2. Posting a tweet - this would require a “Tweet” data type
3. Following someone - this would require a “Follow” data type
1. (Note: we'll explain more of the motivation for these design choices in the next section.)
2. If you’re familiar with Excel, think of how your data would be represented in a spreadsheet. If you’re building Twitter, you’d probably have multiple tabs, one that has all of the users who’ve signed up, one that has all of the tweets that have been created, and so on. In the Excel example, each tab represents a data type, each column represents a data field, and each row represents a thing.
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#linking-objects-together)
Linking objects together
When creating your database, it’s very important to properly link data types to each other. This ensures that you can look up a user’s friends, a listing’s reservations, or a product’s purchases.
####
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#a-field-vs.-a-separate-object)
A field vs. a separate object
A choice you’ll be faced with is whether a link should be set up as a field on a data type or a separate data type altogether. For example, if you’re creating the concept of “following” in a social media app, you might have a field called “List of follows” (of type list of Users) on a User OR you might have a new data type called a “Follow” that would have fields that link the two users together. In this situation I would think about the future and whether you’re likely to want to capture other data about that relationship in the future. If the answer is yes, then you’ll want to have a separate object and if the answer is no, you can keep it to a field. So in the following example, the answer is likely to be yes because you may want to record when the user started following someone and you won’t be able to do that without a separate object.
####
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#one-way-vs-two-way-data-linking)
One-way vs two-way data linking
If you’re building AirBnB, you will probably have a User object and a Property object. The decision you’ll be faced with is whether you should have a “User” field on the Property, a “List of properties” field on the User, or both. Here’s how we think about it:
1. As the first step, always start by having a single link on the object that is subordinate to the other object. In this case, the Property is subordinate to the User, so it’s worthwhile to start with having a “User” field on the Property
2. Then, the question to answer is: will the relationship be used frequently AND will the list remain relatively small if implemented? If the answer is yes, then you should also set up the reverse linkage. In this case, the list of properties that the user has will be used frequently in the application and also the list will likely not get that big, which is why I would advise setting up a two way linkage. If we were setting up Messages for example, I probably would only do one-way linkage because the user might have thousands of messages linked to them and lists of that size get unwieldy in Bubble.
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#privacy-rules)
Privacy rules
Privacy rules determine what data is able to be sent from the server to the client (your computer) and thus are very important for making sure that your user data is secure. **You should set privacy rules up right after you set up the database and before you start development**. It’s much more difficult to set them up after the development is done, especially if you determine that you need to adjust your database to create appropriate privacy rules.
You will sometimes need to create extra fields in order to have proper privacy rules. To illustrate:
Let’s imagine that you’re building project management software. You may have a data type called Project, a data type called Task with a Project field on it, and a data type called Message with a Task field on it. It’s a pretty straightforward set up where projects consist of tasks, which consist of messages. If you want to make sure that messages aren’t seen by users who aren’t on the project, you may want to construct an expression like “Current User’s Projects contains this Message’s Task’s Project”. However, that expression isn’t fully supported by the privacy rules, so instead you may have to also store a Project field on the Message object. That way your privacy rule changes to “Current User’s Projects contains this Message’s Project”, which is fully supported by privacy rules.
See also:
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#anticipate-the-future)
Anticipate the future
As you’re setting up your database, it’s important to think ahead to the functionality that you aren’t building yet but are planning to build in the future and set up your database to be well positioned for that functionality. For example, if we are building a SaaS product, we will often start by building it for individuals to start but will anticipate that in the future we’ll need those individuals to be part of organizations and share access, permissions, etc. In that case we will create an “Organization” data type in addition to the “User” data type. Each User will have an Organization attached to them and each organization will have only one User to start but this seemingly redundant set up will make it 10x easier to build out the organizational functionality when it becomes necessary.
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#tips-and-tricks)
Tips and tricks
------------------------------------------------------------------------------------------------
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#database-object-s-instead-of-hardcoded-values)
Database object(s) instead of hardcoded values
A really useful practice is creating a data type that will store information about the platform that would normally have to be hard-coded instead. This way, we avoid using "Magic numbers", or numbers that are hard coded (i.e. manually typed) into hard-to-find places of an app.
####
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#an-example-from-the-canvas-template)
An example from the Canvas template
In our Canvas template, we have a `Website` data type which contains hard-coded data used across the application. A `Website` has multiple fields that contain info about the platform - the name, the logo, etc. Then, anywhere we have to reference things like the name of the platform, we don't hard code the name, but instead link the display to the `Website` object. That way, if we ever have to change the name, it becomes as easy as going into the database and updating a single field. Each app should only have one `Website` in the database, although if you come up with your own solution for hard-coded values, it may look different depending on your use case.
####
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#creating-static-data-types)
Creating static data types
Static data types are data types that are set by Admins or by the platform developers, and which are likely to change very infrequently.
Here are some other ways that using database objects instead of hardcoded values can be useful:
* Legal docs: for documents like the Privacy Policy and Terms of Service, we store these in variables on our database (in addition to documents in Google Docs). These documents are then displayed as text in the application.
* Pricing plans: let’s say that you have 3 pricing plans for your SaaS platform. Each plan has a price and maximum number of users (1, 10, and 100). One way to represent this is to have a data type called “Plan” that has fields that include the max number of users, so that later on, if you want to change the number of users that are supported by a plan, you can just update a single field in the database.
* Permissions - if your application has multiple user types, each with different permissions, it may make sense to create a Permission data type that will capture all of the different permission types that exist and all of the permissions that each type has. If you’re building Slack and want some users to be able to join any channel and some other users to only be able to join public channels, you would have a Permissions object with field called “Can join any channel” and set that field to “yes” only for the Permissions that allow that action. Then you can refer to “Current user’s permission’s Can join any channel” to see whether that user can join a non-public channel. This is much cleaner than the commonly used alternative of just referring to the name of the user type and hard-coding their permissions.
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#yes-no-fields-vs-texts-or-dates)
Yes/no fields vs texts or dates
You’ll often need to record whether something is true or false - whether a user is an admin or not, whether a user has verified their email or not, whether a blog post has been published or not, and so on.
One data type we can use for this is the yes/no (boolean) type. It is usually better to use a **text** field type or a **date** field type in order to be able to get richer data and have more future flexibility, rather than a yes/no field type which can only record 2 different values.
For example, if you want to record whether or not a User has signed an agreement, it might make sense to record a “Date agreement signed” of type date instead of “Agreement signed” of type yes/no because the former will provide you with more information in a single field. Both whether the agreement was signed (`date isn’t empty` in Bubble-ese) but also when it was signed (value of the field).
The downside of this approach, of course, is that a yes/no field is more straightforward to follow and remember. Additionally, if you use a text field, you have to make sure that you’re always using the exact values of the options that can go into that text field.
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#naming-conventions)
Naming conventions
It’s a good idea to name your objects and fields in a consistent way. Specifically, here are some things that you may want to do:
* If there are fields on an object that can be grouped somehow (for example fields on a Tweet that record stats about that week), you can add a prefix before each of those fields, so that they appear next to each other on a list
* If there are fields that you’re no longer using, it may make sense to add a “DEP” (for deprecated) or a similar prefix to the name. That way it will be apparent that the field isn’t used anymore
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#created-by-field)
“Created by” field
By default every Bubble data type comes with a “Created by” field, which records the user who created the object. However, it often makes sense to create a separate field to record that same thing, so that you have control over it. For example, at some point you may want to create those objects through the API and attribute them to people.
When data is created via API, an object's "Created By" field is usually empty, depending on how you set up the API authentication.
Data can also be created through the Bubble editor, which will result an this field being empty, or via API Workflows triggered by an admin user, where the admin would be the Creator of this data.
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#commenting-on-fields)
Commenting on fields
When creating the database you should comment on the fields where the purpose of those fields isn’t immediately clear, to make it easier for yourself to maintain the application in the future. This is especially important for text fields that represent a multiple choice option. For example, if you have a “Type” text field on the “User” object, you should record all of the different types that can go into that field.
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#option-sets)
Option Sets
There is a feature in Bubble that allows a set of data to be loaded when any page in the app is loaded. This is good for small amounts of data (e.g. categories of Users: Buyer, Seller and Owner) that will be used all over the app. it eliminates unnecessary requests and helps the app's logic look a bit cleaner, too, as you can select a specific app option instead of manually typing in a text or other value stored on database objects.
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#example-database)
Example database
--------------------------------------------------------------------------------------------------
This is a sample database structure for a simple, early version of Facebook. This assumes the following functionality:
* Users from certain approved universities can join the platform after verifying their email address
* Users can search for other users at their university and add them as friends (requires approval)
* If friends, users can view each other’s full profiles and write on each other’s “walls”. Users can also write on their own walls.
* Users can poke each other
* Users can message each other
* Users can create and join groups
* Users get notified when important activity occurs on the platform
with a few premade option sets that you can copy into your app.
####
[](https://docs.airdev.co/canvas/3.6/using-bubble/database#facebook-click-here-to-see-example-in-a-spreadsheet)
[We have an app](https://bubble.io/page?type=page&name=index&id=canvasoptionsset&tab=tabs-3&subtab=Option+Sets)
[Facebook (click here to see example in a spreadsheet)](https://docs.google.com/spreadsheets/d/1NVcM3Egq5jZDcodZPGgy_Hd9MvQTBdxyeGIGXqaUWfo/edit?usp=sharing)
AirBnB example in a spreadsheet - Yellow boxes are optional
A filled in comment icon means there is a comment
[https://manual.bubble.io/working-with-data/privacy-and-security.htmlmanual.bubble.io](https://manual.bubble.io/working-with-data/privacy-and-security.html)
---
# For Designers | Canvas Documentation
[PreviousWhat's New](https://docs.airdev.co/canvas/3.6/whats-new)
[NextGetting Started](https://docs.airdev.co/canvas/3.6/canvas-functionality/getting-started)
Last updated 3 years ago
Was this helpful?
[](https://docs.airdev.co/canvas/3.6/for-designers#canvas-library)
**Canvas library**
------------------------------------------------------------------------------------------
The contains full-page previews and descriptions of all page templates and blocks within the Canvas design system.
[](https://docs.airdev.co/canvas/3.6/for-designers#canvas-styles-and-example-components-figma-file)
**Canvas Styles and Example Components Figma file**
------------------------------------------------------------------------------------------------------------------------------------------------------------
The contains all of the typography and color styles used throughout Canvas design system. The example components’ dimensions and padding are consistent with Canvas block and page templates’ dimensions and padding. These components can serve as a base to create additional components, though this is completely optional.
[](https://docs.airdev.co/canvas/3.6/for-designers#how-to-customize-the-canvas-figma-file)
**How to customize the Canvas Figma file**
------------------------------------------------------------------------------------------------------------------------------------------
* Access the read-only copy of the file here:
* At the top of the page, click on the file name, and select “Duplicate” from the dropdown. Figma will copy the file to your Figma account’s Drafts folder.
* Navigate to the copied file in your Drafts folder and edit it in any way to begin creating your custom designs.
* Modify all of the color styles to fit your app's branding requirements.
If you would like to customize your app's font, it is recommended that you choose a font that is equal to or slightly smaller than Inter for these reasons:
1. If the font is larger than Inter, Bubble might show "......" within each text element in the Bubble editor, making it challenging for the designer and developer to know where to click to edit different elements.
2. If the font is larger than Inter, fixed-width tab and link elements will sometimes break to the next line after making changes to the fonts. With smaller fonts, elements won’t break to the following line.
Note: For completely custom UI elements and designs created from scratch, and not from Canvas, there shouldn't be any challenges starting with a larger font than Inter.
* Utilize the example components and/or create brand new components on this components page.
All components with a 🟢emoji contain variants. All components with a 🔴emoji are meant to be detached.
* Create a new page for your project and start building your app's designs.
[](https://docs.airdev.co/canvas/3.6/for-designers#how-to-import-designs-from-the-canvas-library-into-figma)
**How to import designs from the Canvas Library into Figma**
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
* To create a new design in Figma, based on a Canvas design, you can:
* Select the “Full Page” preview option to open that design in a new tab.
* * This plugin requires that you define an import width. Most page templates have a 1220px width on desktop, and that should equal the size of all Figma frames used for desktop pages. The following page templates have slightly larger widths by default -- please import them at these widths:
* 2-Column Menu Tabs Page: 1410px width
* Floating Map Search Page: 2600px width
* Profile Tabs Page: 1410px width
* Standard Multi-Step Page with Sidebar: 1410px width
* Vertical Multi-Step Page: 1410px width
* All Canvas designs are imported into the Bubble editor at desktop page widths by default. All designs are responsive for mobile but are modified in the Bubble editor at desktop page widths. If you plan to create a new design by modifying imported Canvas components (instead of creating them from scratch in the Bubble editor), it is best also to create desktop mockups, even if a page will primarily be used on mobile.
[](https://docs.airdev.co/canvas/3.6/for-designers#canvas-design-system-specifications)
**Canvas design system specifications**
------------------------------------------------------------------------------------------------------------------------------------
####
[](https://docs.airdev.co/canvas/3.6/for-designers#page-template-sizes)
**Page template sizes**
* 1220px width for most pages.
* Exceptions:
* 2-Column Menu Tabs Page: 1410px width
* Floating Map Search Page: 2600px width
* Profile Tabs Page: 1410px width
* Standard Multi-Step Page with Sidebar: 1410px width
* Vertical Multi-Step Page: 1410px width
####
[](https://docs.airdev.co/canvas/3.6/for-designers#block-sizes-content-containers)
**Block sizes (content containers)**
* Desktop: 860px width
* 40px of padding on all sides
* Mobile: 300px width
* 20px of padding on all sides
* Canvas will automatically add 40px of space between each block on a page.
####
[](https://docs.airdev.co/canvas/3.6/for-designers#popups)
**Popups**
* Standard: 680px width
* 30px of padding on all sides
* Small: 360px width
* 30px of padding on all sides
####
[](https://docs.airdev.co/canvas/3.6/for-designers#typography-scale)
**Typography scale**
* Size 44: Large Title (for CTA Page Titles)
* Size 30: Medium Title (for Standard Page Titles)
* Size 23: Small Title (for RG and Group Headers)
* Size 19: Subheading, Large Body
* Size 15: Body, Buttons, Tabs (default)
* Size 13: Microcopy, Metadata, Overline
####
[](https://docs.airdev.co/canvas/3.6/for-designers#fonts-and-weights-for-all-font-sizes)
**Fonts and weights (for all font sizes)**
* Inter Bold - Weight: 600
* Inter Semibold - Weight: 500
* Inter Standard - Weight: 400 (default)
####
[](https://docs.airdev.co/canvas/3.6/for-designers#button-sizes)
**Button sizes**
* 45px height for CTA buttons and marketing page buttons with 19pt font
* 40px height for standard buttons with size 15pt font (default)
* 28px height for smaller buttons above repeating groups with size 15pt font
####
[](https://docs.airdev.co/canvas/3.6/for-designers#inputs-dropdowns-searchboxes)
**Inputs, dropdowns, searchboxes**
* 45px height, with Inter Standard (Black) 19pt text and light grey borders, for CTA and marketing pages
* 40px height, with Inter Standard (Black) 15pt text and light grey borders, for standard app pages (default)
####
[](https://docs.airdev.co/canvas/3.6/for-designers#icons)
**Icons**
* Canvas uses the feather icons library for most icons. Bubble supports Google Material icons and Ionic icons as well.
####
[](https://docs.airdev.co/canvas/3.6/for-designers#maps)
**Maps**
* Canvas contains the following map styles by default:
* Apple Maps (default)
* Neutral Blue
* Dark Mode
* Just Places
* Bubble supports custom Google map styles as well.
[](https://docs.airdev.co/canvas/3.6/for-designers#planning-for-responsiveness)
**Planning for responsiveness**
--------------------------------------------------------------------------------------------------------------------
* The Bubble responsive engine is slightly different from other visual development platforms such as Webflow. Bubble doesn’t yet support the following responsive settings:
* Elements that collapse in width conditionally based on data (e.g., displaying a sidebar for some Users on a page and collapsing that same sidebar for other Users on that same page).
* Exception:
* Bubble can collapse elements in width based on the Current Page width.
* Variable font sizes from desktop to mobile.
* Overlapping elements of different sizes (e.g., image elements that must scale proportionally as the page is resized, with text elements on top of it.)
* Exceptions:
* It is possible to set an image as the background image of a group with text on top of the image. However, the image will not scale proportionally as the page is resized.
* It is possible to have elements overlap if the elements remain the same size on all screen sizes.
* Elements that change in size on hover.
* Elements that dynamically change in width, height, and position based on viewport height and width.
Click on any page template or block that meets your use case within the .
Use a Chrome Extension such as to inspect the elements’ design properties.
In Figma, you can build these components from scratch or use the import plugin to import a Canvas design into Figma by pasting the URL of the full page preview into Figma.
[Canvas library](https://canvas.airdev.co/library)
[Prism](https://chrome.google.com/webstore/detail/prism-redline-tool/hkbhjllliedcceblibllaodamehmbfgm?hl=en-US)
[HTML → Figma](https://www.figma.com/community/plugin/747985167520967365/Figma-to-HTML%2C-CSS%2C-React-%26-more!)
[Canvas library](https://canvas.airdev.co/library)
[Canvas Styles and Example Components Figma file](https://bit.ly/3AWLAaP)
[https://bit.ly/3ww9k23](https://bit.ly/3AWLAaP)
---
# Data triggers | Canvas Documentation
[PreviousModularity](https://docs.airdev.co/canvas/3.6/using-bubble/modularity)
Last updated 5 years ago
Was this helpful?
This page will serve as a guide for Bubble's new \- actions in the Backend Workflows page that will happen any time you make changes to a data object anywhere in the app. For example, when you add an object to a Cart, a data trigger workflow can automatically re-calculate taxes and any other calculated fields, eliminating the need to copy logic to many places throughout the app.
Before starting this guide, be aware that it is best to wait at least a few weeks after a feature like this is released before including it for mission-critical features in a client app. Since it was only just released as a public beta, it is possible that the feature is not yet production-ready or that some bugs will be found in the following weeks.
[](https://docs.airdev.co/canvas/3.6/using-bubble/modularity/data-triggers#common-use-cases)
Common use cases
------------------------------------------------------------------------------------------------------------------
For all of the below use cases, they're really **only relevant if a data type is being changed in more than one place in your Bubble app**. If you're considering moving workflows to a data trigger, and the trigger is only run from one place in the app, it's best to stick to normal workflows.
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/modularity/data-triggers#linked-data-objects)
Linked data objects
Updating one object when another directly related object is changed.
For example: a taxi Driver has a Car in a ride-sharing app. When the Car is updated, say if a car becomes too old to be eligible for the app, the Driver can also be updated - in this case, to be unavailable for future rides.
Data can be linked in many different ways, including:
* **Bidirectional linkages** (like the above Driver example)
* Data from one object is directly linked to another, and vice versa
* **One-to-one linkages for CSV exports**
* Data from one object is directly linked to another, and you want to replicate saved data in order to more easily export it as one table.
* Imagine that in a Bubble app, each User has a Store, and each Store has a `monthly revenue`. In a data export of Users, normally the only field included from the Store would be the Store's unique ID. We can include each User's Store's `monthly revenue` on a second `monthly revenue` field on the User object. That field will also be included in the CSV export. However, the User's `monthly revenue` field will also need to be updated each time the Store's `monthly revenue` field changes. Using a data trigger here would make since **if** a User can make changes to a Store's name in multiple places in the app.
* **Roll-up/summarized data**
* Imagine that there is a Repeating Group of Users and their number of Items is displayed as a column in the UI. Rather than using a `do a search for Items:count` call in each row and calculating the number of items, a number field named Item Count can be recalculated each time an item is added/removed. Again, this makes most sense if the number of items can be changed in many places in the app. If it is only changed in one workflow, you can add the step to save the number of items on the User object inside that same workflow.
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/modularity/data-triggers#calculations)
Calculations
Running complex calculations that need to be updated whenever a field is changed.
For example: financial calculations, or any formula containing many factors, where the result should be stored as a field.
Note the conditions here - if the calculations are already updated, there is no need to write to the database.
The second step takes the results of step 1 and combines them in a way that would be difficult to build and difficult to understand with Bubble mathematical logic.
####
[](https://docs.airdev.co/canvas/3.6/using-bubble/modularity/data-triggers#undefined)
###
[](https://docs.airdev.co/canvas/3.6/using-bubble/modularity/data-triggers#generating-an-object-json-or-other-field-that-summarizes-the-objects-contents)
Generating an object JSON or other field that summarizes the object's contents
Re-generating a field that reformats information from other fields. This is similar to the calculations, but generates a text output instead of a number output.
For example: a JSON that represents an object and contains each of the other fields, but is stored as a text.
This User JSON can be used to manipulate User data on the page with Javascript, among other things.
[](https://docs.airdev.co/canvas/3.6/using-bubble/modularity/data-triggers#performance)
Performance
--------------------------------------------------------------------------------------------------------
Overusing this feature can have huge impacts on app performance. Completing actions that take up a lot of capacity are not recommended, such as making changes to a list of many things.
Additionally, searches for data that are completed here do NOT have restrictions with privacy rules. Any search that is completed here can return an entire table in the database if it's not set up correctly, potentially using up your app's capacity and slowing it down drastically.
[](https://docs.airdev.co/canvas/3.6/using-bubble/modularity/data-triggers#limitations-and-workarounds)
Limitations and workarounds
----------------------------------------------------------------------------------------------------------------------------------------
* User-specific info:
* Logging out of a User's account (using the Bubble "Log a user out" workflow) activates any User data trigger.
* Logging into a User's account doesn't activate a User data trigger.
* Signing up as a new User activates a User data trigger.
* One data trigger can't trigger another data trigger - if I edit a User's Post's in a User data trigger, Post data triggers will not be activated.
* Workaround: schedule an API workflow that makes changes to an object. This will trigger the data trigger for that object. (Functional as of May 13, 2020.)
* There seems to be a protection against infinite loops here. If a User is modified in your app and the User trigger is activated, which then edits a Post in an API workflow, then the Post data trigger will then be triggered. However, if you then edit the User object in an API workflow triggered from the Post data trigger workflow, the User data trigger won't be activated, preventing a loop of User->Post->User->Post from continually firing.
[data trigger actions](https://forum.bubble.io/t/public-beta-database-change-triggers/81033)
Fields made for CSV export could benefit from data triggers
---
# Admin Portal | Canvas Documentation
[PreviousIndex](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/index)
[NextAccount](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/account)
Last updated 4 years ago
Was this helpful?
**Page name:** admin **Purpose:** Fully functional portal for managing all the settings for your application
Due to the complexity of the page and the amount of information that is usually displayed, the Admin portal will not be responsive.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#overview)
Overview
----------------------------------------------------------------------------------------------------------------------
Your app will come with a dedicated portal for the app’s admin where you can manage app settings & data. Much of this is preset for you, but you will have to customize the page for your app.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#launch-checklist)
Launch Checklist
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#branding)
Branding
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#pages)
Pages
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#header-footer)
Header/Footer
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#emails)
Emails
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#settings)
Settings
The **Settings** group provides a means for admins to set global variables for the app. Some of these are pre-baked into Canvas, like setting the password policy or cookie settings. But you also can customize your own app-wide settings that can be exposed to app admins (e.g. listing fee or tags).
To do this, find the **Group Nav 0/1/5 - Launch & Settings** group. Within this group is a reusable element called **admin\_options.** Within this is another reusable called **admin\_options\_settings**. You shouldn't need to touch any of the other elements/workflows within **admin\_options**.
Once inside **admin\_options\_settings**, you will have access to two button-style groups within **Group Collapsible admin-defined options group**, one of which launches a popup with a single input, and another which launches a pick-list of options.
The single field popup is updating a dummy field in the website object called **dummy option** and the sample picklist popup is displaying a list of dummy data.
You should connect up your own data and logic to the buttons and corresponding popups. The add and delete features in the sample picklist popup are disabled by default - you must go into the Bubble editor and enable the add/delete features in order for them to work.
To add additional options to this area, the groups and popups which are used here should be cloned. You can adjust the collapsing range of the reusable using **Group PLACEHOLDER**.
If you’d like to hide these options entirely, you should go to the reusable, select **Group Collapsible admin-defined options group** and uncheck _This element is visible_ on the conditional tab.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#analytics)
Analytics
View statistics for your users such a total users, recent signups, and active users.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#users)
Users
View all the users in your application, reset passwords, add new admin, and filter by status, name, and role.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#extending-the-admin-portal)
Extending the Admin Portal
----------------------------------------------------------------------------------------------------------------------------------------------------------
To extend the admin portal and customize it for your application, the Canvas Base template comes with a placeholder table group that can be copied and customized to add additional views and functionality for your data.
You can find this group in the elements tree as **Group Nav 8 - Data type 1 content**. On the page this group is located directly below 'Group Nav 7 - Users'.
This group contains a reusable element called **admin\_datatype1** which contains dummy data.
Make the following changes to customize it for your needs.
**General**
1. Update the titles for the **Group Nav 8 - Data type 1 content** and **admin\_datatype1** groups (i.e, you might have **Group Nav 8 - Posts** and **admin\_posts**)
2. Edit the the **New** button and add an action when it is clicked
3. Add an action for the **Data** button if needed
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#set-up-the-repeating-group)
Set up the repeating group
From inside the reusable elements **admin\_datatype1**, you should:
1. Data to display
1. Change the title and data type of the element RepeatingGroup Dummy
2. Define a data source for the repeating group
2. Set up the table
1. Update/add headers in the text elements placed above the repeating group.
2. Define the dynamic content that corresponds with the headers and will be displayed by the repeating group.
3. Set up the text that is displayed when no data is found. This is nested under Group inner dummy content > Group no entries.
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#navigation)
Navigation
From the admin page, you should
1. Open FloatingGroup Sidebar\_website > Group inner sidebar tab\_website > Group Main Nav 9 - Data type 1\_text
2. Change the data source for this group to the text you would like to display in the navigation bar
After each change you make here, make sure to view the web page in version-test in order to check whether it works as expected.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#adding-additional-tabs-to-the-admin-portal)
Adding additional tabs to the Admin portal
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
To add additional tabs to the admin portal, duplicate the **Group Nav 8 - Data type 1 content** and the **admin\_datatype1** reusable elements we customized above.
Change the text after the hyphen in the group name to represent the data type it is displaying. For instance, if we were displaying invoices in the Group Nav 9 element we should change the name to 'Group Nav 9 - Invoices'.
The steps are nearly the same as above but you will need to take the following additional steps.
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#replace-the-reusable-element)
**Replace the reusable element**
In your new, parent content group (**Group Nav 9 - Data type 2 content**, for example), you'll need to replace the **admin\_datatype1** reusable, which was copied along with the parent group, with your new reusable (**admin\_datatype2**, for example).
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#reposition-the-new-group)
Reposition the new group
Move your duplicated group underneath Group Nav 8 so the top of your new group snaps to the bottom of the Group Nav 8.
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#resize-the-placeholder-group)
Resize the placeholder group
Drag the top of the 'Group PLACEHOLDER (do not delete) until the top edge snaps to the bottom of the new group you created
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/default-pages/admin-portal#update-the-conditional-references)
Update the conditional references
Change the reference in the conditional from 'Group Main Nav 8 - Data type 1\_text' to 'Group Main Nav 9 - Data type 2\_text'
You're all set! You can duplicate the steps above to add as many new data tables as you like!
These guidelines are specific to the Admin portal, but they can be useful as a common design pattern to follow for a portal/dashboard page.
---
# Header | Canvas Documentation
[PreviousReusable elements](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements)
[NextFooter](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/footer)
Last updated 3 years ago
Was this helpful?
**Element name:** header **Overview:** The Canvas HTML Header allows Canvas developers to create any number of headers for an app. The header reusable element contains a single HTML element that uses custom HTML, CSS, and flexbox to dynamically display different navigation elements, including texts, icons, buttons, the Current User profile image and group focus, and mobile menu.
This header element is fully responsive, and it is used on every page of the Canvas template. Each Canvas application comes preconfigured with three headers as shown below.
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header#admin-user)
Admin user
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header#standard-logged-in-user)
Standard logged in user
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header#logged-out-user)
Logged out user
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header#creating-editing-a-header)
Creating/editing a header
Canvas developers can create any number of Headers within the admin portal, and each Header can have any combination of dynamic navigation elements (icons, texts, buttons, and the Current User profile picture):
You can create a new header or you can choose to clone an existing header if you have one that is similar to what you would like to create.
1. Click New to create a new header from scratch
2. Click Edit to edit the name of the currently selected header
3. Click Clone to duplicate an existing headers settings into a new header
4. Click Delete to remove the currently selected header
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header#telling-canvas-which-header-to-display)
Telling Canvas which header to display
Canvas will display any Header based on the “var - current header” hidden variable within the header reusable. As you create new Headers, you will need to add more conditionals to this hidden variable to specify when to show each Header. For example, you could show a specific Header based on the Current User’s role or show a particular Header based on a certain page’s name.
Remember, when setting conditionals Bubble will give priority to the last condition that is true. So if you have three conditions and both condition #1 and condition #3 evaluate as true, Bubble will prioritize condition #3 over condition #1.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header#header-sections)
Header sections
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header#text)
Text
Text Navigation items will appear to the left of the icons in your header. On a mobile screen, these elements will be moved from the header into the mobile dropdown menu.
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header#icons)
Icons
The icon element is a special element as we have included four reusable Bubble elements with GroupFocus drop downs that you can set up to be triggered from the icon. Note that both the indicated icon and the Bubble Action Trigger must be set exactly as indicated below for this functionality to work.
You can add up to 4 icons per header but for best mobile experience we recommend using a max of 3 icons for a header that has the `logged in state` toggled on
* * Icon = `bell`
* Bubble Action Trigger = `bell-groupfocus`
* * Icon = `messages-circle`
* Bubble Action Trigger = `messages-groupfocus`
* * Icon = `search`
* Bubble Action Trigger = `search-groupfocus`
* * Icon = `cart`
* Bubble Action Trigger = `cart-groupfocus`
Each of the above widgets contains a small text element that displays a number alert for that widget (think unread notifications or count of items in cart). This number is static by default but can be made dynamic by modifying the `var - unread` or `var - count` elements within the corresponding widget reusable.
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header#buttons)
Buttons
You can include up to two buttons on each header.
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header#logged-in-state)
Logged-in state
Set toggle on if this header is visible to logged-in Users. This header will display the Current User's profile picture with a dropdown menu that allows them to view their account settings or log out.
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header#mobile-menu-and-responsiveness)
Mobile menu and responsiveness
Each Header's responsive settings are set automatically. On desktop, the Header will display text links, icons, buttons, and the Current User profile picture. On mobile, the Header will hide any text and button elements, and display the hamburger menu icon. Clicking on the hamburger menu icon will open a mobile menu that contains the Header's text and button navigation elements. The breakpoint to display the mobile menu is determined dynamically for each Header on page load. If a Header does not contain any text or button navigation elements, the hamburger menu will not become visible on mobile.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header#updating-the-logged-in-focus-group-menu)
Updating the logged in focus group menu
You can manually update the elements in the user account dropdown directly from the header reusable element in the Bubble editor.
From the elements tree open **GroupFocus Mini > Group Logged In**
There is a button for the user to log out, visit their account page, and navigate to the admin portal. We have also included three placeholder buttons for you to customize and add actions if you would like to create additional functionality.
**Placeholder button** refers to a fully designed button element that has been hidden by default but can be unhidden and used as needed in your application.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header#header-states)
Header states
------------------------------------------------------------------------------------------------------------------------------
The header reusable uses four states (states are often used in reusable elements to pass data between the reusable element and the page):
* **Dark? yes / no state** \- If Dark=yes, then the default logo, favicon, button, and link color in the header will be white. If `Dark` = `no`, then the default logo, favicon, button, and link color in the header will be the app's default color. Please see an example of this below on the index page:
* If you would like to change the background color when the header's "dark" state is "yes" so that it is not transparent, please modify this conditional on the `Group Header` element:
* **Show portal menu? yes / no state** - On mobile (when on a portal type page), you can click on the portal menu in the upper left corner to open the sidebar menu. This is achieved by setting the state of `Show portal menu` to `yes`.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/header#key-workflows)
Key Workflows
------------------------------------------------------------------------------------------------------------------------------
The header will come will various custom workflows that you can trigger from the page. You can do so by going to the workflow tab in the Bubble Editor and selecting Custom workflow > Trigger a custom workflow from a reusable element > Select header from the dropdown and the custom workflow name
Each header can contain custom text links, icons, or buttons and have multiple actions that can be set for each item. Learn about how to use each action .
**Widget Notifications** This action will show a notifications group focus when clicked. Learn how to customize this element .
**Widget Messages** This action will show a messages group focus when clicked. Learn how to customize this element .
**Widget Search** This action will show a search input within a group focus when clicked. Learn how to customize this element .
**Widget Shopping Cart** This action will show the shopping cart group focus when clicked. Learn how to customize this element .
**Portal page? yes / no state** \- When you add a to your app via Canvas Pages, there will be a workflow on that page for `When page is loaded`_,_ `set header's portal page? to "yes".` This will hide the favicon (`Group Logo Mobile`) and show the portal menu group (`Group portal menu`) in the header on mobile.
**Search page? yes / no state** - When you add a to your app via Canvas Pages, there will be a workflow on that page for `When page is loaded, set header's search page?` _to_ `yes`_._ This will hide the favicon (`Group Logo Mobile`), show the portal menu group (`Group portal menu`), and change the hamburger menu icon to a search icon in the header on mobile.
The popupreusables reusable element (which includes the popup) is included in the header, and can be triggered from the "show loader popup", "show message popup", "show login popup" and "show signup popup" custom workflows.
[portal page](https://canvas.airdev.co/resource/portal-dashboard-page-1541199301879x207238372182473540)
[portal search page](https://canvas.airdev.co/resource/search-page-1541199371286x774569242727011500)
[Signup/Login reusable](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/signup-login)
[here](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/widgets/ui-widgets#notifications)
[here](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/widgets/ui-widgets#messages)
[here](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/widgets/ui-widgets#search)
[here](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference/reusable-elements/widgets/ui-widgets#shopping-cart)
[here](https://docs.airdev.co/canvas/3.6/canvas-functionality/menus-and-navigation#setting-up-menu-item-actions)
The portal menu will replace the favicon on mobile when you set the header state for Portal page? to "yes"
---
# Miscellaneous | Canvas Documentation
[PreviousEmails & Alerts](https://docs.airdev.co/canvas/3.6/canvas-functionality/emails-and-alerts)
[NextReference](https://docs.airdev.co/canvas/3.6/canvas-functionality/reference)
Last updated 3 years ago
Was this helpful?
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/miscellaneous#setting-your-password-policy)
Setting your password policy
---------------------------------------------------------------------------------------------------------------------------------------
Setting your password policy in the admin portal will automatically update the password check UI throughout Canvas.
The Canvas template includes a built-in password check UI during the signup flow and anywhere the user is required to reset their password. By default the password policy is set to require 5 total characters and at least 1 number.
You can manage the requirements for your password policy directly from the Admin portal of your application. From the left menu click on Settings > Password policy.
There are four policies that can be set:
* **Password minimum length** - This sets the total characters that are required for the password to be valid.
* **Require numbers** (optional) - If checked you must set the total numbers required in the input to the right.
* **Require special characters** (optional) - If checked you must set the total special characters required in the input to the right. Characters that qualify as special characters for this rule are "**(**", "**)**", "**!**", "**@**", "**#**", "**$**", "**%**", "**^**", "**&**", and "**\***".
* **Require uppercase letters** (optional) - If checked you must set the total special characters required in the input to the right.
This is a Canvas feature and it does not utilize Bubble's built-in password policy feature. To use this in conjunction with Bubble's built-in password policy, in the Bubble editor go to Settings > General and set your password policy there as well. If you do update your Bubble password policy, please ensure that your Canvas password policy matches your Bubble password requirements. This will ensure the password policy check UI in throughout your app is up to date.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/miscellaneous#cookie-permissions-and-consent-banner)
Cookie Permissions & Consent Banner
-------------------------------------------------------------------------------------------------------------------------------------------------------
We consider it a best practice to ask users for consent to save cookies before storing data on their device and have built this functionality directly into Canvas. To set this up properly, let's start in the Bubble editor.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/miscellaneous#enabling-cookie-permissions)
Enabling Cookie Permissions
Once you have the editor open, from the left menu navigate to Settings > General > Privacy & Security. Here we need to check the box that says 'Do not set cookies on new visitors by default'
Next log in to the admin portal, click on Settings > Cookies and toggle the 'Require users to agree to the storing of cookies in their browsers when they visit your website' to ON.
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/miscellaneous#cookie-consent-banner)
Cookie Consent Banner
**Element name:** cookies\_permission **Purpose:** Get the user's consent to store cookies on their device
The Cookie Consent Banner is built as a reusable floating group and by default is placed on the index page of your Canvas template and anchored to the bottom.
To add the consent banner to another page, drag it from the list of Reusable elements onto the design canvas of the page you would like to place it and make sure it is positioned at the bottom edge of the page.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/miscellaneous#set-up-payment-info-on-account-page)
Set up Payment info on Account page
-----------------------------------------------------------------------------------------------------------------------------------------------------
Canvas comes with built in UI on the Account page for displaying the saved credit card details for your users as well as a history of transactions they have initiated.
Before setting up payments, from your Bubble editor navigate to Plugins > Add Plugins and search for Stripe. Install the plugin that was made by Bubble.
The Bubble stripe plugin adds additional fields to your user data type that can now be accessed.
In the credit card display we use a group called 'Group credit card brand name' to manage many of the conditions for this view.
####
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/miscellaneous#payment-workflows-logic)
Payment Workflows/Logic
After you have connected the existing UI, you will still need to set up the logic for the payment process. This includes:
1. Saving payment information (credit/debit cards)
2. Running the appropriate workflows from Stripe (or your payment provider)
3. Recording any other relevant information in your app
1. Responses from the workflows in step 2
2. Last 4 digits of card (for identification)
You will need to set most of this up on your own.
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/miscellaneous#loading-screen)
Loading screen
-----------------------------------------------------------------------------------------------------------
The loading screen element allows you to display a loading animation while your page's elements and data are being loaded beneath. You will want to include this on every page where you want this behavior.
The element can be found under **Visual elements**.
Simply drag it on to the page in order for it to be active. No matter how large the element is, it will always take up the full width of the page. Make it 1x1 pixels and place it in the top right corner of the page to avoid responsiveness issues.
The properties panel provides several options for customizing the behavior and appearance of the loader.
There are two ways in which you can use the loading element.
**1.** **Display by default on page load**
If the element is set to be visible on page load, a loading screen will appear on the page until you explicitly hide it. In order to have it disappear once the page's elements are loaded, you can either:
1. Create a workflow which is triggered when the page is loaded & loaded above the fold. Attach the **Hide loading screen** action.
2. Check the loading screen element's **Auto close** option
**2\. Manually set when to show/hide the loader**
Under Workflow actions > Plugins, you have two loader actions, one to show the loader and one to hide it. Use these to show the loader while specific workflows are firing (i.e. while making bulk changes to a list).
###
[](https://docs.airdev.co/canvas/3.6/canvas-functionality/miscellaneous#customizing-the-loader-style)
**Customizing the loader style**
Copy
**Updating the loading screen text** Modify the code in the loading screen element's text field to tweak the font size, color, weight, line height, and description.
Copy
Please wait
Setting up your portal
Please wait
Setting up your portal
Please wait
Setting up your portal