wiz-button | Viseven Help Center

The wiz-button component is a clickable HTML button with a link. For more information, see Button.

Installation

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

wiz install @email/wiz-button

For more information, see Install components.

Usage

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

To add the wiz-button component to your email and change its properties, in the App.vue file:

1) Add the wiz-button component to your email template.

<!--./App.vue --><template>
<div>
<wiz-root align="center" style="background: #ffffff; width: 700px;">
<wiz-button :text="$t('wiz_button_8f1e')" id="wiz-button-6cbe" align="center" :line-height="20" :text-align="'left'" :full-width="true" :link="'https://viseven.com/'"></wiz-button>
</wiz-root>
</div>
</template>

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

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

<!--./App.vue --><i18n>
{
"eng": {
"wiz_button_8f1e": "<span><span style=\"color:#ffffff;font-family:arial,helvetica neue,helvetica,sans-serif;font-size:17px;\"><b>My button text</b></span></span>"
}
}
</i18n>

NOTE: For more information, see Localization.

Attributes

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

• line-height

To change the button text height, set the height in pixels in the attribute value.

<wiz-button :line-height="30"></wiz-button>

• full-width

To make a full width button on the page, set the attribute value to true. Use the text-align property in this mode.

<wiz-button :text-align="'center'" :full-width="true"></wiz-button>

• text-align

To change the alignment of the button text, set the attribute value to left, center, right, or justify. Set the full-width attribute to true to see the button text alignment.

<wiz-button :text-align="'left'" :full-width="true"></wiz-button>

• link

Add the button link to the attribute value.

<wiz-button :link="'https://viseven.com/'"></wiz-button>

• align

To change the button alignment on the page, set the attribute value to left, center, or right. Use this attribute only if the full-width attribute value is false.

<wiz-button align="center" :full-width="false"></wiz-button>

Properties

The wiz-button component has the following properties:

Property	Type	Default	Description
`text`	String	`<strong><span style='color:#ffffff;font-size: 16px;font-family:arial,helvetica neue,helvetica,sans-serif;'>Button</span></strong>`	The text on the button.
`lineHeight`	Number	`20`	The button text line height.
`textAlign`	String	`center`	Align the button text in the full width mode. The property includes an array of the following options: `left`, `center`, `right`, and `justify`.
`link`	String	`https://viseven.com/`	The link that opens when you click the button.
`fullWidth`	Boolean	`false`	Make the button full width of the page.
`align`	String	`left`	Align the button on the page. The property includes an array of the following options: `left`, `center`, `right`.

For more information, see Component properties.