Plugins
Templates
Blocks
Template Setup Guides

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 AJAX style user experience and beautified URLs.

Features

  • Social Sign up with Google, Facebook & Twitter

  • Twitter sign up email fallback

  • Flexible on-boarding with location detection via IP

  • Two contribution types; Votes & Money

  • Subscription plans for getting votes

  • 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) and optionally subscribe to a plan. They can also chose to skip the on-boarding process. A status of skipped is added to their user data incase you want to remind them later via email.

Creating Fundraisers

Fundraisers are first created on the /raisefunds page 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 /story page 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 is guest mode or as signed up user and can be done anonymously in either cases.

Subscription Plans

Subscription plans is how users can get votes to support fundraisers. The subscription enables them commit to giving while the votes give them a say in which fundraisers should get the funds collected by the platform from subscriptions.

Funds from subscription plans are to be allocated to the most voted fundraisers by the admin until such fundraisers are fully funded.

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 AJAX style navigation powered by Hash and Pop state change browser events as well as Bubble's native URL path extraction.

On the fundraisers 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 on 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

  • Stripe.js

  • 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

Profile

Group edit subscription

Database things

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 the country objects for input validation. This means it shows/hides certain inputs and labels depending on the country the user is located.

  • Settings: The settings are configured inside a single settings object. The settings makes the above mentioned to function properly. The settings object has fields for setting Stripe supported countries, Stripe countries using IBAN and stripe countries requiring a 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:

  • 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 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 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 design tab or workflow tab as the case may be.

Demo to preview the template