wiz-event-invitation

Use the wiz-event-invitation component to create a button that lets you download an ICS file. You can add the generated ICS file with the event details to the calendar. For more information, see Event.

Learn more about components

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

Usage

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

1. Add the wiz-event-invitation component to your email template.

   <!--./App.vue -->
   
   <template>
   <wiz-wrapper>
     <wiz-root>
       <wiz-event-invitation 
         :text="$t('wiz_event_invitation_46d2')"
         id="wiz-event-invitation-b0df"
         :ics-calendar="{
           'name': 'My event',
           'date': '2022-11-26',
           'time': {'from': '01:30', 'to': '03:30'},
           'timezone': 60,
           'location': 'Alaska',
           'description': 'My event description',
           'link': 'https://your-instance.ewizard.io/path/to/invitation.isc'
         }"
       ></wiz-event-invitation>
     </wiz-root>
   </wiz-wrapper>
   </template>

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

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

   <!--./App.vue -->
   
   <i18n>
   {
     "eng": {
       "wiz_event_invitation_46d2": "ADD TO MY CALENDAR"
     }
   {
   </i18n>

   For more information, see Localization.

Attributes

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

• :text

  Modify the component button text by changing the :text attribute value. To hide the time range from the agenda, set the is-time attribute value to false.

  <wiz-event-invitation :text="$t('wiz_event_invitation_46d2')"></wiz-event-invitation>

  Use this attribute to define the key, such as wiz_event_invitation_46d2 for the key-value pair in the i18n tag.

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

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

  You can edit the text when you archive and upload the email project to eWizard. 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.

• line-height

  Set the hight of the button text in pixels in the attribute value.

  <wiz-event-invitation :line-height="30"></wiz-event-invitation>

• full-width

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

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

• text-align

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

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

• align

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

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

• name

  Enter the name of the event as text.

  <wiz-event-invitation
    :ics-calendar="
      {
        'name': 'My event'
      }"
  ></wiz-event-invitation>

• date

  Enter the date of the event in the YYYY/MM/DD format.

  <wiz-event-invitation :ics-calendar="{'date': '2022-11-26'}"></wiz-event-invitation>

• time

  Enter the time of the event using the from and to fields.

  <wiz-event-invitation :ics-calendar="{'time': {'from': '01:30', 'to': '03:30'}}"></wiz-event-invitation>

  from is the start time of the event.

  to is the end time of the event.

• timezone

  Enter the timezone of the event.

  <wiz-event-invitation :ics-calendar="{'timezone': 60}"></wiz-event-invitation>

  The timezone is dynamically generated based on the city of the event.

• location

  Enter the location of the event as text.

  <wiz-event-invitation :ics-calendar="{'location': 'Vancouver, Canada'}"></wiz-event-invitation>

• description

  Enter the description of the event as text.

  <wiz-event-invitation :ics-calendar="{'description': 'My event description'}"></wiz-event-invitation>

• link

  A link to the .ics file with the event details. The link is generated automatically after you add, upload, and modify the component in eWizard Editor.

  <wiz-event-invitation :ics-calendar="{'link': 'https://api.ewizard.io'}"></wiz-event-invitation>

Properties

The following properties are available:

Property	Type	Default value	Description
align	string	center	The invitation alignment on the email layout. One of: "center", "left", "right".
fullWidth	boolean	false	Stretches the invitation button to the full width of the email.
icsCalendar	boolean	N/A	When true, the invitation contains the calendar element with the information about the event: timezone, location, description, and link.
lineHeight	number	14	Spacing between lines in pixels.
text	string	<strong><span style='color:#ffffff; font-size: 13px;font-family:arial,helvetica neue,helvetica,sans-serif;'> ADD TO MY CALENDAR</span></strong>	The invitation button text.
textAlign	string	center	The alignment of the invitation button text. One of: "left", "right", "center".