Create a Beautiful Invoice Template for Support Effortlessly

Beautiful invoice template for Support

hello everybody in this video I'm going to show you how you can create this type of invoices for your business we have prepared this template for you yeah and we'll share the the template code in the description so it's completely free you can download it and use it for your business once also I'm going to show you how you can customize how you can customize the colors the the logo and other stuff in the HTML code and also I'll show you how you can convert this HTML to perfect looking PDF like you see in in my example yep so okay let's get started first of all when you'll download the source code you will find the folder with multiple files so first of all we have index.html so this is the main file that contains all the all the source code and also Styles style style.css is included so here's the main style file where you can customize colors the fonts and other stuff also we do include some extra files one is the template file to use inside the tower tool called template so this will allow you to automatically generate PDFs on fly with Dynamic data we also do have like a schema for Json and also Json example that must be included when you want to generate Dynamic invoices okay so let's begin first of all this template was created using Tailwind framework so if you are familiar with Tailwind you can use the syntax of the of that framework to customize the actual design of the of this document so yeah a few things that you need to change first of all we use main color in the config so you can can use any color you want that represents your brand and another thing that we are including here is core plugins so we do use this to generate colors to hex format so because when we want to print it to PDF or save it as a PDF we do need like old school hex color syntax in our CSS file and another thing so we add a few uh few parameters to our CSS one is page with margin zero and another one is Media print so and in case you are not familiar with Tailwind so what you can do is just open the style file and let me show you how you can customize this template so for example on the right side you can see the preview of our template so for example we want to customize the main color so you need to go to the Styles style CSS file and find for the keyword Dash main so we have like three classes that has contains this main color so let's say we want to have something like pink one okay like this and also we need to find text name so we have like text name so this one is for this one will change all the text uh text main text color we have border main so this wall this one will change the Border color and we have BG man so this will change the background color so yeah after we save so we can see that our preview has changed to the colors we are using in in our CSS okay so yeah and another one another thing that we can do is like you can change the logo here so let me use for example this one yeah so I've changed the logo and uh yeah as you can see it is H 12 class so I can go and find this and for example I can do this smaller size so for better looking and now you can see our template with customized colors and and Logo so so now we can simply click control or command P to print the document and we can so we need to select like save as PDF destination yeah so and we can simply click save and this PDF will be this document will be saved as PDF so but in this case we must manually change all the data we need so for example if we need to change the date so we need to go and type something like we need to change the date we need to change the invoice number manually we also need to adjust the product rows so here is like here is the row of the product as you can see this is the number this is the name of the product this is the price quantity the itinerary this is the subtotal this is subtotal with d80 and finally we need to customize the net total VT total and like the total amount of of the invoice and like yeah we can do this manually if we want yeah but we want to have like more automated uh uh solution for that so let me show you how you can do that using the few extra tools so to automate our process we'll use template so this is the tool that allows us dynamically generate files on the fly like in this example we can like do some adjustments and the our template will be dynamically changed with the new value so instead of changing like looking for places in your HTML and editing all that stuff we we can simply like change few places in our Json okay so let's log in so yeah in my dashboard I'm going to add new template I'll select PDF and we'll select custom HTML click continue and now we can give it a name so I'll give mine tutorial invoice and here is our HTML body so as I mentioned previously we we are including the template document so the the most important part that we have to use Styles inside the this documents so we can't uh link the to the style file because we only can include the the HTML document so that we can simply copy the style of the of this document and paste it here but the main part is that we can take a look at the for example here instead actual date we are using the syntax so this syntax will automatically replace the value included in the Json file yeah so and the same is for uh the same is applied for the information so the customer we want to charge so we want to issue the invoice for so all this data dynamically is changing and applied to this document and the same goes the the first part is that uh all the totals will be calculated uh depending on the products included in the invoice and uh the products will be also generated so automatically to the table so the products will be included in the table depending on the on our Json file yeah so okay for let's copy copy the the content of this file go to our dashboard simply paste it here and let's click save new template so okay after we save the template uh we'll use the tool called insomnia so this is the tool that allows us to make API requests so yeah you can find this it's a free tool you can use it's called insomnia so what we're going to do we'll make an API request to the template to generate our invoice template so for first we need to take the ID of the template so we've created earlier so this is the idea of our template simply change it to our URL and another thing we need to include our here so in the menu click s and if you don't have any you can generate one I'll use existing one so simply paste it here and yeah so we can try it out so yeah so as you can see it it renders the uh uh the PDF invoice but without any data because we haven't included in our body now if we'll go back to our source code we have the Json body example here this is how our data should look like so simply copy this uh this Json string here inside the body select Json and simply paste the data and now again we can give it a try we are sending the invoice and as you can see it automatically generates the the date the invoice number the customer details and like the products the product price quantity VT and net total VT total and and the total of the invoice and the cool part is that we can add few rows like we can add additional uh for example test services with the price 300 and if we click Send it automatically applies like adds neuro add a new road and recalculate the net net total and uh total of the invoice and yeah so same goes to the customer data for example if the if we have only the one address line and customer does not have any lead number and I know we don't we don't have any data about postcode so we can send the that that number of data we have about customer and it automatically will be applied here yeah so this is the same as printing in in the printing argument in the browser we can simply download it and place it wherever whatever we want and send it to the customer so this approach is much much easier than editing an HTML file of course if you're a developer and you are familiar with uh an API so you can create an integration uh in your system that will automatically make those API requests and generate the invoices for you yep so basically that's it for this video uh all the all the source code and then files will be links to the files will be included in the description so feel free to download it and use it for your users whenever you want and you have if you have any questions feel free to add your comment below this video and yeah also if you like what we are doing click the like button and thank you for watching see you in other videos bye