Plugins
Templates

Fundstarter - Crowdfunding like Indiegogo Template

Template page link: https://zeroqode.com/template/fundstarter---crowdfunging--template-1525861245605x543591561990504450

Introduction

Fundstarter is an amazing responsive no-code template for crowdfunding with functionality similar to Kickstarter, Indiegogo, or Gofundme. It includes payment automation through Stripe as well as a powerful dashboard to manage the entire platform. The template supports monthly donation plans and custom contributions to a particular fundraiser. It also features an AJAX-style user experience and beautified URLs.

Features

  • Social Sign up with Google, Facebook & Twitter

  • Regular email signup

  • Twitter sign up email fallback

  • Flexible onboarding with location detection via IP

  • Two contribution types; Votes & Money

  • Payments powered by Stripe with webhooks implemented

  • Custom card payment forms

  • Fundraiser payouts: Automatic via Stripe or Manual via Bank, PayPal, Bitcoin, etc.

  • Beautified URLs for fundraiser and user profile pages (with fallbacks for un-set usernames)

  • AJAX-style navigation

  • Same page editing for fundraisers

  • Transactional Email workflow actions for key events

  • Powerful Admin dashboard

  • Fully mobile responsive design

Payments: See the documentation on how to set Stripe Payments in Bubble App.

Main Documentation

On-boarding

The on-boarding page /complete is where new users can complete their profiles (username, bio, social links, etc). They can also choose to skip the onboarding process. A status of skipped is added to their user data in case you want to remind them later via email.

Creating Fundraisers

Fundraisers are first created on the/raisefundspage where the user fills in the fundraiser title, category, and fundraising goal. This is where the fundraiser's unique ID is created (separate from Bubble's unique ID).

After submitting the form the user is sent to the fundraiser page in edit mode to provide all the remaining information. The first time this happens, the user is presented with a popup showing them the fees involved or any other important information.

Editing fundraisers

Fundraisers can be edited on the same/storypage they are viewed. When the creator or admin visits the page, a bar is displayed with a button to toggle edit mode.

Contributions

Users can support or make contributions to fundraisers in two ways. The prominent way is to vote for a fundraiser. Users can give any number of votes from their voting balance to fundraisers of their choosing. The second way is to make a custom contribution which involves making a direct monetary contribution via card payments. This can be done in a guest mode or as a signed-up user and can be done anonymously in either case.

Stripe Payments

Card payments on the platform are powered by stripe using custom card forms with webhooks for foolproof verification of payments made and to carry out additional workflows like sending emails without front-end delay.

Payouts

Payouts for successful fundraisers can be done via Stripe or manually. If a fundraiser has ended with funds raised, they'll see a button to receive funds on the fundraiser page. When they click it they'll be required to choose their country. This is what determines whether or not they can use Stripe to receive payouts to their bank account. They are presented with a form to fill in more information depending on whether they are in a Stripe-supported country or not.

URLs and navigation

This template has beautified URLs and an AJAX-style navigation powered by Hash and Pop state change browser events as well as Bubble's native URL path extraction.

On the fundraiser's page /story, the fundraiser's 6-digit unique ID is used as the path and is used to fetch the fundraiser from the database and set it on the page.

On the user profile page /profile, the user's 6-digit unique ID is used only when the user has not set his/her username. When available, the username is used as the path.

On both the /story and /profile pages, the hash event is used to change states and display the right groups. For example, #edit toggles the edit mode when appended to the URL of a fundraiser.

Things to note

API Keys

Several plugins require you to add your own API keys for them to work properly. You would need to get your own API keys for the following plugins:

  • Facebook

  • Google

  • Twitter

  • API Connector calls; Link Preview, Stripe Direct, Sendinblue

  • Random String Generator

Overlapping Elements

You will find overlapping elements within certain groups for mobile support or tab-style viewing. Below are the locations of such elements.

Page

Element

Leaderboard

Group Leaderboards

Profile

Group Hero Overlay

Profile

Page level

Profile

Group edit

Profile

Group Main Content

This template makes use of some database objects for certain functionality as explained below.

  • Payouts: Before requesting a payout, users are asked to select their country of residence. This is checked against the Stripe supported countries which are country objects that have been added to a field (under the sole settings object) which is a list of countries.

  • Stripe Payout Bank Form: The form for collecting bank account information from users uses thecountryobjects for input validation. This means it shows/hides certain inputs and labels depending on the country where the user is located.

  • Settings: The settings are configured inside a singlesettingsobject. The settings make the above-mentioned function properly. The settings object has fields for setting Stripe supported countries, Stripe countries using IBAN, and stripe countries requiring the 3rd code for complete bank info.

IN CONCLUSION, DO NOT DELETE THE country, OR settings DATA UNLESS YOU ARE SURE YOU KNOW WHAT YOU ARE DOING.

Custom Code

Profile Page:

  • The page is loaded workflow: The custom javascript used here does not need to be changed. It is used for navigation between tabs. It also relies on the JavascriptToBubble elements which must not be removed or edited.

  • Do when Input Card Number is a visible workflow: The custom javascript used here does not need to be changed. It is used for card validation and feedback. It also relies on the JavascriptToBubble elements which must not be removed or edited.

  • Do when Input Card Number 2 is a visible workflow: The custom javascript used here does not need to be changed. It is used for card validation and feedback. It also relies on the JavascriptToBubble elements which must not be removed or edited.

Tip: You can find the above workflows & elements using the search bars in the design tab or workflow tab as the case may be.

Admin page - full access

The template's admin page contains a list of restrictions, which are created for protecting the data from database removal. To get full admin access (all elements are clickable and available for changes), please follow this guide.

  1. Remove the Group wrapper alert. You can find this element inside the Group container > Group wrapUpper. Simply remove it:

Group alert

2. To provide a user ADMIN rights, do the following:

  • go to the Data > App Data > Users table, find the user to whom you want to grant admin rights;

  • click the "edit" icon on this user's record;

  • in the "admin" field from the drop-down choose YES.

  • choose NO, otherwise.

Data > App Data > User > edit

3. To restrict the access to the admin page, for all users whose user type is not ADMIN, do the following:

Page restriction for non-admin users

4. Remove restrictions on the buttons.

USERS: Edit/Remove You need to deactivate the checkbox "This element is not clickable" and remove the Condition:

Remove settings for the Group Delete User and Materialicon Delete User
Remove settings for the Edit Delete User and Materialicon Edit User

Do the same actions for the following items to get access:

FUNDRAISER: Delete icon, Resume icon, Deny icon, Launch icon, Fund icon, and Edit icon

DISCUSSIONS: Edit icon, Delete icon.

Demo to preview the template