eWizard.js framework

# Email tutorial

Tags:
#Tutorials#Email

You can update the email content with eWizard.js and eWizard CLI. Email content is structured into components, blocks, and modules. Add blocks, components, and other HTML elements to the email template in the App.vue file.

As best practice, it's recommended to edit your content in eWizard Editor.

# App.vue

In the App.vue file, you can add blocks to the email markup and use the common styles for the file.

Example of an App.vue file:

<i18n>
{
  "eng": {
    "title": "<div style=\"line-height: 34px;text-align: left;\"><a href=\"http://viseven.com\"><span style=\"font-size: 29px; font-family: arial, &quot;helvetica neue&quot;, helvetica, sans-serif;color:#000000;\">Your email is there - fill it with content!</span></a></div>",
    "text_1": "<div style=\"line-height: 20px;text-align: left;\"><p><span style=\"color:#4d4d4d; font-size: 14px;font-family:arial,helvetica neue,helvetica,sans-serif;\">Good news: your template is ready! But doesn&rsquo;t it look a bit too&hellip; empty? Time to fill it with content!</span></p><p><span style=\"color:#4d4d4d;font-size: 14px;font-family:arial,helvetica neue,helvetica,sans-serif;\">Type the commands for the components you want to add and create the email masterpiece to be proud of</span></p></div>",
    "text_2": "<div style=\"line-height: 20px; text-align: center;\"><strong><span style=\"font-size: 17px; font-family: arial, &quot;helvetica neue&quot;, helvetica, sans-serif;color:#000000;\">The mailing address for the contacts listed below is:</span></strong></div><div style=\"line-height: 20px; text-align: center;\"><span style=\"font-size: 14px; font-family: arial, &quot;helvetica neue&quot;, helvetica, sans-serif;color:#000000;\">[Mailing address]</span></div><div style=\"line-height: 20px; text-align: center;\"><span style=\"font-size: 14px; font-family: arial, &quot;helvetica neue&quot;, helvetica, sans-serif;color:#000000;\">[Telephone number]</span></div>",
    "copy_text": "<div style=\"line-height: 20px; text-align: center;\"><span style=\"font-size: 10px; font-family: arial, &quot;helvetica neue&quot;, helvetica, sans-serif;color:#000000;\"><i>Copyright &copy; 2019, All rights reserved.</i></span></div>",
    "image_alt_1": "Viseven",
    "image_align_1": "center",
    "image_alt_2": "Image",
    "image_alt_3": "Image"
  }
}
</i18n>

<template>
  <div>
    <wiz-root align="center" style="background: #ffffff; width: 700px;">
      <wiz-block style="padding: 10px 10px 10px 10px;">
        <wiz-placeholder style="padding: 0;">
          <wiz-column :width="100">
            <wiz-image src="./common/media/images/logo.png" class="m-full-width" :width="100" style="width: 100px;" :alt="$t('image_alt_1')" :align="$t('image_align_1')"></wiz-image>
          </wiz-column>
        </wiz-placeholder>
      </wiz-block>
      <wiz-block style="padding: 10px 10px 10px 10px;">
        <wiz-placeholder style="padding: 0;">
          <wiz-column :width="100">
            <wiz-title class="m-center" :text="$t('title')"></wiz-title>
            <wiz-text :text="$t('text_1')"></wiz-text>
            <wiz-divider align="center" divider-color="transparent" :divider-height="0"></wiz-divider>
          </wiz-column>
        </wiz-placeholder>
        <wiz-placeholder class="m-row" style="padding: 5px 0 5px 0;">
          <wiz-column :width="50">
            <wiz-image class="m-p-b-10" :alt="$t('image_alt_2')" src="./common/media/images/placeholder_290x164.png"></wiz-image>
          </wiz-column>
          <wiz-column :width="50">
            <wiz-image :alt="$t('image_alt_3')" src="./common/media/images/placeholder_290x164.png"></wiz-image>
          </wiz-column>
        </wiz-placeholder>
      </wiz-block>
      <wiz-block style="padding: 10px 10px 10px 10px;">
        <wiz-placeholder style="padding: 0;">
          <wiz-column :width="100">
            <wiz-text class="m-p-0" :text="$t('text_2')" style="padding: 35px 0 0 0;"></wiz-text>
            <wiz-divider style="padding: 15px 0px 15px 0px;" divider-color="#5a5a5a" :divider-height="1"></wiz-divider>
            <wiz-text :text="$t('copy_text')" style="padding: 0 0 15px 0;"></wiz-text>
          </wiz-column>
        </wiz-placeholder>
      </wiz-block>
    </wiz-root>
  </div>
</template>

<script>
export default {
  name: 'wiz-app',
};
</script>

<style>
@import 'common/styles/main.css';
</style>

The App.vue file consists of four main tags:

  • <i18n>—use the <i18n> tag for the text localization in your email template.

  • <template>—contains the email markup, such as components, blocks, and other HTML attributes.

  • <script>—contains JavaScript functions, such as component links or variables for importing images.

  • <style>—CSS styles used within a specific email or layout. Use the ./common/styles/main.css file to apply global CSS styles for the email layout.

# Add content to an email

To add content to your email, use components, blocks, and modules. You can develop components independently without affecting the rest of the email or reuse them.

Block is a ready-to-use group of predefined components with some common structure. For example, a block may contain a headline, an image, several paragraphs of text, and social network icons.

You can combine multiple blocks into a module—a unit that covers a large part of an email, sometimes a whole page.

For more information, see Item types.

# Blocks

A block is a ready-made piece of email template markup with predefined content and design. You can add a block to the email template and edit it in eWizard Editor.

All email blocks are defined and stored in the email template source files as Vue components.

# Blocks library

By default, the email template project, created with the wiz init command, has a set of simple configured blocks ready for use in eWizard Editor.

Image

All blocks are stored in the ./common/blocks-library/blocks.json file and serve as templates.

For more information, see Email directory structure.

To view and add a block to eWizard, register the block in the blocks.json file.

To edit a block:

  1. Add a block to your email in eWizard Editor.

  2. Download the source file of the email.

  3. Edit the block in the App.vue file.

# Style your blocks

You can use CSS to style your email blocks.

To add a style to a block:

  1. Open the ./blocks-library/block/index.vue file.

    block is the name of a directory with a specific block.

  2. Edit the style of the block and components with the inline style element within the <wiz-block> tag. For example:

    <!-- ./blocks-library/block/index.vue -->

<template>
  <wiz-block
    class="block bg-ae-block-c2 m-full-width m-mw-auto m-p-tb-16 m-p-lr-0"
    align="center"
    style="min-width: 640px; width: 640px;padding: 24px 0;"
  >
    <wiz-placeholder
      :break-columns="false"
    >
      <wiz-column
        :width="100"
      >
        <wiz-text
          class="m-p-b-12"
          :text="$t('text1')"
          style="padding: 0 0 16px;"
        >
        </wiz-text>
        <wiz-text
          :text="$t('text2')"
          style="padding: 0;"
          class="m-p-b-0"
        >
        </wiz-text>
      </wiz-column>
    </wiz-placeholder>

  </wiz-block>
</template>

# Show blocks and components as images

The as-image attribute displays blocks and components as images when you export an email project for one of the target systems. As a result, blocks with text, images, or individual components appear as one image in the resulting HTML email.

Use the as-image attribute when:

  • You export an email project for a certain target system that may have limitations on the size of the email HTML file. When your email template has a lot of lines of code in its markup, it increases the HTML file size.

  • Certain email clients or browsers may have issues with displaying your email content.

The solution for these issues is to display an image instead of a block or component with large and complicated markup in the resulting email HTML.

To display blocks or components in your email as images:

  1. Add as-image with the image properties to the block or component template markup:

    • In the index.vue file of the block or component instance.
    <!-- ./common/blocks/wiz-block-b8/index.vue -->

<template>
  <wiz-block class="block wiz-block-b8 m-full-width m-mw-auto" align="center" style="width: 600px;min-width: 600px; padding: 20px 0;" as-image="{'alt': 'My image'}">
  </wiz-block>
</template>
    • In the App.vue file of your email project.
    <!-- ./App.vue -->

<template>
  <wiz-wrapper style="width: 100%;" class="editable-block">
    <wiz-root class="m-full-width editable-block main" align="center" style="background: rgb(255, 255, 255);width: 100%;">
      <wizHeader1d></wizHeader1d>
      <wizContent2b></wizContent2b>
      <wizContent2a></wizContent2a>
      <wizBlockB8 as-image="{'alt': 'My image'}"></wizBlockB8>
      <wizFooter3a></wizFooter3a>
    </wiz-root>
  </wiz-wrapper>
</template>

    It's recommended to add as-image to the blocks and components in the ./common/blocks or ./common/components directories. If you add as-image to the blocks in the ./node_modules/@blocks directory, you can lose changes when updating the modules.

  2. Export your email for one of the target systems using the eWizard platform.

    The resulting HTML email displays the images for the blocks and components where you added as-image.

    If a block or component includes a hyperlink, eWizard.js appends this link to the block or component image in the resulting HTML email.

# Properties of the as-image attribute

You can add various properties to the as-image attribute:

  • alt for the alternative text.

  • src for the image path.

  • style for image inline style.

An example of the as-image attribute:

<template>
  <wiz-placeholder class="m-full-width" align="center" style="padding: 0;" as-image="{'alt': 'wiz-BlockB8', 'style': 'vertical-align:bottom;'}">
</template>

# Generate images with a transparent background

When you capture the screenshot of an email component with the as-image attribute, you can add the as-image-options attribute with the omitBackground option. This option hides the background of parent elements and allows capturing screenshots with transparent backgrounds.

<wiz-button as-image="" as-image-options="{'type': 'png', 'omitBackground': true}"></wiz-button>

Use both the as-image-options and as-image attributes to generate the screenshot first.

# Properties of the as-image-options attribute

The as-image-options object has the following properties:

Property Type Default Description
type String png The screenshot image file type: png, jpeg, or webp.
omitBackground Boolean false Hides the background of parent elements and allows capturing screenshots with transparent backgrounds. This property works only if the type property is png.
asImageInPdf Boolean false Defines if a block is exported as image to PDF. If true, the block is exported as an image.

# Usage

Use the as-image-options attribute to make the background of your component or block transparent. This feature is useful when the email client displays a component or block with the background that's different from your email background. For example, the social follow icons may have such background issue in the Outlook 2010 client.

If you set the omitBackground property to true, the resulting image uses a transparent background.

For example, the wiz-button component is part of the wiz-column component (parent) that has a green background. With the omitBackground property set to false, the image has the background on which the screenshot was taken.

<wiz-column style="padding: 0 0 0 12px; background: green" class="custom" :width="77">
    <wiz-button as-image="" as-image-options="{'type': 'png', 'omitBackground': false}"></wiz-button>
</wiz-column>

omitBackground set to false

If you change the general background to yellow—the button corners remain green.

omitBackground set to false

With the omitBackground property set to true, the image background becomes transparent, and the corners take the general background—yellow.

as-image-options button

Last updated: 12/7/2022, 12:36:15 PM

← Custom fonts→