Plugins
Templates
Template Setup Guides

Invoicely - Invoicing Template

Template page link: https://zeroqode.com/template/invoicely---invoicing-and-payments-template-1591350727212x649382089293377700

Introduction

Invoicely - Invoicing and Payments Template is a no-code template for small businesses or freelancers that offers a simple way to create invoices for products and services so that your customers could easily pay with their credit cards through a personal dashboard.

Features

  • Stripe integration for credit card payments

  • Customer, Manager and Admin dashboards

  • Create your customer accounts

  • Email notifications

  • Responsive design

  • Dynamic database structure

Data Structure

Data structure contains database related information about data types, fields and dependencies.

Data type

Field

Type

List?

Notes

Gender

Name

text

No

It stores the gender types, which is used in the radiochecker on sign up.

Invoice

Amount

Number

No

The invoice price

Description

Text

Invoice description

Document

File

PDF attachment

Issued to

User

The user who should pay the invoice

New Invoice

Boolean

Is used to mark that a new invoice is issued to you.

New Transaction

Boolean

Is used to mark that a new transaction is made by you.

Payment date

Date

Inserts the date when the invoice was paid.

Status

Text

Show the invoice status: Paid/Pending

Menu

Image

Image

No

Default icon for menu

Image_colored

Image

Colored icon for menu when hovered/selected

Name

Text

Menu title

Order

Number

It is used to organize the order of menus

Show

Boolean

It is used to limit the display of some menus depending on user type.

Privacy & Terms

Privacy

Text

No

Here is stored the Privacy Policy content.

Terms

Text

Here is stored the Terms and Conditions content.

Request

Body

Text

No

It stores the request main content.

Subject

Text

It stores the request subject.

Viewed

Boolean

It stores the request state: viewed by admin or not.

User

Accessrights

Text

No

It determines the type of user

Created By

User

It stores the user who created a new costumer.

Default card

Number

It stores the index number of the CC repeating group

First Name

Text

Personal user first name

Gender

Gender

User Gender

Last Name

Text

Personal user last name

Last Seen

Date

Is used to determine the invoices which the user has already seen and which are new ones.

Location

Geogr. Addr.

Personal user location

Profile Photo

Image

Personal user profile photo

Requests

List of Requests

Yes

Time Chart OS

Display

text

No

It is an option set which stores periods for chart filtering.

Pages Description

Page Title

States

Element

Notes

index

This is the first page of the template. The login and signup forms are here. You can login by filling your personal info or with demo login for customer or admin.

loginsignup

index

It lets to switch between Login and SignUp forms.

invoice

This is the page where you can see your invoice PDF document and this is the page where the client can pay his invoice.

This page can be accessed from the dashboard -> invoices -> file or from the link received on email when the invoice is created or the reminder is sent.

terms

The page with the company terms and conditions which the users should take in considerations in order to use your service.

This page can be accessed from the link in the footer.

Only admin can edit the content.

Edit

terms

It lets to switch between edit mode and saved mode.

404

When a page with your domain doesn’t exist, this page will appear.

dashboard

On this page are the main functionalities of the template.

As there are 3 types of users: customer, manager and admin, there are 3 different dashboards which are described below:

Customer dashboard

- Home – customer is able to see the graph with visual statistics by year/ month/ week for expanses which he spent for invoices and on the right recent transactions to other parties.

- Invoices – customer is able to see invoices issued to him, and they can be filtered by type: All, Paid, Pending, Received (just for customer) and by time: all, year, month, week. By clicking on Description/File it will redirect you to the Invoice page. Being a customer, a new invoice type will appear: Received, these are invoices issued to current user, here it is possible to pay the invoice without going on the Invoice page, just clicking on Unpaid status.

- Settings – here user can change his personal data, password, and add/delete cards. Also, by clicking on any card you can set it by default card, it means every time user will pay, it won’t require his card details. The default card can be changed anytime.

Manager dashboard

- Home – manager is able to see the graph with visual statistics by year/ month/ week for expanses which he spent for invoices and on the right are the most recent paid invoices.

- Invoices – in this tab manager is able to see paid, sent, pending, all invoices, is able to add new invoice for payment to a customer, when new invoice is created a mail is sent to customer. By clicking on edit invoice you can send a reminder to the client about his unpaid invoice.

By clicking on the name, it will appear invoices issued just to that person. Also, you can search a client in the search input.

By clicking on Description/File it will redirect you to the Invoice page.

- Settings – in this tab manager will be able to manage his account details profile and privacy without payments.

- My customers – in this tab manager sees the list of customers, and can add new customers, when adding new customer an email is sent to notify about it.

- Send request – in this tab manager can send message to platform so the admin could see it in his admin panel and reply to it.

Admin dashboard

- Home – manager is able to see the graph with visual statistics by year/ month/ week for expanses which he spent for invoices and on the right are the most recent paid invoices.

- Invoices – in this tab admin is able to see paid, sent, pending, all invoices, is able to add new invoice for payment to a customer, when new invoice is created a mail is sent to customer.

By clicking on the name, it will appear invoices issued just to that person. Also, you can search a client in the search input.

By clicking on Description/File it will redirect you to the Invoice page.

Invoices – the list of all invoices (for admin) and the list of invoices created by current user and issued to current user (for customer). They can be filtered by type:

All, Paid, Pending, Received (just for customer) and by time: all, year, month, week.

Also, here you can add a new invoice, edit or delete them.

Settings – in this tab manager will be able to manage his account details profile and privacy without payments.

Customers – the list of all users from the app divided by types: All, Customers, Managers. Here you can create a new user.

Requests – admin will see a list of message from manager user who sent the request. From this tab he'll also be able to sent back an email to user who wrote the message request.

invoice_filter

Dashboard

It filters invoices by type (Paid, Pending, Received)

invoice_time

Dashboard

It filters invoices by time (this week, this month, this year)

invoice_time_title

Dashboard

It is used for visual representation of the period you chose to filter invoices.

menu

Dashboard

It shows the group which have the same name as this state.

settings_menu

Dashboard

It switches between 3 tabs from the settings

time

Dashboard

It switches between period tabs from analytics diagram

users_filter

Dashboard

This is used just for admins. It filters user by their types (customer/admin)

customer

Popup Add New Invoice

Is used to determine the user it should make the changes.

open

FG menu RG

It is used to hide the desktop menu on mobile.

searchedUser

Group Search Options

It is used for searching all invoices of the selected user, on desktop

searchedUserMob

Group Search Options Mob

It is used for searching all invoices of the selected user, on mobile.

privacy

The page with the company privacy rules which the users should take in considerations in order to use your service.

This page can be accessed from the link in the footer.

Only admin can edit the content.

Edit

privacy

It lets to switch between edit mode and saved mode.

reset_pw

It allows you to reset the password, but only through the link received on email.

Reusable Elements Description

Reusable Element

States

Type

Notes

Header

-

-

-

Footer

-

-

-

Things to Note

Payments

This template uses Stripe Payment plugin To setup your stripe account, go to stripe.com, 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 settings tab of the plugin. See general documentation on how to set Stripe Payments in Bubble App

Template Security

For security purposes the template has limited rights for demo users. What that means is that you will not be able to use the admin features at full until this template is purchased and enable the functionalities.

Below you could see the popup which appears for locked features:

In order to remove the locking, simply delete this popup from dashboard page.

Demo to preview the template