Integrate external tools with Design Studio

Updated

If you design your emails in an external tool like Figma or Stripo, you can integrate them with Design Studio to reduce the number of manual steps you need to take to start sending your emails in Customer.io. You can programmatically manage emails, translations, and components through the Design Studio endpoints.

To upload or update assets like images and PDFs, you’ll use a different set of endpoints: the Assets endpoints.

Both the Assets and Design Studio endpoints are part of our App API and use the same bearer token for authentication.

How it works

Regardless of which external editor you use, the process for preparing and integrating your email with Customer.io follows the same pattern:

  1. Design your email in your preferred tool.
  2. Follow the best practices below for crafting your HTML.
  3. In Workspace settings, create an App API key for authentication and integration with Design Studio.
  4. Push the HTML to Customer.io via the Design Studio endpoints.
  5. Connect the email to a campaign, broadcast, or transactional message.

Limits to Design Studio APIs

Currently, the Design Studio endpoints only support content management. It’s not a content delivery platform yet, so you can’t publish emails directly. If you update a message in Design Studio from the API, make sure you go into your workspace and publish your changes before sending.

The Design Studio endpoints only manage design studio content. You can’t do the following:

  • Manage messages made in other editors, including email editors like the drag-and-drop editor
  • Manage global styles (color palettes, font families, button formatting, etc)
  • Connect an email to a campaign, broadcast, or transactional message
  • Publish changes from global styles, components or emails to your campaigns, broadcasts, or transactional messages
  • Send emails

You can send a Design Studio email programmatically through the App API, but only for broadcasts and transactional messages. You control how campaigns are triggered (and start sending) from within your workspace.

Use our standard component syntax if you want to edit in Design Studio’s UI

We recommend using our standard component syntax so you have full access to our visual editor. This way you can easily make changes to content, formatting, or styling after adding your email. Standard components use extended HTML, similar but not the same to standard HTML tags. For instance, you’d include <x-paragraph> instead of <p> in your email code.

Without our component syntax, you’ll only be able to edit some of the content and styling from the visual editor. You can edit semantic tags like <p> and <img> but need to take an extra step to modify non-semantic tags. Semantic means the name clearly defines the purpose of the element.

Non-semantic tags include <div> and <span>, and you can edit the text only if you add some code. To edit the content of non-semantic tags in the visual editor, wrap the text of these elements in <x-edit-text>. This is also needed to edit text within <table>. Unlike semantic tags, you won’t be able to add CSS styles or classes through the visual editor’s Properties menu.

HTML/CSS best practices

Format your HTML to account for these best practices:

  • Escape HTML strings: In request payloads, you’ll send stringified HTML, not raw HTML. Unescaped, raw HTML in a JSON body is the most common cause of 400 Bad Request errors, so this should help reduce failures:
    • All double quotes must be escaped as \"
    • Literal new lines must be replaced with \n (or the HTML must be on a single line).
    • Before sending, either run your HTML through a JSON string escaper tool, or use JSON.stringify() in a browser console: copy(JSON.stringify(yourHTMLString)) to get a properly escaped string ready to paste.
  • CSS inlining: Most email clients strip <style> blocks. Inline your CSS before import, or enable Design Studio’s CSS inlining transformer. You can set transformers directly in the API request when creating/updating the email, so you don’t need to do this as a separate step after import.
  • Root elements: <x-base> is the root element of Design Studio messages. It replaces <!doctype html>, <html>, <head> and <body> in standard HTML messages and is a container component you can style in the visual editor. For best results, we recommend using it in place of the typical html document structure. However, either will work. Just make sure you don’t include both the <x-base> component and <html>.

Dynamic content: liquid personalization and unsubscribe links

Liquid personalization: Replace placeholder text with Customer.io liquid tags like {{customer.first_name}} or {{trigger.order_id}} where you want personalized content. Learn more about personalizing messages with liquid.

Unsubscribe links: Add {% unsubscribe_url %} somewhere in your email. This is required for marketing emails under regulations like CAN-SPAM and GDPR. Customer.io uses this tag to generate an unsubscribe link unique to each recipient and automatically adds a List-Unsubscribe header to your email. Learn more about options for unsubscribe links.

For transactional messages, an unsubscribe link is recommended but not strictly required.

Host images publicly or upload them through the Assets API

All images must be at publicly accessible URLs. Design Studio does not support base64 inline images.

You can host images in a few ways:

  • Through your own Content Delivery Network (CDN)
  • Through your external editor’s built-in image host
  • By uploading files to Customer.io first through the UI or the Assets API and then copying the URL
Copied to clipboard!
  Contents