Customizing Email Components

Notify’s flexible editor allows you to customize the look and feel of each component in your email templates, making it easy to design unique and personalized emails. In this guide, we’ll cover how to customize common components such as text, images, buttons, and dynamic data placeholders.

1. Adding and Customizing Components

Notify’s editor supports a range of components that you can add to your email templates:

  • Text: For paragraphs, headings, or other written content.
  • Button: For call-to-action elements like "Sign Up" or "Learn More."
  • Image: For adding logos, banners, or other visuals.
  • Divider: For adding visual separation between sections.

Steps to Add Components

  1. Navigate to the Templates Page: From the Notify dashboard, go to the Templates section and open a template or create a new one.
  2. Add a Component: Use the Add Block option to select and add a component to your template.
  3. Customize the Content and Styling: Select each component to open its settings, where you can modify text, styling, and placeholders.

2. Customizing Text Components

To customize text elements:

  1. Add Text Block: Select the Text component from the block options.

  2. Content: Enter the text you want to display in this section.

  3. Styling with Tailwind CSS: Apply classes directly in the editor to style your text, including font size, weight, color, and alignment.

    Example classes:

    • Font size: text-lg for larger text
    • Color: text-blue-500 for blue text
    • Alignment: text-center for centered text

Example: To create a centered, bold heading, apply text-2xl font-bold text-center.

Dynamic Text Content

To personalize text, insert placeholders (e.g., {name}) for values that will be replaced at send time. For example:

Hello, {name}! Welcome to our service.

3. Customizing Button Components

Button components allow you to add calls-to-action (CTAs) to your emails.

  1. Add Button Block: Select the Button component and place it in the desired location.

  2. Button Text: Enter the CTA text (e.g., "Learn More" or "Get Started").

  3. Link: Add the URL the button should link to, which can be a website or app page.

  4. Styling with Tailwind CSS: Use Tailwind classes to adjust the button's appearance.

    Example styling options:

    • Background color: bg-blue-500 for blue background
    • Text color: text-white for white text
    • Padding: px-4 py-2 for padding

Example: A rounded blue button with white text could use the following classes: bg-blue-500 text-white py-2 px-4 rounded.

Example Button with Dynamic URL

If you want to personalize the URL, you can use a placeholder in the URL field, such as {user_link}.

<a href="{user_link}" class="bg-blue-500 text-white py-2 px-4 rounded">Start Now</a>

4. Customizing Image Components

Images can be used to add branding or decorative elements to your emails.

  1. Add Image Block: Select the Image component from the block options.

  2. Upload or Link Image: Upload an image or link to an image URL (such as a hosted logo or banner).

  3. Styling: Adjust image width, alignment, and borders using Tailwind classes.

    Example styling options:

    • Width: w-full for full-width images
    • Rounded corners: rounded-lg for slightly rounded corners

Example: To create a full-width image with rounded corners, apply w-full rounded-lg.

5. Customizing Divider Components

Dividers help organize content visually, making emails easier to read.

  1. Add Divider Block: Select the Divider component to place a horizontal line between sections.

  2. Styling: Use Tailwind CSS to adjust divider properties like color, thickness, and spacing.

    Example styling options:

    • Color: border-gray-300 for a light gray divider
    • Thickness: border-t-2 for a thicker divider

Example: A light gray, medium-thickness divider can be styled with border-gray-300 border-t-2.

6. Using Dynamic Data Placeholders

Notify supports dynamic placeholders in templates for personalizing emails with user-specific data. Use placeholders like {name}, {company}, or {custom_message} in any text or button components.

Adding Placeholders

  1. Insert placeholders directly into text or button components (e.g., Hi, {name}!).

  2. When sending the email programmatically, supply data for each placeholder.

    Example:

    • Template content: Welcome, {name} to {company}!

Data passed in API request:

{
  "name": "Alice",
  "company": "TechCorp"
}

Note: Placeholder names in the template must match the keys in the API data object to ensure they are replaced correctly.

7. Previewing Your Customized Template

After customizing components, use the Preview feature to view your template with sample data:

  1. Go to Preview in the template editor.
  2. Input sample data for placeholders to verify they display correctly.
  3. Confirm styling and layout appear as expected across devices.

This step ensures your design and placeholders render as intended before you send the template to recipients.