Plugins
Templates

Learny SaaS - Online Learning Platform Template

Template page link: https://zeroqode.com/template/learny-saas---online-learning-1598432783836x834882639391815700

Introduction

Learny SaaS - Online Learning Platform is a no-code platform designed for running various online schools. It allows you to add an unlimited number of courses, each of which can have its own curriculum organized around sections and classes. The platform comes with Wistia integration as a hosting solution for all the videos. The platform suggests the subscription model access the courses and the payment gateway used to achieve that is Stripe. There are 3 subscription plans configured. Users in the platform area are able to have discussions under each course which will increase community engagement. A powerful admin panel offers a lot of features like checking logs and statistics, managing users, FAQs, and courses, etc. This template was used to build Zeroqode Lab - an acting and a very successful platform for learning how to build apps without code - you can check it out here https://lab.zeroqode.com)

Features:

  • Landing page

  • Responsive design

  • Wistia video hosting integration

  • Subscription plans

  • Payment via Stripe

  • Powerful admin dashboard to manage the platform

  • URL sharing

  • Comments and replies section

  • Google and Facebook Logins

  • Logs and Statistics

Data Structure

Category

This data type represents the course category. Each course is assigned to a certain course category.

Comment

This data type represents the comments section of the course and replies. Comments can be approved or disapproved in the Admin Panel.

Coupon

This data type represents discount % coupons created in Stripe.

Course

This one represents the course object. It contains all fields related to the course, like course comments, description, nr of lessons, etc.

Enrollment

This is user enrollment for the course (what courses the user started watching).

FAQ

This data type represents the FAQ section on the Index page, which has Questions and Answers fields.

Feedback

This data type represents platform feedback.

Image for email

This data type is used for sending a logo in standard Bubble emails.

Lesson

This data type has a lot of fields describing the Lesson object, e.g. information, title, section, etc.

Logs

This data type logs users' actions like sign up, subscriptions, canceling plans, etc. The logs are displayed in the Admin Panel.

LWDuration

This data type stores information about video progress (seconds).

Plan

This data type is used for the creation of the subscription plan(s) in Stripe. You can set a name and price for the plan.

Reply

This is the reply to the course comment in the Comments Section of each course.

Section

This data type represents a Course section that can contain one or a few lessons.

Tags

This data type is used for Course tags. Each tag has a name and is assigned to a course.

User

This data type a person who joins the platform. Each user data type has many fields, including firstname, lastname, enrollmentdate, etc.

ViewsHistory

This data type is about each Course's views (how many times the user has watched a course video).

WhoWhatHow

This data type represents the Course Description section. It contains Who is this course for, What are the requirements and What you'll learn.

Pages Description

Index page

This is the landing page of the template.

The Index page consists primarily of a set of block entries, such as Information blocks, Search block, Advantages block, Testimonials, FAQ Section and Footer.

About us page

This page contains an Information block and CTA button.

Admin page

This page is designed for platform admins. It has the following sections:

Home - where admin can see logs, number of users, total comment count, paid subscriptions, etc.

Courses - here admin can add, edit, or view the courses.

Comments & Reviews - this section is for viewing, editing, and approving or disapproving reviews.

FAQ - this tab is for adding, editing, and viewing of Frequently Asked Questions and Answers.

Users tab is for viewing and managing platform users.

The Categories section is used for setting the Courses categories and tags.

Course page

This is a course page where users can see the course description, course inro video, course sections, lessons, and enroll for the course.

Course details page

Here user can see lessons of the particular course, leave comments for the course, reply to some other comments. This page has js script to remember the moment when they ser stopped the video and continue video from this very moment in his next session.

Courses page

This page displays all the courses that are added to the platform. It also features the search bar, where the user can search for courses by tags.

FAQ page

It features Frequently Asked Questions and Answers.

Home page

This is a home page for the user. It has 2 tabs: Wishlist and Enrolled courses to keep track of courses user's watching.

Pricing page

This page displays platform pricing for various subscription plans. When you subscribe for the first time you can use a coupon to get a discount (%) for any subscription plan.

Privacy policy page

Here you can add your Privacy Policy.

Terms&Conditions Page

Here you can add your Terms & Conditions.

Profile page

Here users can update their personal information, including name, email, and password. Payment information can be updated here too. Users can manage his subscription plan on this page.

404 Page

This page comes up whenever the user search couldn't be located on the server.

Reset Password page

This page is for cases when user wants to reset his password.

Sign up Page

This is a signing up & login page with Google and Facebook authentication options.

Reusable Elements Description

courseReusable - contains all the courses and search by course tag, category and title.

header - this is the top element available on all or most pages of the application. It contains links to pages (x,y,z), menu for logged in user, etc.

footer - this is the bottom element available on all or most pages of the application. It contains links to pages (x,y,z), SM links, etc.

pop up logo - this is the image element used for changing logo in all the pop-ups.

sectionInfo - this is the element that shows info about Course section on hover.

Things to Note

Admin page is read-only

The page is view only and users not perform any actions in the admin panel until you purchase the template, create a new user, and input "admin" in AcessRights field in Editor in DB for this particular user.

Course page | HTML Wistia iFrame

This template uses https://wistia.com/ as a hosting video location. Please signup for a developer account in order to use it. Note: Wistia service can modified to another existing service or using Bubble internal tools.

Wistia video platform iFrame to embed promo video

To embed promo video for the course please use snippet code provided by Wistia.

Course Details Page | Js script

This page has js script to remember the moment when the user stopped the video and continue video from this very moment in his next session.

It saves the playback value in DB every 60 seconds.

------------------------------------------

This script remembers the moment when the user stopped the video on his last session within this course.

---------------

----------------

Payments

This Stripe API call. It works as follows:

Create subscription upgrade session.

Creates a session of the customer portal.

Details: https://stripe.com/docs/api/customer_portal/create

updated_plan

Updates an existing subscription to match the specified parameters. When changing prices or quantities, we will optionally prorate the price we charge next month to make up for any price changes. To preview how the proration will be calculated, use the upcoming invoice endpoint. By default, we prorate subscription changes. For example, if a customer signs up on May 1 for a €100 price, she'll be billed €100 immediately. If on May 15 she switches to a €200 price, then on June 1 she'll be billed €250 (€200 for a renewal of her subscription, plus a €50 prorating adjustment for half of the previous month's €100 difference). Similarly, a downgrade will generate a credit to be applied to the next invoice. We also prorate when you make quantity changes.

Details: https://stripe.com/docs/api/subscriptions/update

API new subscription

Creates a new subscription to an existing customer. Each customer can have up to 25 active or scheduled subscriptions.

Details: https://stripe.com/docs/api/subscriptions/create

Retrieve subscription

Retrieves the subscription with the given ID.

Details: https://stripe.com/docs/api/subscriptions/retrieve

Create subscription session

Creates a Session object.

Details: https://stripe.com/docs/api/checkout/sessions/create

Retrieve a session

Retrieves a Session object.

Details: https://stripe.com/docs/api/checkout/sessions/retrieve

Cancel plan SaaS

Cancels a customer’s subscription immediately. The customer will not be charged again for the subscription.

Details: https://stripe.com/docs/api/subscriptions/cancel

Pricing page

Pay attention to the pricing page HTML Header

It uses the Stripe API keys, so don't forget to replace them with your own keys.

Webhooks

customer.subscription.updated

This webhook updated the user subscription plan.

customer.subscription.deleted

This webhook cancels subscription plan.

Google and Facebook signup

The template uses the standard Oauth 2.0 method for Google and Facebook via default plugins. See details on how to create the user flow for Google: https://developers.google.com/identity/protocols/oauth2 and for Facebook: https://bubble.io/reference#Plugins.facebook More info on Oauth Login - https://bubble.io/reference#Actions.OAuthLogin

Demo to preview the template