5

How to create & edit a component

In Design Studio, you can create custom blocks, like headers and footers, to reuse across emails to save you time, ensure brand consistency, and reduce errors.

Overview

You can create a custom component to reuse across emails in a few ways:

• Create and save a component from the visual editor
• Prompt our GPT to generate your component
• Create one from scratch using our templating language

Save a component from the visual editor

Create and save custom components from the visual editor to reuse in subsequent emails. This way you can create things like headers and footers once, without having to write HTML/CSS!

1. In the visual editor, build a block on the canvas. You can use any standard component (heading, image, button, etc.), existing custom component, or HTML block to build a custom component.
2. Select the outer most component of the block you want to save.
3. Click to save it as a custom component file.
4. Choose an icon and name you’ll use to locate the component in your files and the visual editor.
5. Specify which section (if any) the component should show under in the Insert menu of the visual editor.
6. Click Continue to finish. You can find your new component in Files on your dashboard.

Drag it into your Design Studio emails from the Insert menu.

Prompt our Design Studio GPT to create your code

We’ve created a GPT that can code your component for you!

The Design Studio GPT is best for:

• Creating a Design Studio-compatible component from raw HTML
• Creating a component from scratch using natural language
• Configuring guardrails for a component (like defining properties that people can edit in the visual editor or placeholders for content)
• Troubleshooting issues with a component

ChatGPT can make mistakes. Results are not guaranteed to work as expected in the Design Studio. Please reach out to win@customer.io with any questions.

Create a custom component with your own code

If building a component from the visual editor or by using our GPT doesn’t meet your needs, you can also create a component from scratch using our templating language.

1. In your Design Studio dashboard, click Create then New Component to get started.
2. Give the file a name that will help your teammates find it in the visual editor’s Insert menu.
3. Code your component.
   1. Adjust <script> to include the variables and properties needed.
   2. Adjust <template> to include the content needed.

Then your teammates can drag the component into a message or you can use it as content in other components. If your teammates should not be able to access this component from the visual editor, you can hide it.

Edit a component

You can edit a component in a few different ways:

• Edit the source component file so changes apply to all messages
• Detach a component from the source so changes only impact a single message

Learn more about deleting components.

Edit the source file

You can edit the source file of a component from Files or by clicking your component from the visual editor and choosing Edit source.

Changes you make to the source file automatically apply to messages the component is referenced in, but not workflows. If your message is connected to a campaign, newsletter, or other workflow, you must publish your changes for them to take effect.

Edit the component in your email

From the visual editor or a Design Studio message, you can choose to detach the component from its source file. This lets you use the component like a template—bringing in the source material then modifying as you see fit for the specific email.

1. Select the component in your email.
2. Click Detach component.
3. Modify your component.

The component expands into its individual blocks, which you can modify within the email. These changes only apply to the email and have no impact on the source file. Any changes to the original source file will also not apply to this component moving forward.