---
url: "/emailify/integrations/customer-io.md"
description: "Emailify includes a direct Customer.io API upload option for Design Studio templates, plus a ZIP export option for manually copying HTML into Customer.io."
---

# Uploading your emails to Customer.io

> Emailify includes a direct Customer.io API upload option for Design Studio templates, plus a ZIP export option for manually copying HTML into Customer.io.

### Video Tutorial: Uploading your emails to Customer.io

This video tutorial is a complete step-by-step guide showing you how to manually upload HTML emails from the Figma Emailify plugin to Customer.io.
[Embedded media](https://www.youtube.com/embed/KQyaQy6gYps)

Emailify includes two Customer.io export options:

- **Customer.io (API)** uploads your emails directly to Customer.io Design Studio as reusable email templates.
- **Customer.io (Zip)** exports a ZIP file that you can manually copy into Customer.io.

## Uploading directly to Customer.io Design Studio

In the Emailify export panel, select the **Customer.io (API)** option from the dropdown list, then paste in a valid Customer.io [App API Key](https://docs.customer.io/integrations/api/app/) and choose the matching Customer.io region for your workspace.

> **Note:** If your Customer.io workspace is hosted in the EU, choose the **EU** region in Emailify. Otherwise, keep the default **US** region selected.

When you're ready, click the **Upload To Customer.io** button to start exporting the emails you've selected from Figma to HTML, and have them automatically uploaded to Customer.io Design Studio as reusable email templates.

> **Note:** You’ll need a Customer.io App API key that can create Design Studio emails in your Customer.io workspace.

## Updating Customer.io templates uploaded from Emailify

If you'd like to have your Customer.io templates automatically _update_ instead of being created as new templates each time, you can optionally enable the **Enable Updatable Templates** toggle in the plugin's export settings (when the _Customer.io (API)_ option is selected).

This will automatically append a `customerioTemplateId` value to the Figma frame's layer name that was uploaded, and then re-use that ID when the same frame is re-uploaded to Customer.io via the API upon the next export from the plugin.

> **Tip:** Please note, you will need to **ensure the _Enable Updatable Templates_ toggle is also enabled _prior_ to uploading your initial template**, as this will append the _Customer.io Template ID_ of the original template that's uploaded to Customer.io into your Figma frame name; this ID will then be used for any future re-uploads to update that same template in your Customer.io account (instead of creating a new one each time), provided that the _Enable Updatable Templates_ toggle remains enabled, too.

> **Note:** To _update_ emails in Customer.io, you’ll need to use an App API key for the same Customer.io workspace and region that originally received the template.

## Manually uploading a ZIP export to Customer.io

In the Emailify export panel, select the **Customer.io (Zip)** option from the dropdown list, then when you're ready, click the **Export For Customer.io** button to start exporting the emails you've selected from Figma to HTML.

Once the export is finished, download the .zip file to your computer and unzip it, then open the `index.html` file inside the folder with your email name in a code/text editor and copy all the HTML in the file, then:

- [Login](https://fly.customer.io/login) to your Customer.io account
- Expand the **Content** menu item in the admin navigation
- Then click the **Email Layouts** menu item
- Click the **Create Layout** button
- Click the **Start from scratch** option
- Name your layout and click **Create Layout**.
- Paste your copied HTML from the exported index.html file into the **Edit** tab editor.
- Click the **Save changes** button.

## Creating a totally blank layout in Customer.io

> **Warning:** **Make sure you're using a totally blank layout!** By default, Customer.io will automatically add its own extra HTML tags (eg. head, body, etc) to any new layout created; you'll need to ensure that this code is removed, otherwise your HTML template will look broken when it's sent out.

In Customer.io, when you start creating an email, you'll need to select a [Layout](https://customer.io/docs/journeys/3-layouts-and-customerio/), and this needs to be totally blank, so that your own custom HTML template is the only thing that gets rendered.

![Image](/assets/images/emailify/customer-io-one.jpg)

As you can see in the screenshot below, selecting a **Layout** that looks blank, isn't actually blank (as it has those `` tags automatically included and wrapping around your HTML template content)

![Image](/assets/images/emailify/customer-io-two.jpg)

To fix this, you'll need to manually remove any HTML that Customer.io adds to your blank Layout, and only leave the `content` tag (below).

![Image](/assets/images/emailify/customer-io-three.jpg)

After the **Layout** has been saved and only contains the `content` tag, your custom HTML template should render as expected.