eWizard.js: Email settings | Viseven Help Center

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
},
"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"
}
}

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.
`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.
`country`	Information about the email template country. Here, the value is set to `Germany`.
`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 in emails.
`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 an 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 an 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.

TIP: 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 API in the theme settings

In the email projects that don't use dynamic themes, you can use the settings API 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.jsimport 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]
}
}

V: -pre 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 API.