Eventable provides an easy-to-use JavaScript plugin that allows you to embed a customized Add to Calendar button on any website:

<a href="LINK_TO_LANDING_PAGE" target="_blank" class="eventable-link" 
   data-key="COMPANY_ID"
   data-event="EVENT_ID(OPTIONAL)"
   data-style="BUTTON_TYPE(OPTIONAL)"
   data-target="ID_OF_CUSTOM_BUTTON(OPTIONAL)"
   data-categories="COMMA_SEPARATED_CATEGORY_IDS|all(OPTIONAL)"
   data-alias="USER_IDENTIFIER(OPTIONAL)"
   data-email-required="True|False(OPTIONAL)">Add to Calendar</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='//plugins.eventable.com/eventable.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script', 'eventable-script');</script>

Place the embed code between the <body> and </body> tags in your HTML. The buttons will appear wherever you place them in your website.

For more advanced customizations, here's a description of the various options:

Attribute Description
data-key Your Company ID. (required)
data-event If you would like users to ONLY add a single event when they click the button, specify the ID of that event here.
data-categories A comma separate list of Category IDs. Use this if you would like to pre-assign a set of categories to the user (they will not get a chance to change it) or the value "all" if you wish to share a feed of all your events.
data-style Number of custom styled button. Eventable provides a few different designs of buttons; you can toggle them by changing this value.
data-target HTML ID of a custom button object. If you don't want to use one of Eventable's buttons, you can create your own button and use this field to attach the Eventable script to it.
data-alias Custom-defined identifier. If you would like to track a user from your app within Eventable, use this field to store a unique user ID or email.
data-email-required Boolean operator that determines whether or not a user is required to input their (valid) email address before adding to calendar. Can be true or false.

However, if you cannot use JavaScript (i.e. are on a mobile app) or want to completely customize the user experience, you can send your users to the following URL: https://add.eventable.com/generate/{company_id}/?events[]={event_id}&categories[]={category_id}&opt_in={True|False}&alias={alias}&email={True|False}cal_type={gcal|outlook|yahoo|apple}Eventable will automatically create a new subscriber whenever a user visits this endpoint, and then redirect them to the appropriate calendar, as defined in cal_type.

If you have already created the subscriber object via the API, you can also send the user directly to the calendar at this URL: webcal://broadcast.eventable.com/{subscriber_id}.ics 

Note: we do not recommend using this method unless you are absolutely unable to process HTTP links.

Did this answer your question?