logo

Reusable Elements Block

About this Template

Introduction

Our Custom Elements Block is kind of a no-code kit containing custom (reusable) elements. These are the most commonly used and will fit almost any page.
Each element comes with explanations and instructions on how to use them. Click on the (i) to see details for each element.
To add an element to your app/page, just copy & paste it into your app.

Features

Elements available:
  • Login/Signup form
  • Account settings (personal data and change password)
  • Popup
  • Benefits section
  • Custom cards section (2 options)
  • Team members (teal view)
  • FAQ Toggle
  • Custom elements
  • Pricing block with 3 plans
  • Blog
  • Article page
  • Contact form
  • Subscription forms (2 options)

Video Overview

Demo

βœ…
Give it a try here: https://basis.bubbleapps.io/🀩

Setup Guide

Once you have bought or added a template to your account, you will see a dropdown in the New Application popup that lets you pick a template as the basis for the new application.
☝
Note: This can only be done when you create a new app.
Image without caption
After selecting a template you’ve bought, please complete the other fields with the necessary data (i.e: Name of the new app, What kind of application you are building, etc) and press Create a new app.
πŸ’‘
Tip: A template isn't a theme for your app, but a pre-built set of elements and workflows. You can modify the template as you would modify another app.
Wait for Bubble to load the application with all the data.
Image without caption
After the application has loaded, you'll see the Bubble assistant on the left side for New Application. You can close it or follow the assistant steps to adjust different settings.
Image without caption
Now you're ready to go and dive into Bubble no-code development toolset.
Image without caption
βœ…
Congrats! You have successfully created a Bubble app based on your template. Now, you can proceed with the setups.

Payments

Card payments in this template are powered by Stripe, using the default card checkout providing a secure environment for users. To set up your Stripe account, go toΒ https://stripe.com, and create an account.
☝
Note: This template is using Bubble's Stripe plugin and Stripe Customer Portal for payments.
⚠️
Payments:Β See the documentation on how to setΒ Stripe PaymentsΒ in Bubble App.

Subscriptions

Since this template comes with a subscription feature based on Stripe payments (namely, in Pricing reusable element), it is required to also set up the paid subscription plan in your Stripe dashboard, then set the appropriate plan ID in your Bubble workflows.

Stripe Products

1. Go to https://dashboard.stripe.com/ of your app and open the Products tab:
Image without caption
Click the + Add a product button and continue with the steps. Set the following fields and fill them with your own information: set the name (any you prefer), the price (set the price and select the currency of your choice), set the Recurring type so it is a subscription, and the period of your choice (Monthly).
Image without caption
Click to Save product. Now go back to your Bubble editor to configure the subscription workflows with this ID.

Bubble Workflows

1. Go to pricingreusable element, open the following workflow and set the subscription ID of the products created in your Stripe dashboard. Assign the corresponding price plans ID in workflow actions:
Image without caption
☝
Note: Remember to change all the Test Keys to Live Keys when you are ready to go live with your app.
πŸ’‘
Tip: Genuine card information cannot be used in test mode. Instead, use test Stripe cards credentials.

Remove Demo Login

This template comes with demo accounts and demo buttons for testing purposes, which do not require a full sign-up process in order to test the platform features. Feel free to delete these login options in your app.
πŸ’‘
Tip: Please note that deleting the demo buttons will delete the button workflows as well. Removing these demo options doesn't affect any other aspect of the template.
Here is how to delete them (in Signup / Login Popup reusable element):
Image without caption

Things to Note

☝
Note: If you would like to use this template within another Bubble application, please note that for proper functioning, it is required to create all relevant data types within your application database, and add required plugins. For reference, use the purchased template Data Types and Plugins tab.

Hidden Design Elements

πŸ’‘
Tip: Initially, on some pages, design elements in Bubble Editor might be hidden.
Here is an example of how to unhide πŸ‘€ them:
Image without caption

Pages Overview

index

This is the main page of the block, where all reusable elements are placed in related sections. Here, users can see and test each reusable element.
Image without caption

confirm_email

This page is accessed by users that click on an email confirmation link.
Image without caption

reset_pw

This page is for resetting the password.
Image without caption

404

This is a page for 404 redirect errors, informing a user that the web page he or she is looking for cannot be found.
Image without caption

Reusable Elements Overview

Account settings

This reusable element can be used within a user profile page, providing a complete set of fields for filling.
Image without caption

Article

This reusable element provides a complete set of elements for a blog article page. The data source for the element population is made through the β€œBlog” data type.
Image without caption

Benefit section

This reusable element provides a ready-to-use block for the benefit section of the page, with three examples of arguments included (you can add more, just be sure to fill in all required data).
The data source for the element population is made from the β€œBenefit Section” data type.
Image without caption
Navigation between benefit tabs is made through custom states.
Image without caption

Blog

This reusable element provides a ready-to-use block with 4 in-a-row blog articles short summary information (you can add more articles, just be sure to fill in all required data). The 4th and subsequent blog articles are available on RG scrolling.
Image without caption
The data source for the element population is made from the β€œBlog” data type.
☝
Note: The HTML element within this reusable element is used to reduce the scroll bar thickness.

Contact form

This reusable element contains all the main elements necessary for a contact form.
Image without caption
Once the β€œSend Message” button is pressed, it created a new data field in the β€œMessages” data type.
Image without caption

Custom cards 2

This reusable element can be used to redirect users to other pages. All content is placed in tile-like groups and is directly written in text elements.
Image without caption

Custom cards

This reusable element can be used to redirect users to other pages. All content is placed in groups and is directly written in text elements.
Image without caption

Custom table

This reusable element can be used if a volume of data needs to be displayed in a table.
Image without caption
The data source for the element population is made from the β€œTransaction” data type.

FAQ Toggle

This reusable element can be used for a FAQ section of the page.
Image without caption
Answers to questions are hidden under the toggle and are displayed through a custom state condition.
Image without caption
The data source for the element population is made from the β€œFAQ” data type.
If more FAQ need to be displayed within the block, copy & paste related Repeating Group and indicate the required fields.
Image without caption

Floating menu

This reusable element can be used for fast navigation within the page sections.
Image without caption
It supports icon color change on page scrolling, to track the current user position on the page.
Image without caption
Scrolling navigation is made by using custom states within the reusable element and page.
Image without caption
Image without caption

Footer

The footer reusable element is located at the bottom of a page. It provides an example of how it can include external links, such as the company's social media, navigation, and copyright notices.
A great website footer design keeps people engaged and moving through the website. The workflows included with this element are pretty straightforward to follow.
Image without caption
This reusable element is customizable, so it is possible to change styles and content of element while keeping workflows or using it as inspiration for your own.

Header Hero (1)

This reusable element is a ready-to-use hero section for the index or home page.
Image without caption

Header Hero (2)

This reusable element is a ready-to-use hero section for the index or home page, including three-in-a-row tile-like groups. All content is directly written in text elements.
Image without caption

Popup info

This reusable pop-up element is used as a stub popup in the majority of the workflows on the indexpage.
Image without caption
The text displayed within the popup is changed accordingly to relevant condition:

Previous page button

This reusable element is used in the article page and has only one workflow attached - go to the previous page.
Image without caption

Pricing

This reusable element provides a complete set of elements and workflows required for selling subscriptions block. Element functionality is built based on the default Bubble Stripe plugin actions.
Image without caption
☝
Note: For a proper setup, follow the guidance of the Setup section of this documentation.

Signup / Login Popup

This reusable element is used in a few other reusable elements, as a popup for sign and login actions. It has all required workflows (login, signup and reset password) as well as demo login.
Image without caption
☝
Note: To delete the β€œDemo User” button, see the Remove Demo Login section of this documentation.

Subscribe (1)

This reusable element can be used for subscribing users to newsletters.
Image without caption
Once a user submits an email, a new thing is created.
Image without caption

Subscribe (2)

This reusable element can be used for subscribing users to newsletters.
Image without caption
Once a user submits an email, a new thing is created.
Image without caption

Team

This reusable element can be used to display a managing team. All content is placed in tile-like groups and is directly written in text elements.
Image without caption

Data Types

Benefit Section

This object stores the benefits of the company. It is a test data that is displayed on "Benefit Section" reusable element.
Field Name
Type
Notes
description
text
Stores the explanation of a benefit.
iconBlue
image
This field stores the icon that is shown near the title of a benefit in blue color. This icon is used when a user hovers the title and the icon changes it's color.
iconDark
image
This field stores the icon that is shown near the title of a benefit in black color.
title
text
Stores the title of the benefit.

Blog

This object stores the articles for a blog for the "Blog" reusable element.
Field Name
Type
Notes
author
text
This field stores the author's name.
content
text
Stores the content of an article.
date
date
This field stores the date the article was published.
description
text
Stores the description of an article.
image
image
Stores the cover image of an article.
readingTime
number
This field stores the time for a user to read an article.
title
text
Stores the title of an article.

FAQ

This object stores the test FAQ that are separated by topics. FAQ are displayed on "FAQ Toggle" reusable element.
Field Name
Type
Notes
answer
text
This field stores the answer to a question.
question
text
Stores the text of a question.
topic
text
This field stores the topic the question is related to.

Message

This object stores the data about users that sent a message with a "Contact form" reusable elements.
Field Name
Type
Notes
message
text
Stores the text of the message that user filled in a multiline input.
user
User
This field stores the current user.

Subscription

This object stores the data about users that clicked on "Subscribe" button on "Subscribe(1)" or "Subscribe(2)" reusable elements.
Field Name
Type
Notes
email
text
This field stores the email that a user filled in the input.
user
User
This field stores the current user.

Transaction

This object stores the test data of transactions that is displayed on "Custom table" reusable element.
Field Name
Type
Notes
amount
number
This field stores the sum of money that was transfered.
date
date
This field stores the date of a transaction.
fee
number
Stores the transfer fee.
receiverCountry
text
This field stores the receiver country's name.
status
text
Stores the status of a transaction.

User

This data type stores user-related information.
Field Name
Type
Notes
brand
text
Stores the name of user's brand (test data).
emailNotifications
yes / no
This field determines whether a user wants to recieve notifications on email.
emailVerified
yes / no
This field determines whether a user's email is verified.
frequency
text
This field stores the frequency of a plan the user is subscribed to.
name
text
This field stores the name of a user.
phone
text
This field stores the phone of a user.
stripeCustomerID
Stores the ID that identifies a customer in Stripe.
stripeSubscriptionID
text
Stores the ID that identifies the user subscription in Stripe.
subscriptionStatus
text
Stores the subscription status of a plan the user is subscribed to.
subscriptionEnd
text
This field stores the day the subscription ends.
subscriptionStart
text
This field stores the day the subscription started.
tempPassword
text
This field stores the temporary password of a demo user.
usedFreeTrial
yes / no
This field determines whether a user used the free trial.
πŸ’‘
Tip: The User data type have the following fields: email, Modified Date, Created Date and Slug. These fields' values can be used in workflows, conditional formatting, etc. To learn more, see the Bubble manual
☝
Note: The data type has a privacy rule applied. See the πŸ’¬ in the database under the privacy section for details.

Release Notes

04 October 2022

❕
UPDATE NOTE: This template received a complete overhaul of design as well as functionality. Most of the known bugs and issues have been fixed and new features added.
  • πŸ”„ Template's design reworked and updated to the new Bubble Responsive Engine
  • πŸŽ‰ New template documentation
  • πŸ”§ Added "Setup Guide" section
  • ❔ Added "FAQs" section
  • βœ… Added "Release Notes" section
  • 🎬 Added "Video Overview" section
☝
Note: Template updates don’t apply to the apps which were built on the template prior to updates becoming available.
πŸ’‘
Tip: To check changes in workflows and design after the release update, you can create a new block copy and compare the settings (design/workflow) of the new copy and the app you have. So you don't have to "move" your customizations from your already edited template to the new block copy.

Ready to move further?

Enhance your app with powerful plugins

βœ…
πŸ”Œ Zeroqode Plugins: add Superpowers to your App

Zeroqode Air Native plugin

☝
Note:Β This template hasΒ Zeroqode Air NativeΒ plugin installed. With the pluginΒ you will be able to integrate all the native features into your Bubble app: Touch ID & Face ID, Push Notifications, Camera & Gallery Access, and many others. To be able to use all the native features, the plugin needs to be purchased (one-time payment or a monthly subscription) via Bubble’s marketplace.
The Air Native plugin allows you to implement the native features within your Bubble editor, but in order to convert the Bubble app into native Android and iOS, it is required to use the Air Native service.
If you do not want to use it, simply remove the plugin from the template.

Zeroqode Air Bundle plugin

☝
Note:Β This template hasΒ Zeroqode Air BundleΒ plugin installed. It contains six most commonly used and complex plugins that will easily extend your application. To be able to use it, the plugin needs to be purchased (one-time payment or a monthly subscription) via Bubble’s marketplace.
If you do not want to use it, simply remove the plugin from the template.

Boost your Bubble skills within our Lab

βœ…
πŸŽ“ Zeroqode Lab: no-code Courses and Tutorials