How To Create a Custom Invoice Generator Using Process Street process.st/invoice-generator/
Ryan McLean June 18, 2016
Generating and sending invoices can be a time-consuming process. A properly designed invoice helps a business get paid and provides legal protection for both parties. Think about it, all the hours and energy you put into completing a project will have an invoice at the end of it. Invoices are the tool that provides freelancers with the ability to receive income. That’s why we over at Process Street sat down and thought up a way to make getting paid even easier; a template which serves as a custom invoice generator. Never again worry about charging your clients the wrong amount, or even sending them an invoice with an outdated logo or set of information. All you need to do is plug your information into this template and away you go!
Using The Invoice Checklist First things first; the invoice generator checklist. Below is a public version of the template itself – it’s short, easy-touse and effective. Go ahead and try it out, but as a warning, you won’t be able to generate your invoice until you’ve linked it up with WebMerge or your email (which we’ll get to in a second). Note that, if you do not have a Process Street account, you will need to sign-up to gain access. If you already have an account, why not grab a copy of this checklist to use at any time by clicking “Give me this checklist”? Once you’ve seen the checklist and tried storing your own data in it, let’s get into the good stuff; how to automatically generate an invoice with it.
1/19
Configuring Zapier to Automatically Generate Invoices What is Zapier? Zapier allows you to move info between your web apps automatically. A Zap is a blueprint for a task you want to do over and over. You will create a new ‘Zap‘ and this will consist of: ‘Trigger‘ – this will set your Zap into motion. In your case, it will be when checking off a task in our checklist. Once this has been done, it sets off the Zap, almost like a mousetrap. ‘Action‘ – this will be done by the Zap. For you, it will send an automatic email to your client with the info you filled out – leaving you to do more important work. It is free to create an account on Zapier and you can create up to 5 Zaps. If you’re looking for more Zaps and other features, their pricing plans start at $20/pm. Setting your account up is easy. On Zapier’s home screen, go to the top right and click on ‘Sign Up For Free‘. Then, fill in your information, verify your account via an email and then you’re good to go.
Make a New Zap You’re going to need to create a new Zap. Once you have signed up, you will see an orange button on the home page labelled ‘MAKE A ZAP !’. Click on that to begin our Zap making process.
Setup Process Street Trigger You will have a page that looks like below. You’re going to want to click on ‘ Process Street‘ (which you may need to search for) in order to set it as your trigger app. This is because you want to create the invoice from the invoice generator checklist.
2/19
Once you have selected Process Street as your app, you will choose your trigger. Your trigger will be ‘New Task Checked‘, meaning that when a task you choose is ticked as complete in PS, the invoice will be generated. Once this has been checked, this is what will set the action step off, producing your document.
Pick Your Account Once your trigger has been picked, it is time to connect your Process Street account. Follow the below steps to do so:
3/19
Click on ‘Connect a New Account ‘ – a pop-up window will appear looking like below:
Click on the hyperlink ‘Settings & API tab of the organization manager‘ – this will take you to your organization in Process Street, where you can generate an API key. Do so, then enter it into the box above and click ‘Yes, continue‘. You will then be redirected to the screen below, click ‘Test‘ to ensure it has worked. If successful, hit the ‘ Save + Continue’ button.
4/19
Setup Options Once your account has been connected it is time to set up your options. These are what allow you to specify what template and task the invoice will trigger from. To do this select ‘Creating an Invoice‘ in the ‘Template‘ section. You will then select ‘Generate the Invoice‘ in ‘Task‘ and it should look like the following. Click ‘Continue‘ when you have the above done and this is where it will tell you if it is successful or not.
Choose Your Invoice Generator Method Once you have set up your Process Street trigger it is time to pick your invoice generator method; using WebMerge or your email. Generating invoices in WebMerge is easy for people who don’t have coding knowledge. The account is easy to set up, but if you choose a free account your invoice will have a ‘Sample’ watermark on it (Click here to see what I mean). If you’re going to use this professionally, pay for the pro plan. The end product is great, it provides a simple template that you can send to your clients. All input fields are customizable which makes for an easy experience. The downsides to a free account are that you get 5 merges in total unless you upgrade your account, with pricing starting at $29 per/month. Plus the annoying ‘Sample’ watermark all over your merges. On the other hand, using email is a free method that is great for people with some prior knowledge of coding. If you’re not using WebMerge as your invoice generator, then skip ahead to the Email section.
Option 1: Configuring WebMerge to Create Invoices If you’re unfamiliar with WebMerge, I will explain it in a sentence. WebMerge is an online platform that allows you to collect data, populate a document and send it to any contact automatically. In our case, it can take the information from out invoice checklist and use it to populate an invoice document.
5/19
To use WebMerge, you will need to create an account. Follow the steps below to do this. On the front page, click on ‘Try it Free ’ on the top right of the page. On the next page, enter your details, then click ‘Create My Account’. Once done you will receive a verification email; you must click this in to access platforms features.
Create an Invoice in WebMerge Once you have signed up, you will see the following page:
Read through the tutorial so you understand what WebMerge does. You will then do the following. Click ‘Next‘ on the ‘Create your document’ step The click ‘Next‘ on the ‘Setup your delivery’ step Lastly, click ‘Let’s Get Started‘ on the final step and you’re ready to create a document You will then receive a prompt asking what to call your file. Name it ‘ Invoice‘ and click ‘Next‘ Then you will select ‘Build your own‘
Inputting Your Template
6/19
Once you have chosen the Document Builder tab like the screenshot above, click on ‘Switch to Advanced Mode ’. You will use one of the below templates. They are similar, but with my code, not much editing needs to be done. If you want your own custom template, use the WebMerge example. Using the templates will give you a simple invoice document layout. If you choose my code, copy it within the ‘ Switch to Advanced Mode ’ area. Then click ‘Switch to Editor Mode’ this will be where ‘Switch to Advanced Mode ’ was. My HTML code that I used in this template: Click here to download the template If you choose the WebMerge example, you have to click ‘start with this template’, ‘add template to my account’ and then you’re good to go. WebMerge’s example template: Click here to go to the template Your document should look something like the following:
7/19
Next, click the following: ‘Settings’ > ‘Output’ > ‘PDF’ (this is the type of file the document will be) You can change the timezone, filename, and any other fields if you wish, this will not affect anything. Click on the ‘Test’ tab Then enter your information that you used in the Process Street Checklist You will receive a PDF download in your browser Click on it and your test document should look something similar to the following
8/19
That is what your invoice will look like when sent to your client.
Choosing Your Delivery Method It’s time to choose your delivery method. This will be how our document is received, for this, we will use the email method. To do this please follow the steps below: 1. Click the ‘Deliver’ tab 2. Click ‘New Delivery’ on the right 3. Choose ‘Email’ 4. The ‘Send Email To’ must be > Merge Field > Email 5. Type ‘Invoice’ in the ‘Subject’ field, and fill in the ‘Message’ field with whatever you wish, but you can use what’s in the screenshot below.
9/19
Setting up WebMerge as Your Action Step It is time to select your first action step in Zapier. This is the final piece of the puzzle. Once the Zap has been triggered, it will then go to the action step to send the information from your Process Street Checklist to your client. Choose ‘WebMerge‘ as your action step like the following.
Choosing Your Action 10/19
You have to choose your action. This is what will happen with your information when the trigger has been set off. You’re going to pick ‘Create Document Merge‘ like the screenshot below. This will create a new document with your Process Street Checklist information that gets sent off to your client. Click ‘Save+Continue‘ to go to the next step.
Link Your WebMerge Account Imitating what you had to do with the Process Street trigger, you’re going to need to connect your account, enabling Zapier access to WebMerge’s API. You will need to get an API key but with WebMerge, you will need to add in a ‘Secret’ key. Follow the steps below: Click on the blue hyperlink It will take you to your WebMerge account You will be directed to the ‘API Access‘ page Next, click on the ‘New API Key ‘ button, Then you’ll be asked to name it. Call it ‘Zapier‘ Click ‘Create Key‘ Then insert the API keys into the pop-up you received earlier, like below:
11/19
Click the ‘Yes, Continue‘ button and the ‘Choose Account‘ page should look like the following. Click ‘Test‘ to make sure your WebMerge account has successfully connected to your Zapier account. It should look like the following:
Click ‘Save+Continue‘ and you can carry on through to the next step.
Setting up Your WebMerge Template 12/19
It is time to link up your WebMerge template, which is the invoice you created earlier. This will allow your invoice generator checklist information to go into the chosen template. In the ‘Document‘ tab > Choose ‘Invoice‘ (this is what you named your WebMerge file) Once you’ve done that, you will populate the rest of the fields by using the button to the right of each field and choosing your Process Street checklist’s form fields. Scroll down to the bottom of the page and click the ‘Continue‘ button where you can test your WebMerge file.
Name Your Zap Once your WebMerge action is complete, you can name your Zap, I recommend calling it ‘Invoice‘ and you will know what it is for. Click the ‘Off‘ button, it will then turn to green and your Zap is currently active. Boom, congrats! You made your first Zap!
13/19
Option 2: Send Invoices as an HTML Email If you don’t want to pay and you can follow basic instructions, then using email as your invoice generator could be better for you. Plus it is free. There are other ways to send emails via Zapier, you can use apps such as Gmail and Mandrill. The configuration for both of these are similar but you’re choosing a different app. If you’re not using WebMerge, you still need to have the Process Street Trigger set up that was laid out earlier before continuing to set up email as your action. Once the Process Street Trigger has been set up, It is time to select your action app. This is the method that will be used to send your invoice automatically to your client. Select ‘Email‘
14/19
Choose Your Action Once you have chosen your action app, it is time to select your action step and this is how your invoice will be sent. Click on ‘Send Outbound Email‘ like below and then press ‘Continue‘.
Setup Template Once your action step has been selected, it is time to set up your action template. This is how your information will be collected. Using the boxes to the right as circled below, you will select the form fields from your Process Street Checklist to fill
15/19
in the required information boxes. The ‘To‘ box has the Client’s email address form field selected, this is who the invoice will be sent to. In the ‘Subject‘ box, type in ‘Invoice‘ as this will be the subject of the email your client will receive. Inside the ‘Body (HTML or Plain)’ box, paste the following code: Click here to get HTML code
To fill in the Process Street Checklist information, you need to click on the red text boxes like below. For example ‘6935643 Amount‘ once you click that you will select the corresponding Process Street Checklist form field which is ‘Total Amount Of The Invoice ‘ Do this for the rest of the remaining red text boxes Once done, click ‘Continue‘
16/19
Test Your Action Step Finally, you have to test your action step. Read what your template contains and then click ‘Create & Continue‘
Email Invoice End Result Congratulations, you created an invoice template! I hope this helps you save time when creating invoices. Enabling you to focus on more important tasks that need completing. Once you have followed the above steps you will get an end result that should look like the following:
17/19
Download our FREE 111 Page Ebook on Workflow Automation Ever wished you could automate the stuff you hate doing at work? Then you need to check out The Ultimate Guide To Business Process Automation with Zapier! We’ve created the perfect resource to get you saving time and money by automating your business’ processes. From basic tasks such as saving Gmail attachments into Dropbox to shipping your Salesforce leads into Mailchimp, the Ultimate Guide will guide you through setting up the perfect Zaps to automatically handle the tasks that clog up your schedule. Plus, with Zapier’s 500+ integrated apps, chances are that your favorite programs are just waiting to be linked! Better yet, it’s completely free!
18/19
19/19