In this article

Add to Calendar allows users to add an event invite with pre-populated details to their calendar using a .ics file. The recipient downloads the file and then double-clicks it to be added to their calendar. This is supported by the most commonly used email calendars such as Apple and Outlook. Some cloud-based calendars like Google Calendar or Office365 also allow you to directly add the event by clicking a link (no download needed).

Let´s imagine that you have created a new email fragment or template, have completed the email details, and are now in the HTML editor ready to add elements to your email fragment or template. (If you need to revise any of these steps, check out this article here).

From the menus on the right-hand side, select the content menu. Find the “Add to Calendar” icon in the content menu, and simply drag and drop that icon onto your email canvas.

You will notice that a placeholder grey button with the words, “Add to calendar” as well as a row of text, “Google, Office365, Outlook.com” has been added to the email canvas. To add your own text to the Add to Calendar button instead, scroll down to the part of the menu on the right-hand side simply start typing where you see the text already in the box.

When you click anywhere in the frame around the button, you will see that some new configuration settings appear in the menu on the right-hand side.

Title* - Add the title of your event here. (This is an obligatory field.)

From* - Here you can set the beginning day, month, and year of the event. You can use the plus and minus icons to increase or decrease the default values in these fields, or you can type a numerical value directly into the corresponding box. (This is an obligatory field.)

Time - Here you can set the start time of the event. You can use the dropdown menu to select a value from the list of times, or you can type a numerical value directly in that field.

Time zone - Using the dropdown menu you can select the local time zone of your event. You can either search for the name of the city or scroll through the list of options available.

Till* - Add the end time of the event here using the same method as for the start date.

Good to know!

If the event lasts more than one day, you can disable the toggle “Same Day” to have the option to add a different end date for the event.

Recurring event - Using the toggle next to "recurring event", you can activate the option to set a regular event daily, weekly, monthly or yearly.

Frequency: Selecting from the dropdown menu available in the "frequency" field, choose how often you would like to schedule the event.

Repeat every: Here you can select how often you want to repeat the event being scheduled (up to 30 weeks). So for example, if you select 6 weeks - the event will be scheduled every 6 weeks.

Repeat on: Here you can select which day you want to repeat the event (for example, Tuesday).

Ends - Here you can determine the settings of when the recurring event should cease to be scheduled.

Never: With this option, the event will be scheduled without any end date.
After: The event will be scheduled after a number of occasions, for example after 6 occurrences the event will end (up to 100 occurrences).

On: Select the end date when this event should no longer be scheduled, using the dropdown options available for day, month and year.

Description - You can add a description to the event providing more information to the recipient by simply typing in this field - here is also where you add the URL link to the event if it's online

Location - You can add further details about where the event will take place by typing in this field.

Show Download button - By default this will be enabled as we recommend that your recipient can see the option to download the event to their calendars. If you don't want to show this, however, you can simply disable the toggle.

Colors: You can define the color of both the text on your button as well as the color of the button itself. Select from the color options available to change the color of the text or button. (Please note - in some accounts the color options are limited to maintain consistency when working with certain Products. If you have any doubts or questions about the options available to you, contact us at support@getshaman.com.

Line Height - Here you can set a specific line height for your text, which refers to the spacing between lines of text. You can increase or decrease this by using the minus and plus icons on either side of the numerical value. The percentage changes in multiples of 10 (eg. 120, 130, 140, etc) and is set as default at 120%.

Padding - The first padding settings in the button menu refer to the amount of padding between the text and the outer edge of the button. That is to say, how much space surrounds the text within the button. You can choose to add the same padding to all sides by maintaining the “All sides” toggle enabled. Or, you can disable this toggle to manually configure the padding size for each side of the text within your button. You can use the plus and minus icons to increase or decrease the padding, or you can type a numerical value directly into the padding box.

Border - Choosing “Solid”, “Dotted” or “Dashed” from the options in the dropdown menu you can set a border for your button. You can set this on all sides of your button using the “All Sides¨ option, or you can enable the “More Options” toggle on the right of the menu to view options to configure the border of each side - “Top”, “Bottom”, “Left” and “Right”. You can also use the plus and minus signs to define the width of the border, or alternatively add a value directly to the numerical fields available to maintain consistency across your borders.

Rounded border - This refers to the corners of the button, the larger the value of the rounded border, the more curved the corner will seem. The smaller the value in the rounded border field, the more square the corner will seem. You can choose to add the same rounded border to all corners by maintaining the “All sides” toggle enabled. Or, you can disable this toggle to manually configure the rounded border setting for each corner of your button.

Add to calendar links

Show Add to Calendar links - This toggle is enabled by default so the recipient can easily view and click the links to add to calendar. By clicking the toggle to disable it, the add to calendar links will be removed from view.

Inherit Body Styles - This refers to the settings of the formatting of the links, eg. their color and whether they are underlined. This toggle is enabled by default to maintain consistency with other links in your email.

If you do want to change the color of the link or remove the underlined formatting, you can simply click the toggle to disable it. You will then see options to set the color of the link and remove the underlined formatting.

Container Padding - Padding can be used to perfectly position the button within the body of your email content. You can choose to add the same padding to all sides by maintaining the “All sides” toggle enabled. Or, you can disable this toggle to manually configure the padding size for each side of the button. You can use the plus and minus icons to increase or decrease the padding, or you can type a numerical value directly into the padding box.

Responsive Design

Hide on Desktop - When this toggle is enabled, the text will not be displayed when viewing the email on a desktop computer or laptop, it will only be viewable on a mobile view.

Good to know!

We highly recommend you pay attention to how your email content looks on both mobile and desktop views. To learn more great tips when creating email content compatible with mobile and desktop views, take a look at this article here.

Top tip!

To preview the add to calendar button you have created, click ´Done´in the HTML editor to return to the email details page of your email template or fragment. Click the preview icon on the right-hand side. Find the add to calendar button you wish to preview in your content and click it. If you have enabled the “Show download button”, you will see the calendar invite download to your browser. You can then click to add it to your calendar. When you click the invite, you can preview all the information you have added (eg. description, location).

To delete this button, simply click anywhere within the add to calendar area to select it. You will then notice two icons - a bin icon to delete the button, and a copy icon to duplicate it.

Depending on which you wish to do, simply click the icon, and your button will either be deleted or duplicated.