wiz-button

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

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

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>

   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>

   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 following properties are available:

Property	Type	Default value	Description
align	string	left	The button alignment on the email layout. One of: "center", "left", "right".
fullWidth	boolean	false	Stretches the button to the fill width of the email.
lineHeight	number	20	Spacing between lines in pixels.
link	string	https://viseven.com/	A URL or link target for the button.
text	string	<strong><span style='color:#ffffff;font-size: 16px;font-family:arial,helvetica neue,helvetica,sans-serif;'>Button</span></strong>	The button text.
textAlign	string	center	The alignment of the button text. One of: "left", "right", "center", "justify".