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. If a user doesn’t add your event to their calendar you might as well have not told them about it, and AddEvent provides a simple and seamless way for your users to add the event to their calendar in a single click. AddEvent supports all major calendar platforms including Google Calendar, Outlook Calendar, Outlook.com, Office 365, Apple Calendar and Yahoo Calendar.
AddEvent offers a range of tools to help you do this:
- 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
These tools can enhance your website, improve conversions on your email campaigns, raise awareness and boost attendance at your events.
This tutorial will show you how to add an add-to-calendar button, or an embeddable widget to your Webflow website.
Adding an add-to-calendar button or an embeddable event to your Webflow website
- Create an account: the first thing that you will need to do is create an account on https://www.addevent.com/. There are several usage-based plans to suit your needs (including a free Hobby plan for personal, non-commercial use).
Before sharing your event or calendar, you’ll need to create them in the dashboard. We also support creating and managing events and calendars via our Calendars and Events API, and we have a Zapier integration as well.
-
Create your events: in the dashboard, click the create button, then choose “Event”. Add your event details including a name, time, event description, event location, calendar reminder/notifications, recurring events and more. You can also choose to enable RSVP functionality, which means that users will need to register for the event before they can add it to their calendar. You can choose what information you want to collect when you do that.
-
Share your event: choose how you want to display your event on your website - for your Webflow site, the most suitable options are either the add-to-calendar button, or the embeddable event. Simply copy the code from the event page on AddEvent, and open the Webflow dashboard. These tools are both fully customizable via HTML to match the style/theme of your website.
- Paste the code on 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. (Note: you will need an active Webflow site plan to use the HTML embed option).
Adding an RSVP form or an RSVP button to your website.
AddEvent also lets you add an embeddable RSVP form to your website. To do this, simply tick the RSVP box when you are creating an event (or edit your event and turn it on). When you enable RSVP for an event, users must enter their details and click “Register” before adding the event to their calendar. Once you enable RSVP for an event, the add-to-calendar button turns into an RSVP button, and the embeddable event becomes an embeddable RSVP form. Simply follow the same steps as before to add the RSVP button or the RSVP form to your website.
Sharing multiple events at once
If you want to share multiple events at once, you can also share a calendar using the add-to-calendar button. To do this, simply create your events in the dashboard as before.
- Click the three dots next to the calendar name, and choose “Calendar page” from the list of options.
- Scroll down to the add-to-calendar button option and click “Copy” to copy the code. Navigate back to your Webflow website designer and paste the code, using the "Embed option as before (See step 4 above).
Embeddable calendars and embeddable events lists.
Adding a full calendar or a list of upcoming events to your website is a great way to keep your users informed of all your upcoming events, and with AddEvent, they can also add the events to their calendars directly from your calendar or events list which increases the chance that they will remember to attend your events.
The embeddable calendar offers a full month or week view of your events, while the embeddable events list shows your next upcoming events (you can choose how many) and has some cool features like a countdown timer.
- Create a calendar and your events in the dashboard.
- Click the three dots next to the calendar name and choose “Calendar page” from the list of options.
- Scroll down through the sharing options until you come to “Embeddable calendar” or “Embeddable events list”. For both of these embeddable widgets we offer quick customization options that allow you to choose what features you want to include, and for the embeddable calendar, we also offer full customization via HTML.
- Once your customization is complete, copy the code and navigate to your Webflow site.
- Paste the code on 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 embeddable calendar or embeddable events list. (Note: you will need an active Webflow site plan to use the HTML embed option).