Back to Blog

How to Add an “Add to Calendar” Button to Your Framer Website

Friday, June 28th 2024 — Written By Yared

Adding an “Add to Calendar” button to your Framer website can significantly improve user engagement by allowing visitors to effortlessly save events to their personal calendars. Here’s a detailed guide on how to integrate this feature using CalGet:

Step-by-Step Guide to Adding "Add to Calendar" to Framer

Step 1: Create Your Event on CalGet

  1. Visit CalGet: Go to CalGet and create an event by providing essential details such as the event title, date, time, and description.

  2. Generate the Event Link: After setting up your event, CalGet will generate a unique URL that links to the calendar invitation. This link can be used for Google Calendar, Outlook, Apple Calendar, and more.

Step 2: Open Framer and Start Editing Your Site

  1. Log into Framer: Access your Framer account and open the project where you want to add the "Add to Calendar" button.

  2. Edit Your Site: Navigate to the section of your site where you want to place the button.

Step 3: Insert the Embed Code

  1. Insert Utility Block: Click on the “Insert” button at the top left of the Framer interface.

  2. Choose Utility and Embed: Select “Utility” from the options and then choose “Embed”.

  3. Embed HTML Code: In the Embed settings, you have two options:

    • Embed HTML Code: Copy the HTML embed code provided by CalGet and paste it into the Embed block in Framer.

    • Use Embeddable Link: Alternatively, you can use the direct URL from CalGet and link it to a button or text on your site.

Step 4: Customize Your Button

  1. Design the Button: Create a button or text in Framer where you want users to click to add the event to their calendar.

  2. Link the Button: Highlight the button or text and link it to the CalGet URL you generated earlier. Ensure the link text is clear and engaging, such as “Add to Calendar” or “Save the Date”.

Step 5: Publish and Test

  1. Publish Your Site: Once you’ve embedded the link, publish your site to make the changes live.

  2. Test the Feature: Visit your site and click the "Add to Calendar" button to ensure it works correctly and the event is added to your calendar as expected.

Tips for Success

  • Clear Call to Action: Make sure your "Add to Calendar" button is prominently displayed and the text clearly explains the benefit.

  • Responsive Design: Ensure the button works well on both desktop and mobile devices.

  • Test Across Platforms: Verify that the link works seamlessly across different calendar services and devices.

By following these steps, you can easily integrate an "Add to Calendar" button into your Framer website, enhancing user engagement and ensuring your events are well-attended.