🫧 Bubble Guide (Email + PDF)

Creating an Invoice Email Template with PDF Attachment in Bubble 📃

Hello there, Bubble users! In this step-by-step tutorial, we'll guide you through the process of creating an invoice email template with a PDF attachment using Emailflow, and integrating it into your Bubble app. Ready? Let's dive right in!

Prerequisites

• A newly created project in Emailflow

• An app in Bubble

Step 1: Creating Your Invoice Email Template in Emailflow

Create a New Project

1. Log into Emailflow: Navigate to Emailflow and log in.

2. Create a New Project: Create a new project to store your email templates.

Upload and Test Email Template

1. Navigate to 'Email Templates': Find this section on your Emailflow dashboard.

2. Create a New Template: Click to create and give it a meaningful name like Invoice Email.

3. Upload HTML File: Use Beefree or a similar HTML editor to create your template, and then upload the HTML.

Example HTML:

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

1. Test Your Email: You'll be prompted to test your email, letting you preview the rendering and see a list of parameters.

2. Add Subject and PDF: During the test, you can set the subject line and add a PDF attachment.

3. Save the Template: Click Save when satisfied.

Note: Remember the templateId for future reference.

Configure Email Settings

1. Navigate to 'Email Settings': It's right under Email Templates.

2. Set 'From Name': Specify the name that will appear in the FROM_NAME <[e-mail]> part.

3. Set 'ReplyTo': Set an email address where you want to receive replies.

Step 2: Creating Your PDF Invoice Template in Emailflow

1. Navigate to 'PDF Templates': It's alongside the Email Templates tab.

2. Create New Template: Click to create.

3. Upload HTML File: Create your PDF template with placeholders for a list of items and the total price.

Example HTML:

Copy code<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: Click Save.

Note: Keep note of this templateId.

Step 3: Integrate with Bubble

Configure API

1. Open the API Connector: Go to the Plugins tab in Bubble, and you should see the API Connector plugin. Click on it.

2. Initialize a New API Call: Name this API call something like SendInvoiceEmail.

3. API URL: Paste https://api.emailflow.so/v1/email into the API URL field.

4. Method: Select POST as your method.

5. Headers: Add the following header to authenticate your API call:

   • Key: Authorization

   • Value: Bearer sk-ef-{your-uuid}

6. Body: Here's how to set up the body for JSON:

   {
     "templateId": "{your-email-templateId}",
     "to": "[Insert the email you're sending to]",
     "params": {
         "name": "[Insert Name]",
         "invoice_number": "[Insert Invoice Number]",
         "item_list": [
           {
             "item_name": "[First Item Name]",
             "item_price": "[First Item Price]"
           },
           {
             "item_name": "[Second Item Name]",
             "item_price": "[Second Item Price]"
           }
         ],
         "total_price": "[Insert Total Price]"
     }
   }

Set up Actions in Workflow

1. Navigate to Workflow: Open your app's workflow in Bubble.

2. Add Action: Add a new action where you want to send the email (for example, when a user clicks a 'Send Invoice' button).

3. Choose the API Call: Select the API call you just set up (SendInvoiceEmail).

4. Dynamically Insert Data: Now you can use Bubble's dynamic data to fill in the values for name, invoice_number, item_list, and total_price.

Testing

1. Run a Test: Before integrating fully, trigger the API call within Bubble to ensure that it works as expected. Check your Email Logs in Emailflow to see the status of the sent email.

Conclusion

And there you have it! You've successfully integrated Emailflow into your Bubble app for sending automated invoice emails with PDF attachments. Now, you can automate invoicing and focus on scaling your business. 🚀