Learn to use an Add to Calendar Button for your site visitors to easily add your events to their calendars. In this guide, we show you how to add a Calendar Button with AddEvent, a tool compatible with Apple Calendar, Google Calendar, Outlook, Outlook.com, and Yahoo Calendar.
In this article:
- Adding a calendar button with AddEvent
- Step 1. Add custom code to your page
- Step 2. Add calendar button code from AddEvent
- Step 3. Edit your calendar event
- Step 4. Customize your custom code block
Adding a calendar button with AddEvent
Creating Calendar Buttons for your pages built with Kajabi is a powerful tool for providing a quick, effortless way for your users to add your events to their personal calendars.
With Kajabi, add your preferred Calendar Button with the Custom Code Block.
In this guide, we add a Calendar Button onto a page with AddEvent.
But remember, there are a lot of tools out there!
The best recommendation is to research and find the tool that best fits your business.
Step 1. Add custom code to your page
Create a Custom Code Block:
- Open the Website tab from the Dashboard.
- Select the Pages tab.
- Open the page editor for your Page. Learn more
- In the sidebar, select the Section of your Page where you wish to include your Add to Calendar Button.
- Then, click Add Content.
- Select Custom Code:
Learn to add Custom Code for more details.
Step 2. Add calendar button code from AddEvent
To use the AddEvent add-to-calendar button, create an account with AddEvent. Learn more
If your Kajabi site is connected to a custom domain, add your domain to your AddEvent account:
- Navigate to your AddEvent account.
- Click Domains from the left menu.
- Enter your full custom domain.
- Click Add domain:
After creating your AddEvent account and adding a Custom Code Block to your page on Kajabi, add the AddEvent Calendar Code Snippet.
- Copy the entire code exactly as shown below:
<html>
<head>
<!-- AddEvent script -->
<script type="text/javascript"
src="https://addevent.com/libs/atc/1.6.1/atc.min.js"
async defer></script>
</head>
<body>
<!-- Button code -->
<div title="Add to Calendar" class="addeventatc">
Add to Calendar
<span class="start">04/26/2020 06:00 PM</span>
<span class="end">04/26/2020 11:00 PM</span>
<span class="timezone">America/Los_Angeles</span>
<span class="title">Summary of the event</span>
<span class="description">Description of the event</span>
<span class="location">Location of the event</span>
</div>
</body>
</html>
- Then, navigate back to your Custom Code Block on Kajabi.
- Click the Custom Code Block to open the sidebar editor.
- Navigate to the sidebar panel and paste the copied code into the Custom Code field.
- Click Save to keep your changes:
Step 3. Edit your calendar event
To customize your Event information in your Add to Calendar Button:
- Locate this snippet of Code in your newly pasted Add to Calendar code:
<span class="start">04/26/2020 06:00 PM</span>
<span class="end">04/296/2020 11:00 PM</span>
<span class="timezone">America/Los_Angeles</span>
<span class="title">Summary of the event</span>
<span class="description">Description of the event</span>
<span class="location">Location of the event</span>
- Then, Configure the parameters within each line of code.
- Enter your Event information for each parameter as shown below:
- To learn more about formatting your parameters, click here.
- Be sure to click Save to keep your changes.
Calendar Parameters
Start Date and Time
<span class="start">04/26/2020 06:00 PM</span>
End Date and Time
<span class="end">04/26/2020 11:00 PM</span>
Timezone
<span class="timezone">America/Los_Angeles</span>
Title of Event
<span class="title">Summary of the event</span>
Description of the Event
<span class="description">Description of the event</span>
Location of the Event
<span class="location">Location of the event</span>
Learn more about customizing your Add to Calendar Button and including additional information to set alarm reminders, attach a Facebook event, include an organizer email, and more by visiting addevent.com.
Step 4. Customize your custom code block
After editing your Calendar Button to fit your Event, customize the appearance of your Block on your page! Learn to customize your Custom Code Block for details.
Remember to click Save to keep your changes!
Lastly, preview your page and test your new Calendar Button:
And that's how to install an Add to Calendar Button to your page! Please vote below and let us know if you found this article helpful. We value your feedback. Thanks for being the best part of Kajabi!