Settings

The ./settings.json file in the project root directory stores the email template settings. Depending on the email template type, the default configuration of the settings.json file can vary.

Consider the settings.json file structure of the scaffolding and master email templates.

Scaffolding email template settings

When initializing the scaffolding email template, you can find the following default configuration of the settings.json file:

{
  "name": "email",
  "id": "125bee40-fc9d-4ffb-adaf-2b047168843a",
  "localization": {
    "current": "eng",
    "original": "",
    "langs": [
        "eng"
    ]
  },
  "browserslist": ["last 2 versions"],

}

Field	Description
name	The email template name.
id	The unique ID of the created email.
localization	Information about the email template localization and current language, which is automatically set as English.
browserslist	The settings for the email template compatibility with the email client versions. For more information, see the Browserslist configuration syntax.

Master email template settings

You can create the email template for a specific brand, language, country, and target system. For this, add the relevant fields to the settings.json file and set the required values.

For example, let's create a Viseven email template with the following configuration:

{
  "name": "Viseven default email",
  "id": "41bddf687d7b3691a68f180bd999ddc3",
  "metadata": {
    "purpose": {
        "default": "invitation",
        "current": "follow-up"
    }
  },
  "localization": {
    "current": "deu",
    "original": "eng",
    "langs": ["eng"],
    "country": "Germany"
  },
  "browserslist": ["last 2 versions"],
  "screenshoter": {
    "asImageInPdf": true,
    "delay": 1000,
    "icons": {
      "blocks": {
        "enabled": true,
        "width": "200px",
        "mode": "view"
      }
    }
  },
  "app": "./App.vue",
  "targetCLM": {
    "name": "Veeva Vault",
    "code": "veeva"
  },
  "theme": "Viseven",
  "templateType": "Broadcast",
  "templateSubType": "SFMC",
  "assetsGroup": {
    "blocks": "Viseven",
    "components": "broadcast"
  },
  "writeFrameworkVersion": false,
  "content": {
    "automaticLink": false
  },
  "fonts": {
    "alternative": "Helvetica, sans-serif",
    "external": [
      "Arial",
      {
        "name": "Custom Font",
        "fontFamily": "Noto Sans",
        "alternative": ""
      }
    ]
  },
  "optimization": {
    "maxImageWidth": 640,
    "minifyClassesFilter": [
      "block",
      "break-columns",
      "button-container",
      "button-text",
      "wiz-title",
      "root"
    ]
  },
  "uncss": {
    "ignore": [
      "/\\.block/",
      "/\\.break-columns/",
      "/\\.button-container/",
      "/\\.root/"
    ]
  },
  "information": {
    "brand": "5e78d93f5555f900088d5990"
  },
  "externalSystems": {
    "contentful": {
      "twoWaySync": true
    }
  }
}

Field	Description
purpose	The purpose of the email. It defines the display of default blocks in the email template. default is the default email purpose displayed first in the list. current is the current purpose applied to the email template.
localization	Information about the email template languages and localizations. In this email template, German (deu) is set as a current language and English (eng)—the default language of any email template—is stored as original. The langs field contains one available eng localization for this email template.
localization.country	Information about the email template country. Here, the value is set to Germany.
browserslist	The settings for the email template compatibility with the email client versions. For more information, see the Browserslist configuration syntax.
screenshoter.asImageInPdf	Set to true to export blocks as images in PDFs. The default value is true. For more information, see Export blocks as images to PDF.
localization	Information about the email template country. Here, the value is set to Germany.
screenshoter.delay	The delay with which the icon is generated in milliseconds. For more information, see Set delay for generating a screenshot.
screenshoter.icons.blocks.enabled	A boolean property that defines if the automatic generation of block icons is on. The default value is false. For more information, see Generate icons for blocks.
screenshoter.icons.blocks.width	Defines the width of the generated block icons in pixels. The property works if the screenshoter.icons.blocks.enabled is true. For more information, see Set generated icon width.
screenshoter.icons.blocks.mode	Defines if the block icons are generated as in the eWizard Editor Preview or Edit mode. The default value is view. The property works if the screenshoter.icons.blocks.enabled is true. For more information, see Icons for view/edit mode.
app	The path to App.vue—the root file that defines the template for the created email. App.vue contains the added blocks with email content and styles imported to the template.
targetCLM	Information about the target system of the email template. In this example, it's set to veeva. The resulting email build is compatible with Veeva Vault.
theme	Information about the current theme. The theme configurations are stored in the themes directory of the project root directory. For more information, see Dynamic themes.
templateType	The deprecated field that indicated the email template type. The type value is specified in the ./.ewizard/settings.json file.
templateSubType	The deprecated field that indicated the target system of the email template. The subtype value is specified in the ./.ewizard/settings.json file.
assetsGroup	Information about configuration of blocks, components, and modules in the ./assets directory. This directory is available in the older master email templates. For the new email templates with dynamic themes, the configuration files for the blocks and modules are stored in the ./common/blocks-library directory.
optimization	The manually created list of classes with the names that must remain unchanged after the email build optimization. The list of classes can be updated by eWizard.js when exporting a Veeva Vault build. For more information, see Optimize email Veeva Vault build
maxImageWidth	Specify the image width in pixels to reduce its size in the resulting email build. By default, eWizard.js reduces the image width to 1400 pixels.
uncss	A list of classes that are required for the Veeva Vault build. For more information, see Optimize email Veeva Vault build
information	Information about the brand of the email template.
writeFrameworkVersion	Set to true to add the framework version to the resulting HTML file when you export the email using the eWizard platform. The default value is true. For more information, see Write framework version in the email settings.
automaticLink	Set to true to make all numbers clickable in the resulting HTML after you export the email using the eWizard platform. The default value is false. In this case, eWizard.js applies the fix so the numbers aren't converted to clickable links.
fonts	The settings for the custom fonts to be available in the eWizard Editor text properties. Use the external field for adding your custom font name and fontFamily values. For more information, see Custom fonts.
externalSystems.contentful.twoWaySync	Set to true to activate sync with Contentful for the email. If the data-asset-id attributes are added to the template, the email is created in Contentful when you add the email in eWizard Library or upload an archive. If the template doesn't include the data-asset-id attributes, the content is synced with Contentful when you edit the uploaded template in Editor and save your changes.

The name, localization, country, targetCLM, and brand values match the email metadata selected in the Create new pop-up in eWizard Library.

For more information about the general email template settings stored in the .ewizard/settings.json file, see Directory structure.

Settings plugin in the theme settings

In the email projects that don't use dynamic themes, you can use the settings plugin getRaw method to pass the fields from the ./settings.json file. This method ensures the email theme settings use the specified fields from the ./settings.json file without rebuilding the email project.

Usage example

For example, you can return the value of the target system code field in the email theme index.js file. Then, you can use this value for the tokens field settings.

// ./themes/theme1/index.js

import theme from './theme.scss';

export default function({
    settings: SettingsAPI
}) {
    const settings = SettingsAPI.getRaw();

    const template = {
        subType: settings.targetCLM.code ? settings.targetCLM.code : 'oce-sales',
        theme: settings.theme,
        country: settings.country
    };
    const tokens = {
        recipientFirstnameTokens: {
            "sfmc": "#",
            "oce-sales": "{{recipient.firstname}}",
            "veeva": "{{accFname}}",
            "mailchimp": "#"
        }
    };

    const links = {
        recipientFirstnameTokens: tokens.recipientFirstnameTokens[template.subType]
    }
}

eWizard.js uses recipientFirstnameTokens depending on the target system. For the oce-sales target system, use the {{recipient.firstname}} value. When you add this token to the wiz-text component in the email App.vue file, you see the first name of the email recipient in the resulting HTML output.

The getRaw method returns the non-interpolated values (tokens) from the ./settings.json file. You can change the target system code in the ./settings.json file or select another target system in the email details in eWizard.

For more information, see Merge tags and Settings plugin.