wiz-references component in emails

The wiz-references component is an HTML table with the list of references—citations of the sources used in the email. Each reference has its ID.

Use eWizard Editor to add references to the email. For more information about using references in eWizard Editor, see References.

For more information about working with references locally in your project, see References.

Installation

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

wiz install @email/wiz-references

To use your component in eWizard Editor:

1) Make the component visible in eWizard Editor.

2) Register the component globally in the project or locally.

For more information, see Install components.

Usage

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

To use the wiz-references component in your email template:

1) Add the <wiz-references></wiz-references> tag to your email template in the App.vue file.

<!--./App.vue --><template>
<div>
<wiz-root align="center" style="background: #ffffff; width: 700px;">
<wiz-references :header="$t('wiz_references_3aad')" id="wiz-references-5fa2"></wiz-references>
</wiz-root>
</div>
</template>

The id attribute is required for correct display of the component styles in eWizard Editor.

2) Change the header text of the references component in the <i18n></i18n> localization tag.

<!--./App.vue --><i18n>
{
"eng": {
"wiz_references_3aad": "References"
}
}
</i18n>

For more information, see Localization.

Attributes

You can change the wiz-references component appearance and behavior using the following attributes within the <wiz-references></wiz-references> tag.

• componentName

Change the component name that appears on the Properties tab in eWizard Editor.

<wiz-references component-name="My references"></wiz-references>

• header

Change the references header (title) that appears on the email layout. Use the $t('') variable to provide the key-value pair for localization of the header text.

<wiz-references :header="$t('wiz_references_3aad')"></wiz-references>

You can add the header text as a '' string without localization.

<wiz-references :header="'My references'"></wiz-references>

Properties

The wiz-references component has the following properties:

Property	Type	Default	Description
`componentName`	String	`References`	The component name that appears on the Properties tab in eWizard Editor.
`header`	String	`References`	The component header (title) that appears on the email layout.

For more information, see Component properties.