Add Calendar and Events 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 attendance and engagement tool that makes it easy to share your events and calendars, getting users to add them to their calendars. Getting your event added to your website visitor’s 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, increasing your chances of conversion. 

AddEvent provides a simple and seamless way for your users to add your 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 have 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. Our tools include:

• Add to Calendar buttons for your Webflow website
• Dynamic Add to Calendar links for confirmation and reminder email campaigns
• AddEvent-hosted event or calendar landing pages
• RSVP functionality so you know who’s coming to your event
• Subscription calendars that let you add multiple events to a user’s calendar and sync them on an ongoing basis
• Embeddable widgets, including embeddable events, embeddable RSVP forms, embeddable calendars and embeddable events lists.

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).

How to Add an Add to Calendar Button to Your Webflow Website

Sign in to your AddEvent account

Start by logging in or creating an AddEvent account. You can choose the free Hobby plan or upgrade to a paid plan for access to more advanced features. You’ll find all plan details on our Plans and Pricing page.

Create your event

In your dashboard, click the Create button and select Event. On the Event Details page, enter your event information — date, time, description, and more. You can also enable RSVPs if you’d like to collect attendee info. When you’re done, click Create event to publish it.

Find the Add to Calendar button code

Once your event is live, you’ll be taken to the Event Details page. Scroll down to the Share your event section and look for the Add to Calendar Button. Click the + icon to open the sharing options.

Copy the embed code

You’ll have two ways to copy the button’s embed code for your Webflow site:

• Click the Copy icon in the top right of the code box
  
• Or click the < > icon in the bottom right to view and copy the HTML

AddEvent Pro Tip: Want your button to match your brand? You can customize the design, colors, and style to fit your website perfectly!

Now, head over to the Webflow website editor

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:

Find the Embeddable Event code

Once your event is live, you’ll be taken to the Event Details page. Scroll down to the sharing tools section and look for the Embeddable event. Click the Embed options button to open the sharing options.

Paste into your Webflow website editor

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 in action!

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 customize 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.

Turn on RSVP for your event

On the event page, make sure that RSVP is enabled. (In the RSVP Forms section, you can create a new form that includes the questions you want to ask, as well as the confirmation and reminder emails.) 

By default the Standard RSVP form asks for a user’s name and email address but you can customize it to include any information you want.

Copy the code for the Embeddable RSVP Form

Scroll down to the bottom of the page and click the Embed options but under to the Embeddable RSVP Form section.

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 live.

How to Add an Embeddable Calendar to Your Webflow Site

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!

Customize your calendar

In the AddEvent dashboard, click the calendar that you want to share. 

Once you are on the Calendar Detail Page, scroll down to the Share your calendar section and find the Embeddable Event List option. 

AddEvent offers full customization of the calendars via HTML, but you can also customize your Calendar Landing Page and Embeddable Calendar right in the app.

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.

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.

Use AddEvent’s Webflow Event Calendar App

If you’re building with Webflow, you value clean design, intuitive user experiences, and streamlined workflows. That’s exactly where the AddEvent Event Calendar App fits in. It’s lightweight, flexible, and built to integrate seamlessly into your design process.

Instead of juggling event updates across different platforms, you can manage everything once in AddEvent and have those changes instantly reflected on your website and in your subscribers’ calendars. It saves time, eliminates confusion, and ensures your audience always has the latest details.

From a single event to a full season of programming, the AddEvent Event Calendar App makes sharing your schedule simple. Add it to your Webflow site today and give your visitors an interactive, reliable way to stay connected to what’s next.

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!

FAQs