How to Install an Add to Calendar Button to Your Page

Kayla M.

Updated

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

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.

Have a custom domain connected to your Kajabi site?
To use an AddEvent button with your custom domain, you will need to register your custom domain with AddEvent. Adding your domain to AddEvent is available with AddEvent's free "Hobby" plan.

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

Note:
The add-to-calendar button is available with AddEvent's free "Hobby" plan!

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:

89B5C5DC-591F-4FEF-BDA2-B8038CCCCA35.png

After creating your AddEvent account and adding a Custom Code Block to your page on Kajabi, add the AddEvent Calendar Code Snippet.

Warning:
Introducing custom code to your site can open you up to vulnerabilities and potential malware attacks. We recommend using vulnerability tools like VirusTotal or Snyk to scan any custom code that you intend to use and apply certain best practices to help reduce potential impact.
  • 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>
Tip:
Expand your view of the Code by clicking and dragging the bottom right corner of the Text Box field in the left sidebar.
  • 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!

Did you find this article helpful?

Need more help?

Contact Us