Quickstart Guide

How to quickly and easily get started with the template

Step 1: Set up your homepage

Our Canvas template includes a fully functional homepage maker. App owners can manage and customize their homepage content from the Owner’s Portal without needing to modify the app index page through the Bubble editor.

To set up your homepage:

• Go to your app (https://bubble.is/page?id=**YOURAPPNAME**\)

• Click on the Data tab > App data tab > Users data object

• Click run as next to the user [email protected] (any user that has the Owner field as yes will be able to access the Owner’s Portal page)

• On the Owner’s Portal page, click on the Homepage tab to customize your homepage content

For more information on how to setup your homepage, click here.

Step 2: Set up your email

This template does not use Bubble’s native “send email” functionality, but instead it uses an API workflow that generates a nicely-formatted HTML email from SendGrid.

To set up your email:

• Navigate to SendGrid and sign up for a free account

• Once you are in the SendGrid dashboard, click on the Settings tab > API keys tab

• Select Create API key > General API key and fill out the subsequent form

• Save your API key somewhere (you will not be able to view it again)

• Go to your app (https://bubble.is/page?id=**YOURAPPNAME**\)

• Go to the Plugins tab > API connector > SendGrid API > Expand send email API call

• Under Headers enter the following:

  • Key: Authorization | Value: Bearer yourapikey | Private

  • Key: Content-Type | Value: application/json | Private

To update the admin email for the app:

• In run-mode, go to the owner's portal

• From the IDENTITY tab, find the input for "ADMIN EMAIL"

• Update this with the relevant email address and save your changes

Step 3: Set up Stripe

To enable Stripe on your platform:

• Go to Stripe and create an account. You must officially activate the account before using payments in live mode

• Enable Stripe Connect from the Connect tab

  • From the Settings tab, add the following redirect URI: https://bubble.is/poststripeauth

  • From the same tab, enter your branding details

• Add API keys to Bubble app

  • From the Stripe dashboard, go to Developers > API keys

  • Grab the Publishable key and the Secret key from the Standard keys section

  • In your Bubble app editor, go to Plugins and find Stripe. Add your API keys to Live Publishable Key and Live Secret Key inputs

  • Go back to your Stripe dashboard, from the same API keys section, toggle View test data. Grab the Publishable/Secret keys and add them to the same Stripe plugin

  • Lastly, return to the Bubble app editor, go to Plugins and find Stripe (for Canvas templates). Add your Live and Development Secret keys to the Authorization (shared headers) and Authorization (shared headers) - dev. Inputs. Your values should follow this format: Bearer sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

• Add client IDs to Bubble app

  • From your Stripe dashboard, go to Settings > Connect Settings

  • Grab the Live mode client ID as well as the Test mode client ID (by toggling Viewing test datain the top right corner)

  • Go back to the Stripe plugin in your Bubble app and add both these IDs

• From the Stripe plugin, update the Stripe Checkout Image and Name with your own branding

Step 4: Register your app to use the Canvas Chrome extension

You can easily add fully responsive pages and blocks to your app by registering your app with our Canvas chrome extension. Because this template was built before the most recent updates to the Canvas Base Template and the extension, we will need to register your app manually in order for you to use the Canvas chrome extension. To register your app:

• Please send an email to us at [email protected] with your email and Bubble app ID. We will then manually register the app with Canvas for you to use our Canvas chrome extension to add page templates and blocks from our library.

• You will be able to add new blocks and page templates to your app. The extension will prompt you to update your app styles and add the new styles to your app for you. This will not impact any existing pages or blocks in your app.

• The page builder (for marketing pages) will not be available to Canvas apps created before 12/29/2020

Step 5: Migrate your Bubble database to live mode

When you first access this template, you will be viewing the Development version of the database. While this database version is sufficient for designing, building, and testing your application, it is highly recommended that you deploy all app updates to live and migrate your development database to the production database before launching your app with real users.

Switching your database view from development to live

When viewing your application's data (through Data > App data in the Bubble editor), it is critical that your data view matches the version of your app that you are examining. To switch views between the Development and Production database, simply click the red "Switch to Live" (or "Switch to Dev.") button in the top right.

Copying over your database from development to live (and vice versa)

After you initially deploy your app to live, please copy over the development database to the production version.

• While its not critical to migrate every piece of test data to the live version, there are certain data types (and instances of those data types) that are necessary to retain in both versions for various reasons

• Because of this, it is highly recommended that you copy over the entire database and then delete certain bits of test data that are not needed

• In any case, there are a few data types you'll want to make sure you've copied over

  • Each database version should include exactly one instance of the Website data type

  • If you want to retain the ability to customize your homepage, make sure you've copied over all 11 entries for the Homepage block data type

  • Similarly, if you want to retain the specific blocks of content you've configured for the homepage, make sure you've copied over all entries for the Block entry data type

To copy over database versions, click the red "Copy and restore database" button in the top right.

• From this modal, select the option for Copy development data into the live database

• Next, choose All types

• After you've made sure you've selected the appropriate options, type in the requested text and click to confirm the migration

Other critical things to note

• Groups on the same page should be stacked vertically (not overlapping)

• Use Canvas app reusables elements to reduce redundancy in workflows

• Store results of URL parameters, search results that to be referenced in multiple places, or calculation results based on an input on the page in the “Hidden variables” popup on each page

• Privacy rules need be to set up for all new objects created