Template Setup Guides

Ridely - Ride Sharing like Uber Template

Template page link:


Ridely is an amazing no-code taxi template. It creates a ride sharing application for any taxi company, or can bring several into one app. This template features both rider's and driver's pages, which are formatted as a mobile app. As well as desktop pages for signup/signin and profile management.

This template is built with taxi services in mind, but it can be used for shuttle busses, ride-sharing etc. It is all up to your creativity and ideas.


  • Mobile design

  • Landing page

  • Driver dashboard

  • Rider dashboard

  • Stripe Payment

  • Integrated Map view using Google Maps Extended and Google places plugin.

  • Admin Dashboard

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

Data Structures


This template allows for two user types, a rider and a driver type account. Information about this user types are stored within the User. Within this data structure, they are fields that include basic profile details like Last Name, First Name, email, Phone Number. It also contains user Rating, snapshot of the Drivers License, Trip (takes a List of Trips) Driving Experience and so on.


This data type takes information about the car used by a user (provided by the driver). The Car data table has fields like Brand of the car, the car's Color, Full Name, snapshot of the Insurance, License Plate, car Model, a Picture of the car, Selected (takes a value of either Yes or no and is True when a car is selected for use on the platform).


The payment data type only contains fields that include the Logo, Name and the associated User (takes a list of Users).


When rider users takes a ride to their various locations, a fee is charged and paid to the driver user, the Transaction data table holds the information necessary for this process. Within this type, we have fields like the Amount charged for a trip, the CC Last 4 Digits ( found on the back of payment cards), the associated Driver user, the associated Rider user and the Trip.


The Trip data type holds all the details about a particular trip on the platform, it includes fields like the Cost, the Starting Point, Destination, Direction (takes a List of geographic addresses), Distance(API), the associated Driver and Rider, Duration(API) of the trip, End Time of the trip, Payment Received (takes a value of yes or no and is true when payment is received), Pickup Time, Transaction and Rating



The landing page of the template shows an overview of how the platform works, provides a call to action on user login and signup as either a driver or a rider.

Custom States

The index page has no custom states.


This page provides the user the option to Get a Ride and also houses a list link of rider information that include the history of the rides, details on payment methods and transactions, Help (this displays a view with answers to frequently asked questions and so on), and the option to log out as a user. Note that when a user is not logged in, this page would prompt user to create an account or login with already existing account details.

Custom States





Group Ride Info Header, Group Driver Header

This state is used to display a view and is true when the ride or Driver information is displayed



This state also determines view that is displayed.


Materiallcon menu

This state is used on the navigation button to toggle (hide and show) between views.


Group User Signup

Used to set and determine the signup view to display


Popup Email

credentials state is either yes or no and is true when the Popup email view is shown or visible.


This is the driver user's profile page. within this page, there is a tab view with three tab items that include MY TRIPS (this tab item when active populates the list of trips the driver has taken below the tab view), PAYMENT (shows the driver's Card Details) and PROFILE (when this tab item is active, the user's details are displayed).

Custom States






This state is used on the tab items PAYMENT, PROFILE, MY TRIPS to toggle (hide and show) between views.


Button Connect Payment

When the Connect Payment button within the PAYMENT TAB is clicked, this state sets and displays a view.


Group Car in RG, Group Trip Panel Driver

Also in these elements, this state sets a view.


This is a previous layout for the index page.


This page houses the sign in view that provides a form for the user's (driver) login credentials and also the signup view.

Custom States





Button Upgrade Driver!

This state is set on the Upgrade button that becomes visible when an email that is already in use is used for another account type.


Like the app_rider page, this page provides a link list of items, but in this case the details are for the driver user. This list items include Go for a Ride, Rides History, Payment, Profile, Vehicle (on clicking this link, a view is populated with a form to take car details such as the brand, model, license plate number, etc), Help and Log out.

Custom States






Used to set and display a view

ride info

Group Ride

This state's value is either yes or no and is true when set view is displayed.


FloatingGroup Top Menu

This state is set on the menu button and is used to make a view visible.


Popup Email

The view with the form that takes the inputs email and password for editing credentials is made visible or invisible using this state.


This is a simple page with background image (static image) and a few elements. It has no custom states.


The help page displays a static content that an assists the users and answers frequently asked questions and it has no custom states.


This page is similar to the driver_profile_3 page. It contains a map view as background and a tab view with MY TRIPS, PAYMENT and PROFILE as the tab items.

Custom States






In these elements, this state is used to alternate between the views that belong to different tab items.


Group Trip Panel

Within the MY TRIPS view, the Group Trip Panel element is set with this state and it is used to display a view.


This page contains views for the users(rider) sign-up and sign-in forms.

Custom States





Button Upgrade Driver!

This state is set on the Upgrade button that becomes visible when an email that is already in use is used for another account type.

Specific Reference


To setup your stripe account, go to, create an account. You will be allowed to access your dashboard once you have successfully verified your email address and activated your account.

Click on Developers and then, API keys. copy your API keys. Ensure to use a live API key when your template goes live

Paste the API keys in the stripe connector calling the plugin.

Things to note

In order to have the Map working properly will be needed to set up the Google service account and enable libraries.

Here is a step by step instruction on how to do that:

  1. Open this link: (and make sure you are logged in)

  2. Create a project by clicking here and then in the window that will open click on “New Project” and click on “Create” button

  3. Once the project is created open Library by clicking on its tab

  4. In the opened tab, use “Search for API & Services” for finding the libraries that are needed to be to enable. (in the following steps will be shown an example of how to enable the one library and with the following one you just will need to repeat steps from 4 to 8).

  5. Click on the found library 1

  6. Press Enable button (please consider that you may need to wait until the Enable button will appear)

  7. Go back to search page

  8. Go back to step 4 and search for the following library.

The list of libraries that are needed to be enabled include:

  1. Geolocation API

  2. Maps SDK for Android API

  3. Roads API

  4. Places API

  5. Maps JavaScript API

  6. Maps Embed API

  7. Time Zone API

  8. Distance Matrix API

  9. Maps SDK for iOS API

  10. Maps Elevation API

  11. Directions API

  12. Maps Static API

  13. Geocoding API

  14. Street View Static API

Once all libraries will be enabled, open Credentials tab Click on “Create Credentials” button Select “API Key” option And then send to us the key from the field “Your API Key”

Demo to preview the template