How do I build a proposal or quote generator?
In this episode, we'll learn how to build dynamic and professional proposals, quotes, or contracts to collect digital signatures using:
Features Discussed:
Transcript Summary
Introduction
The idea here is that we are creating projects, and we then want to create proposals for those projects. We want to do this dynamically, so by adding different pieces of the proposal, whether that's line items or project phases, we are adding all this data into our application for our own internal use. At the same time, we are building out all the data necessary to dynamically generate a nice, clean, beautiful digital proposal. This proposal can be sent to a client, and we can collect signatures on it using the signature field. Ultimately, you can always generate that proposal as a PDF and save it, print it, email it—whatever you want to do.
Tools and Features
To do this, we're going to be using the page builder. I realized that we haven't spent a lot of time inside the page builder doing a bunch of different things. Usually, when we end up in the page builder during these episodes, it's for a very specific reason, and we kind of glance over some of the other abilities or features within it. Today, we're going to take a look at some of those.
We'll be doing:
- PDF pages
- E-signatures using the signature field in our data table to collect signatures both internally and from the client.
I'll show you a little trick on how you can use that field in a cool way. Then, I'll show you the finished product, and we'll hop into the builder.
Finished Product Overview
Here’s the finished product. On the back end—what I refer to as the internal use of the application—we're actually building out a proposal. As mentioned in the intro, we're collecting information for the proposal, but the cool part is how we're going to display it.
On this page, we have different data sets that we're adding to this proposal as connected records. We have a button to view the proposal, which brings us to a page purpose-built to display this proposal as a digital document. There is no menu or layout—just all our data displayed cleanly. At the bottom, we have the ability to add signatures.
Building the Proposal System
Data Structure
Let’s go through the data structure thoroughly before moving on to the page builder. We have our users, which include both internal and external people. For example, I’m an internal person connected to my own company, and David Ross is a customer belonging to a different company. These companies are held in a table with just a single field, "company name." Users from those companies can add new projects. These projects have connections to the company and contact, along with fields defining the project: name, hourly rate, project description, status, priority, and more. This helps identify the project scope and generate a proposal more easily.
In this example, we’re focusing on application development. Once the project is created, we can create a proposal record. This proposal record includes the project name, connections to the project, company, and customer, along with fields for customer and internal organization signatures, an overview, and the proposal status.
We also have tables for predefined services, which are offered to every project and proposal. These services are pre-defined with a name, type, image, and cost. For more dynamic data, we have line items that connect to both a proposal and a predefined service, allowing us to define specific costs. We also have project phases, outlining what we’ll do in each phase, and tables listing all the pages and data tables we intend to build for the application.
Page Builder
We need to set up an administrator layout for internal organization members to create projects, view submitted projects, and create proposals. I’ve created this admin layout and secured it by user roles, so only admins can access the pages within it. We have pages for customers, companies, projects, services, and proposals. I’ll be working mainly from the project details and proposal details pages.
When a new project is submitted, we can process it and generate a proposal. From the project details page, we can add a new proposal connected to the project and then add all the items to the proposal.
Creating and Editing Proposals
Now, let’s log in as David Ross, the fake user, and submit a project. After submission, I can see the project details as an administrator. From here, I can create a proposal by copying the project name and entering some text for the overview. This creates the proposal record, and I can link it to the proposal details page.
In the proposal details page, we’ll add rows and columns to display the proposal content. This includes line items, project phases, data structures, and page structures. Each row has a form on one side and the content on the other. For each section, we’ll customize the display and remove unnecessary fields.
For example, in the line items section, we’ll only display the necessary fields and hide the proposal field, as we’re already on the details page. Similarly, we’ll add tables and forms for project phases, data structures, and page structures.
Displaying the Proposal
We’ll build a separate page layout for viewing proposals, which will be more polished. This layout will be dedicated solely to proposals, with no menu or layout—just a page container. We’ll secure the layout so that only admins can see all proposals, but the details page will be accessible to any logged-in user, allowing customers to view their proposals.
We’ll add components like images, text, and custom HTML to create a visually appealing proposal. The overview, data structure, page structure, and project phases will be displayed with dynamic content pulled from the proposal details. We’ll also include a calendar to show the project phases.
Adding Signatures
Finally, we’ll add a section for signatures. We’ll create a detail component to display the customer and internal organization signatures, along with the dates they were signed. To ensure only the relevant user can sign, we’ll hide the signature form for non-logged-in users and display a login prompt instead. Once logged in, the customer can sign the proposal, and the admin can sign their portion. We’ll also set up email notifications to alert both parties when the proposal is signed.
Conclusion
This proposal system allows you to dynamically generate proposals, collect signatures, and display the proposal in a clean, professional format. You can further customize and expand this system to fit your specific needs, whether it’s for app development, construction, events, or any other field.
As usual, if you have any questions or comments, I’d be happy to discuss them in our community. Until next week, I hope you enjoyed this video, and I’ll see you next time. Thanks, and take care.