💜 FlutterFlow Guide (Email + PDF)

Creating an Invoice Email Template with PDF Attachment in Flutterflow 📃

Hello and welcome to this step-by-step tutorial! Today, we'll teach you how to create an invoice email template with a PDF attachment in Emailflow and then bring it to life in your Flutterflow project. Strap in; this is going to be a fun and educational ride!

Prerequisites

• A newly created project in Emailflow

• A project in Flutterflow

Step 1: Creating Your Invoice Email Template in Emailflow

Create a New Project

1. Log into Emailflow: Head over to Emailflow and log in.

2. Create a New Project: Once logged in, create a new project to house your email templates.

Upload and Test Email Template

1. Go to 'Email Templates': Navigate to the Email Templates section in your dashboard.

2. Create a New Template: Click the Create New Template button.

3. Name Your Template: Name it something meaningful like Invoice Email.

4. Upload HTML File: Use an HTML editor like Beefree to craft your email, then upload the HTML file.

Example HTML:

Hello {name},
Your invoice #{invoice_number} is attached.

1. Test Your Email: After uploading, you'll be prompted to test your email. You'll see a rendering of your email on the left and a list of parameters on the right. This step is essential for adding the subject line.

2. Add Subject and PDF: During testing, you can also specify the subject line and add a PDF attachment if necessary.

3. Save the Template: Once satisfied, click Save.

Note: Remember your templateId, you'll need it later.

Configure Email Settings

Before sending any emails, you'll be prompted to configure your email settings:

1. Navigate to 'Email Settings': This tab is located right under Email Templates.

2. Set 'From Name': Set the name that will appear in the FROM_NAME <[email protected]> section of the email.

3. Set 'ReplyTo': Choose the email where you'd like to receive replies.

Step 2: Creating Your PDF Invoice Template in Emailflow

1. Navigate to 'PDF Templates': This is next to the Email Templates tab.

2. Create New Template: Click to create.

3. Upload HTML File: Craft your invoice template including placeholders for a list of items and the total price.

Example HTML:

<h1>Invoice #{invoice_number}</h1>
<p>Customer: {name}</p>
<ul>
  [[<li>{item_name}: {item_price}</li>]]
</ul>
<p>Total: {total_price}</p>

1. Save the Template: Don't forget to click Save.

Note: Keep track of this templateId as well.

Step 3: Integrate with Flutterflow

1. Open Flutterflow Project: Navigate to your project and click on API Calls on the left sidebar.

2. Import OpenAPI: Click on the Import OpenAPI button and select the YAML file you downloaded earlier from Emailflow.

3. Test the API: Before using it in actions, go to Response & Test and populate the fields to make sure everything works as expected.

Add to Actions

1. Add an action in Flutterflow where you want to send the invoice.

2. Choose API Call, then select the Emailflow API you've imported.

3. Populate the fields using the template parameters.

Step 4: Test Your Setup

Run a test in Flutterflow to confirm that both the email and PDF are generated and sent as expected.

Conclusion

Congratulations! You've now mastered the art of creating invoice email templates with PDF attachments in Emailflow and Flutterflow! Your invoicing is automated, leaving you more time to focus on your business. 🌟