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">05/31/2022 08:00 AM</span>
<span class="end">05/31/2022 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">05/31/2022 08:00 AM</span>
<span class="end">05/31/2022 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
AddEvent can be customized to look any way you like it. If you find a theme that fits your needs you can download an example below and use it locally. All examples contains sourcecode, stylesheet and images.
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.