As we explain in other articles, MDirector's improved editor allows you to add action buttons to email templates, enabling three different types of actions:
-
Open a website
-
Send an email
-
Call a phone number
Through the 'Open a webpage' action, you can trigger multiple additional interactions, such as filling out forms, downloading documents, registering for events, or personalizing the user experience with tailored content. This functionality turns a simple click into a powerful tool for achieving your email marketing campaign goals.
In this article, we will focus on how to create an 'Add event to calendar' button, perfect for emails serving as event invitations. This type of button allows recipients to save the event directly to their digital calendars.
Step-by-step guide to creating an 'Add to calendar' button
-
Generate the calendar link
There are various tools that allow you to generate links compatible with digital calendars, such as Google Calendar, Microsoft Outlook, Office 365, and Yahoo! Calendar. Some recommended options are:
These platforms will guide you in creating a personalized link with your event's information, such as the date, time, description, and location.
Once generated, copy the corresponding link.
Keep in mind that you will need to create a button for each calendar to which you want recipients to add the event.
Although these platforms allow you to generate links for multiple calendars by creating the event just once, the calendars themselves also offer the option to generate the link. This can be useful when we know all recipients use the same calendar. For example, from Google Calendar, we can generate this link by accessing the corresponding event, clicking on the three-dot menu, and selecting the 'Publish event' option.
-
Configure the button in MDirector's editor
a. Select the button element
-
In your email template, drag the button element from the toolbar to the desired location.
b. Customize the button design
-
Change the button text to something like 'Add to calendar'
-
Adjust the button style (color, size, borders, etc.) to match the aesthetics of your email
c. Assign the action to the button
-
Select the 'Open a webpage' option
-
Paste the previously generated link into the corresponding field
-
-
Test your template
Before sending your campaign, run a test to verify that:
-
The link works correctly and takes the recipient to the digital calendar with the event loaded
-
The button design is visually appealing across different devices and email clients
-
Example of HTML code for the button
Alternatively, if you'd like to customize the button with code, you can use the following snippet:
<a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=..." style="display: inline-block; background-color: #44c767; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-size: 16px;">Add to calendar</a>This code provides a simple yet functional style for your button. Remember to replace the link with the one generated for your event.
The aforementioned platforms also provide an HTML snippet for your button.
Benefits of adding this button
-
Time-saving for users: Simplifies the process of adding the event to their calendar.
-
Increased engagement: Recipients can confirm their attendance with just one click.
-
Enhanced professionalism: Advanced functionality reflects the quality of your brand.
Adding an "Add to Calendar" button to your email templates not only improves user experience but also boosts the effectiveness of your campaigns. Follow these steps to transform your emails into more useful and engaging tools.
Comments