Add calendar and event tools to your Webflow website with AddEvent. how-to

This tutorial will show you how to add an add-to-calendar button, an embeddable event widget, an RSVP form, a calendar, or an embeddable events list to your Webflow site.

AddEvent is an add-to-calendar service that makes it really easy to share your events and calendars and ensure that your users add them to their calendars. Getting your event added to a users calendar (whether they are a lead that’s just visited your website, an existing customer, or a user of your platform) increases the likelihood of them attending your events which increases your chances of conversion. AddEvent provides a simple and seamless way for your users to add the event to their calendar in a single click and supports all major calendar platforms including Google Calendar, Outlook Calendar, Outlook.com, Office 365, Apple Calendar and Yahoo Calendar.

Webflow is one of the most popular and easy-to-use website builders in the world with over 2 million users. They offer an all-in-one platform for building and hosting your website and has a CMS built in, which means you can design, build and launch your website in no time at all!

AddEvent offers a range of tools to help you enhance your website, improve user engagement and boost attendance at your events from your Webflow website:

• an add-to-calendar button for your Webflow website
• add-to-calendar links for your email campaigns (works with all major email campaign tools)
• an event or calendar landing page (hosted by us)
• RSVP functionality so you know who’s coming to your event
• subscription calendars that lets you add multiple events to a users calendar and sync them on an ongoing basis
• embeddable widgets including an embeddable event, an embeddable RSVP form, an embeddable calendar and an embeddable events list

The first thing that you will need to do is create an AddEvent account. There are several usage based plans to suit your needs (including a free Hobby plan for personal, non-commercial use).

Creating events and calendars

Before sharing your events or calendars, you’ll need to create them in the AddEvent dashboard. We also support creating and managing your calendars via our Calendar and Events API, and we have a Zapier integration as well.

• Create an event: In the dashboard, click the “Create” button in the top left hand corner and choose “Event”. Add your event details including the event name, time, event description, event location (include the meeting link here if it is a virtual meeting), calendar notifications/reminders for your users whether it is a recurring event and more.
• Create a calendar: In the dashboard, click the create button in the top left hand corner and choose “Calendar”. Once the calendar is created, you can add events to the calendar by following the steps above.

Note: You will need an active Webflow site plan to use the HTLM embed option which is what you will need to use to add the following tools to your Webflow site.

How to add an add-to-calendar button to your Webflow website

Try out a live add-to-calendar button by clicking on the link.

1. Navigate to the event page: Click on the event you want in the calendar view of the dashboard. In the pop-up that appears, click the “Event page” icon. At the top of the event page that opens you will see the event details that you entered earlier. Scroll down the page to see the sharing options.
2. Copy the add-to-calendar button code: Once you reach the “Add-to-calendar button” section, click the “Copy code” button to copy the code snippet for your website.
3. Paste the code into your Webflow site:
   • Click “Open designer” on your site in the Webflow dashboard and then click the “+” icon in the upper left hand corner.
   • Scroll down to the components section and drag the Embed option onto the website page where you want to place the add-to-calendar button or the embeddable event.
   • Paste your add-to-calendar button code in the code editor that appears and click “Save”. Open the website in preview mode to see the button in action!

How to add an embeddable event to your Webflow website

Adding an embeddable event to your website is a great way to display all your event details and draw attention to your event while still giving your users a quick and easy way to add it to their calendar.

Follow the same steps as above to navigate to the event page. Once you are there:

1. Copy the code for the embeddable event: Scroll down to the bottom of the page and click “Copy code” button for the embeddable event option.
2. Paste the code into your Webflow site:  
   • Click “Open designer” on your site in the Webflow dashboard and then click the “+” icon in the upper left hand corner.
   • Scroll down to the components section and drag the Embed option onto the website page where you want to place the add-to-calendar button or the embeddable event.
   • Paste your add-to-calendar button code in the code editor that appears and click “Save”. Open the website in preview mode to see the embeddable event on your Webflow site!

How to add an RSVP form to your Webflow website

When you create an event in AddEvent, you can enable RSVP for the event, which means that users must enter their details before adding the event to their calendar. You can customise the questions you ask them which is a great way of collecting information about them and knowing how many people will attend before your event.

Adding an embeddable RSVP form to your website is a great way to collect event registrations without your users ever needing to leave your website.

1. Turn on RSVP for your event: On the event page, make sure that RSVP is enabled. If not, click “Edit” and click on the checkbox next to “RSVP” to turn it on.
2. Add the questions you want to ask: By default the RSVP form asks for a users name and email address but you can customize it to include any information you want.
3. Copy the code for the embeddable RSVP form: Scroll down to the bottom of the page and click “Copy code” next to the Embeddable RSVP form option.
4. Paste the code into your Webflow site:
   • Click “Open designer” on your site in the Webflow dashboard and then click the “+” icon in the upper left hand corner.
   • Scroll down to the components section and drag the Embed option onto the website page where you want to place the add-to-calendar button or the embeddable event.
   • Paste your add-to-calendar button code in the code editor that appears and click “Save”. Open the website in preview mode to see the RSVP form on your page!

How to add an embeddable calendar to your Webflow website

AddEvent lets you share multiple events with your users at once by sharing an entire calendar of events. Embedding a full calendar on your website is a great way to showcase all of your upcoming events so you can be sure that your users won’t miss out!

1. Customize your calendar: In the AddEvent dashboard, click the three dots next to the name of the calendar that you want to share. Choose “Calendar page” from the options. Once you are on the calendar page, scroll down to the sharing methods and find the “Embeddable calendar” option. AddEvent offers full customization of the calendars via HTML, but you can also click the “Quick Customize” button to select which elements you want to include.
2. Copy the code: Once you have the calendar configured how you want, click the copy code button in the top right hand corner of the page.
3. Paste the code into your Webflow site:
   • Click “Open designer” on your site in the Webflow dashboard and then click the “+” icon in the upper left hand corner.
   • Scroll down to the components section and drag the Embed option onto the website page where you want to place the add-to-calendar button or the embeddable event.
   • Paste your add-to-calendar button code in the code editor that appears and click “Save”. Open the website in preview mode to see your embeddable calendar.

How to add an embeddable events list to your Webflow website

An embeddable events list is a great way of showing all your upcoming events without taking up as much space as a full calendar. You can also add some interesting and fun options like showing the event details directly on the events list or a countdown timer to build anticipation before your event!

1. Customize your events list: In the AddEvent dashboard, click the three dots next to the name of the calendar that you want to share. Choose “Calendar page” from the options. Once you are on the calendar page, scroll down to the sharing methods and find the “Embeddable events list” option. Click the the “Quick Customize” button to select which elements you want to include, and set up the events list how you want.
2. Copy the code: Once you have the events list configured how you want, click the copy code button in the top right hand corner of the page.
3. Paste the code into your Webflow site:
   • Click “Open designer” on your site in the Webflow dashboard and then click the “+” icon in the upper left hand corner.
   • Scroll down to the components section and drag the Embed option onto the website page where you want to place the add-to-calendar button or the embeddable event.
   • Paste your add-to-calendar button code in the code editor that appears and click “Save”. Open the website in preview mode to see your embeddable events list!

When you add an embeddable calendar or an embeddable events list to your website, users can also subscribe to the calendar. This means that all the events on your calendar get added and synced to their personal calendar so you can keep them updated with all your latest events! This is a fantastic way to build engagement with your users. You can also share a calendar directly via an add-to-calendar button, similar to a single event. Simply choose the Add-to-calendar button in the sharing options, copy the code as before and paste it into your Webflow website.