Canvas Pages and Modules
Search…
Canvas Pages and Modules
2.0.0
Welcome
PAGES
Free Bubble Marketing Page
Premium Bubble Marketing Page
Centered Profile Page
Left-justified Profile Page
Standard Page
Toggle Tabs Page
Menu Page
Mobile Menu Page
Video List Page
Portal/Dashboard Page
Portal / Dashboard Page with Icons
Simple Portal / Dashboard Page with Icons
Search Page
Map Page with Search Bar, Toggle, and Filters
Search Bar Page
Listing Profile Page
Multi-Step Page (Progress Bar)
1-Column Multi-Step Process Page
2-Column Multi-Step Process Page
2-Column Profile Page
2-Column Profile Tabs Page
2-Column Menu Tabs Page
2-Column Checkout Page
2-Column Product Checkout Page
2-Column Video Chat Page
BLOCKS
Comments Thread
Nested Comments Thread (with Like and Reply)
Chat Widget
Bottom Input Chat Widget
Toggle Tabs Group
To-do List
Title Group with Button and Filters
Listing Details with Tags, Button, and Progress Bar
Listing details with icons and menu focus group
Week Daily Availability
Shopping Cart
FAQ Group
Shipping Details
Payment Methods
Order Confirmation
Dismissible Module
Placeholder group
Video Group
About Group
Add to Cart Group
Full Width Map with Directions Link
Location Module (Map and Directions)
Drag and Drop Repeating Group
Advanced Form Inputs Group
Reviews Repeating Group with Image
Reviews (Text Only) Repeating Group
Nested Repeating Group
Standard Repeating Group with Image
Single Input Search Bar and Filter Group
Listing Details Group
Post Group with Upvoting UI
Dashboard Chart Widget
Main Image with Thumbnails
Centered Profile Module
Left-justified Profile Module
1-Column Standard Form Inputs Group
1-Column Instagram Tiles Group with Nested Comments
1-Column Link, Text, and Menu Focus Repeating Group
2-Column Repeating Group (Text, Link, Image, and Description)
2 Column Repeating Group (Link, Text, and Button)
2-Column Tiles Repeating Group
2-Column Simple Form Inputs Group
2-Column Sortable List (Image, Link, Star Rating, and Text) Repeating Group
2-Column Dashboard Widgets
3-Column Dashboard Widgets
3-Column Repeating Group (Text, Link, Image, and Description)
3-Column Text and Link Repeating Group
3-Column Icons with Labels Repeating Group
3-Column Tiles Repeating Group
3-Column Tiles with Buttons Repeating Group
3-Column Horizontal Scroll Repeating Group
4-Column Tiles Repeating Group
5-Column Date Table with Cell Selection, Menu Focus Group, and Filters
Mobile-Friendly Data Table with Cell Selection, Menu Focus Group and Filters
Standard Horizontal Scroll Data Table
Infinite Columns Horizontal Scroll Data Table
Infinite Columns Horizontal Scroll Data Table with Fixed First Column
Popups
Confirmation Popup
Message Popup
Image Popup
Video Popup
Vertical Scroll Popup
Edit Popup
Standard Form Popup
Subscribe Popup
Feedback / Contact Popup
Details Popup
Add List Popup
Advanced Form Popup
Rating Popup
Toggle Tabs Popup
Share Popup
Multi-Step Popup
Invoice Popup
Stripe Credit Card Purchase Popup
Reusables
applyfilters
menufocusgroup or Menu options (︙)
Powered By GitBook
Share Popup

Overview

This popup allows you to share the app with a friend via email, Twitter, or Facebook. It also contains UI elements to copy a code to a clipboard (e.g., promo code, referral code), and a short form.
​

Structure

The popup includes the following:
  • Copy to clipboard input and button
    • There is an HTML element that copies the input's text to the user's clipboard using a javascript action.
  • Share by Email button
    • Recipient email input
    • Body message multiline input
    • From input
    • Clicking Button SHARE will trigger a send_email API workflow
      • To use API workflows in your app, you need to be subscribed to at least a Personal Plan (Bubble editor > Settings > App plan)
      • You need to have set up your SendGrid email account (please read the quickstart guide here)
  • Share to Twitter link
  • Share to Facebook link
  • Share to LinkedIn link
  • Send email form elements
    • There is a collapsible group (Group Collapsible email details shown in the screenshot below) which contains three input elements. This small form can be made visible if you prefer to have the user stay in the app in order to share something, instead of having the user click the Share by Email button and type their share message in an external email service.

How to set up

  • Edit the copy to clipboard input text's default value to be the unique code that the user will copy
  • Update the recipient email input, body message multiline input, and from input
  • Edit the send_email API workflow if needed
  • Add a workflow on the page to show Popup sharePopup
  • Set the collapsible invite by email group to be visible and update the workflows to send an email.
Popups - Previous
Toggle Tabs Popup
Next - Popups
Multi-Step Popup
Last modified 1yr ago
Copy link
Outline
Overview
Structure
How to set up