wiz-text component in emails | Viseven Help Center

Use the wiz-text component to add text to your email template.

For more information on the text component in eWizard Editor, see Text.

Installation

To install the wiz-text component, run the following command in the root directory of your email project:

wiz install @email/wiz-text

For more information, see Install components.

Usage

TIP: As a best practice, use eWizard Editor to add and edit the components.

To use the wiz-text component in your email project:

1) Add the wiz-text component to your email template and change its properties in the App.vue file.

<!--./App.vue --><template>
<wiz-root align="center" style="background: #ffffff; width: 700px">
<wiz-text :text="$t('wiz_text_1064')" id="wiz-text-4e75"></wiz-text>
</wiz-root>
</template>

NOTE: eWizard Editor sets the id attribute when you add the text component to the email layout. The id attribute is required for the correct display of the component styles in eWizard Editor.

2) Change the text in the localization <i18n></i18n> tag.

<!--./App.vue --><i18n>
{
"eng": {
"wiz_text_1064": "This is my text"
}
}
</i18n>

For more information, see Localization.

Attributes

Add the :text attribute within the <wiz-text></wiz-text> tag.

<wiz-text :text="$t('wiz_text_1064')"></wiz-text>

Use this attribute to define the key for the key-value pair in the i18n tag.

For example, here the wiz_text_1064 is the key.

You can use the :text attribute value as a string without the localization key. For example:

<wiz-text :text="'This is my text'"></wiz-text>

When you archive and upload the email project to eWizard, you can edit the text. eWizard.js adds the localization key automatically in Editor. When you download the email project with the edited text, you can see the localization key added instead of the actual text.

<template>
<wiz-root align="center" style="background: #ffffff; width: 700px;">
<wiz-text :text="$t('wiz_text_a5d0')"></wiz-text>
</wiz-root>
</template>

Find the original text within the i18n tag.

Properties

The wiz-text component has the following properties:

Property	Type	Default	Description
`text`	String	`<div style='text-align:center;` `line-height: 20px;'><span style=` `'font-size:14px;color:rgb(77,77,` `77);font-family:Arial,` `Helvetica, sans-serif;'>Double-click to add text</span></div>`	The text displayed in eWizard Editor when you add the text component to the layout.

For more information, see Component properties.