Skip to content
Marketing

Code Element in Email Builder

The Code Element allows you to insert custom HTML or CSS snippets into your email templates, giving you full creative control beyond standard design…

2 min read532 words4 explained images
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. What is the Code Element in Email Builder?
  2. Key Benefits of the Code Element
  3. How To Setup the Code Element
  4. Frequently Asked Questions

The Code Element allows you to insert custom HTML or CSS snippets into your email templates, giving you full creative control beyond standard design options. It’s ideal for embedding widgets, tracking pixels, or adding advanced styling that enhances the functionality and appearance of your emails.

TABLE OF CONTENTS

What is the Code Element in Email Builder?

The Code Element is a drag-and-drop block that enables you to add custom HTML or CSS directly into your email layout. It’s designed for advanced users who want to include specialised content such as embedded countdown timers, tracking tags, or layout modifications that aren’t possible through the standard visual editor.

When used correctly, it allows deeper customisation and helps you integrate third-party tools seamlessly within your email design.

Note: Email clients have limited support for custom code. Always test your email before sending to ensure that all embedded content displays correctly across platforms.

Key Benefits of the Code Element

Using the Code Element in your email design offers several advantages:

  • Add custom HTML or CSS for unique layouts and designs.

  • Embed third-party widgets such as timers, forms, or badges.

  • Insert tracking pixels or analytics scripts for campaign insights.

  • Fine-tune spacing, colors, and styles beyond standard editor capabilities.

  • Experiment safely with advanced customization in specific sections of your email.

How To Setup the Code Element

Follow these steps to add and configure the Code Element in your email template:

  1. Navigate to Marketing → Emails → Templates from your sub-account dashboard.

    Step 1 of 9: Navigate to Marketing → Emails → Templates from your sub-account… What this shows Step 1 of 9: Navigate to Marketing → Emails → Templates from your sub-account dashboard. What this shows Shows where to go for step 1 of 9 in the "How To Setup the Code Element" section of "Code Element in Email Builder". This screenshot accompanies step 1 of 9 in the "How To Setup the Code Element" section of "Code Element in Email Builder". At this point in the walkthrough you navigate to Marketing → Emails → Templates from your sub-account dashboard. The next step is to open an existing email template or create a new one by clicking the + New button. Step 1 of 9Image 1 of 4 Where to goNavigate to Marketing → Emails → Templates from your sub-account dashboard.
    Buttons and menus referenced Marketing → Emails → Templates+ NewEmail BuilderAdd Elements (+)Code ElementElementsEditHTMLCSSPreviewdesktopmobile
    Next stepOpen an existing email template or create a new one by clicking the + New button.
    All 9 steps in this procedure
    1. Navigate to Marketing → Emails → Templates from your sub-account dashboard. this image
    2. Open an existing email template or create a new one by clicking the + New button.
    3. In the Email Builder, click the Add Elements (+) icon in the left sidebar.
    4. Locate the Code Element under the Elements section.
    5. Drag and drop the Code Element into your desired section of the email layout.
    6. Click on the Code Element to open the Edit tab on the left panel.
    7. In the code editor box, paste or type your custom HTML or CSS code.
    8. Click Preview to check how your custom code appears in the design.
    9. Test your email in both desktop and mobile previews before sending to ensure proper rendering.

  2. Open an existing email template or create a new one by clicking the + New button.

    Step 2 of 9: Open an existing email template or create a new one by clicking the +… What this shows Step 2 of 9: Open an existing email template or create a new one by clicking the + New button. What this shows Shows where to go for step 2 of 9 in the "How To Setup the Code Element" section of "Code Element in Email Builder". This screenshot accompanies step 2 of 9 in the "How To Setup the Code Element" section of "Code Element in Email Builder". At this point in the walkthrough you open an existing email template or create a new one by clicking the + New button. The next step is to in the Email Builder, click the Add Elements (+) icon in the left sidebar. Step 2 of 9Image 2 of 4 Where to goOpen an existing email template or create a new one by clicking the + New button.
    Buttons and menus referenced + NewMarketing → Emails → TemplatesEmail BuilderAdd Elements (+)Code ElementElementsEditHTMLCSSPreviewdesktopmobile
    Next stepIn the Email Builder, click the Add Elements (+) icon in the left sidebar.
    All 9 steps in this procedure
    1. Navigate to Marketing → Emails → Templates from your sub-account dashboard.
    2. Open an existing email template or create a new one by clicking the + New button. this image
    3. In the Email Builder, click the Add Elements (+) icon in the left sidebar.
    4. Locate the Code Element under the Elements section.
    5. Drag and drop the Code Element into your desired section of the email layout.
    6. Click on the Code Element to open the Edit tab on the left panel.
    7. In the code editor box, paste or type your custom HTML or CSS code.
    8. Click Preview to check how your custom code appears in the design.
    9. Test your email in both desktop and mobile previews before sending to ensure proper rendering.

  3. In the Email Builder, click the Add Elements (+) icon in the left sidebar.

    Step 3 of 9: In the Email Builder, click the Add Elements (+) icon in the left… What this shows Step 3 of 9: In the Email Builder, click the Add Elements (+) icon in the left sidebar. What this shows Shows where to go for step 3 of 9 in the "How To Setup the Code Element" section of "Code Element in Email Builder". This screenshot accompanies step 3 of 9 in the "How To Setup the Code Element" section of "Code Element in Email Builder". At this point in the walkthrough you in the Email Builder, click the Add Elements (+) icon in the left sidebar. The next step is to locate the Code Element under the Elements section. Step 3 of 9Image 3 of 4 Where to goIn the Email Builder, click the Add Elements (+) icon in the left sidebar.
    Buttons and menus referenced Email BuilderAdd Elements (+)Marketing → Emails → Templates+ NewCode ElementElementsEditHTMLCSSPreviewdesktopmobile
    Next stepLocate the Code Element under the Elements section.
    All 9 steps in this procedure
    1. Navigate to Marketing → Emails → Templates from your sub-account dashboard.
    2. Open an existing email template or create a new one by clicking the + New button.
    3. In the Email Builder, click the Add Elements (+) icon in the left sidebar. this image
    4. Locate the Code Element under the Elements section.
    5. Drag and drop the Code Element into your desired section of the email layout.
    6. Click on the Code Element to open the Edit tab on the left panel.
    7. In the code editor box, paste or type your custom HTML or CSS code.
    8. Click Preview to check how your custom code appears in the design.
    9. Test your email in both desktop and mobile previews before sending to ensure proper rendering.

  4. Locate the Code Element under the Elements section.

  5. Drag and drop the Code Element into your desired section of the email layout.

  6. Click on the Code Element to open the Edit tab on the left panel.

  7. In the code editor box, paste or type your custom HTML or CSS code.

    • Use HTML for structure (e.g., divs, tables, embeds).

    • Use inline CSS for styling (e.g., colors, spacing, fonts).

      Step 2 of 2: Use inline CSS for styling (e.g., colors, spacing, fonts) What this shows Step 2 of 2: Use inline CSS for styling (e.g., colors, spacing, fonts). What this shows Shows what this covers for step 2 of 2 in the "How To Setup the Code Element" section of "Code Element in Email Builder". This screenshot accompanies step 2 of 2 in the "How To Setup the Code Element" section of "Code Element in Email Builder". At this point in the walkthrough you use inline CSS for styling (e.g., colors, spacing, fonts). Step 2 of 2Image 4 of 4 What this coversUse inline CSS for styling (e.g., colors, spacing, fonts).
      Buttons and menus referenced Marketing → Emails → Templates+ NewEmail BuilderAdd Elements (+)Code ElementElementsEditHTMLCSSPreviewdesktopmobile
      All 2 steps in this procedure
      1. Use HTML for structure (e.g., divs, tables, embeds).
      2. Use inline CSS for styling (e.g., colors, spacing, fonts). this image

  8. Click Preview to check how your custom code appears in the design.

  9. Test your email in both desktop and mobile previews before sending to ensure proper rendering.

Frequently Asked Questions

Q: What types of code can I add using the Code Element?

You can add HTML and inline CSS. JavaScript and iframe content are generally not supported by most email clients for security reasons.

Q: Will my custom code affect the rest of the email layout?

It can if not written correctly. Keep your code self-contained and use inline styles to prevent it from impacting other elements.

Q: How can I make sure my code displays properly across email clients?

Always test your email using the preview and send test options. Because email clients handle HTML differently, some code may look slightly different in each.

Q: Can I save and reuse my custom code?

Yes, once you’ve created a code block, you can duplicate or copy it across templates to reuse the same design or functionality.

Frequently asked questions

What is the Code Element in Email Builder?
The Code Element is a drag-and-drop block that enables you to add custom HTML or CSS directly into your email layout. It’s designed for advanced users who want to include specialised content such as embedded countdown timers, tracking tags, or layout modifications that aren’t possible through the standard visual editor. When used correctly, it allows deeper customisation and helps you integrate third-party tools seamlessly within your email design. Note: Email clients have limited support for custom code. Always test your email before sending to ensure that all embedded content displays correctly across platforms.

Was this guide helpful?

Related guides

@Mention or Tag Profile in Posts from Social Planner2 min read · 4 imagesAdd Location Tagging to Social Post1 min read · 9 imagesAdd Pinterest Pins in Social Planner4 min read · 8 imagesSocial Planner - How to Add Multiple Watermarks4 min read · 8 images