Welcome to AddEvent. Our tools make it easy for you to share your events and calendars using our amazing "add to calendar" buttons, beautiful embeddable widgets, and powerful RSVP and subscriber tools.
Check out our "add to calendar" button on the page below then go ahead and sign up when you're ready to get started! Our tools are easy to use for everyone, even if you're non-technical.
Automated
for websites
This tool provides a quick and effortless way for your users to add your events to their calendars. When you add an “add to calendar” button to your website, you increase the likelihood that your users will add your event to their calendars by reducing the time and effort required to do so. Read more
Example:
Please notice This button is for singular events.
We also have an add to calendar button (for calendars).
Install on a website, parameters and attributes
<html>
<head>
<!-- AddEvent script -->
<script type="text/javascript" src="https://cdn.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">10/19/2024 08:00 AM</span>
<span class="end">10/19/2024 10:00 AM</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>
Use the advanced settings to change labels in the dropdown and control button behaviour.
<html>
<head>
<!-- AddEvent script -->
<script type="text/javascript" src="https://cdn.addevent.com/libs/atc/1.6.1/atc.min.js" async defer></script>
<!-- AddEvent Settings -->
<script type="text/javascript">
window.addeventasync = function(){
addeventatc.settings({
appleical : {show:true, text:"Apple Calendar"},
google : {show:true, text:"Google <em>(online)</em>"},
office365 : {show:true, text:"Office 365 <em>(online)</em>"},
outlook : {show:true, text:"Outlook"},
outlookcom : {show:true, text:"Outlook.com <em>(online)</em>"},
yahoo : {show:true, text:"Yahoo <em>(online)</em>"}
});
};
</script>
</head>
<body>
<!-- Button code -->
<div title="Add to Calendar" class="addeventatc">
Add to Calendar
<span class="start">10/19/2024 08:00 AM</span>
<span class="end">10/19/2024 10:00 AM</span>
<span class="timezone">America/Los_Angeles</span>
<span class="title">Summary of the event</span>
<span class="description">Description of the event</span>
</div>
</body>
</html>
Parameters
Use the event listeners to capture button and dropdown events. Usable for e.g. Google Analytics.
/* Attach events after the button has been loaded */
window.addeventasync = function(){
/* Capture click on button */
addeventatc.register('button-click', function(obj){
/* Log */
console.log('button-click -> ' + obj.id);
});
/* Capture mouseover on button */
addeventatc.register('button-mouseover', function(obj){
/* Log */
console.log('button-mouseover -> ' + obj.id);
});
/* Capture mouseout on button */
addeventatc.register('button-mouseout', function(obj){
/* Log */
console.log('button-mouseout -> ' + obj.id);
});
/* Capture when dropdown is being displayed */
addeventatc.register('button-dropdown-show', function(obj){
/* Log */
console.log('button-dropdown-show -> ' + obj.id);
});
/* Capture when dropdown is being hidden */
addeventatc.register('button-dropdown-hide', function(obj){
/* Log */
console.log('button-dropdown-hide -> ' + obj.id);
});
/* Capture when an option in the dropdown is clicked */
addeventatc.register('button-dropdown-click', function(obj){
/* Log */
console.log('button-dropdown-click -> ' + obj.id + ', service -> ' + obj.service);
/* Track event click with e.g. Google Analytics (using analytics.js)
https://developers.google.com/analytics/devguides/collection/analyticsjs/events */
ga('send', 'event', 'MyEvent', 'play', 'Fall Campaign');
});
};
Parameters
In our dedicated themes section, you can find 18 different pre-built themes in white- and dark mode hosted on our CDN. View the example code, copy it, add it to your website, and you are ready to go.
Below you'll find some of the most asked questions.
We're happy to help you out in case you have any questions not listed above. Check out our Help Center or get in touch with Support.