Usage:
Leverages the Eventable.com third-party plugin to enable add to calendar functionality for Emerson event content. Embed code snippet is added to the RTE of CoreMedia Content Block components to display a text button with a “+” icon.
On desktop, hover interaction reveals a Calendar App menu allowing users to choose to save the event details to their preferred application. On tablet/mobile, click interaction will download an .ics file users can save to their device’s native calendar app.
Approved content authors can use the following code snippet and instructions to create a unique Add to Calendar button for their page or content.
Instructions:
Visit https://add.eventable.com/free-add-to-calendar-button to generate a new calendar event embed code.
Replace the example embed code in the snippet below with your newly created embed code. In your pasted embed code's link tag, complete the following steps:
1. Remove data-style="1"
2. Add data-target="your-custom-event-id"
3. Add style="display:none;"
Give your event a unique and distinctive ID. Replace "your-custom-event-id" in both the button element ID and the embed code data-target attribute values with your new event ID.
<div class="add-to-calendar-wrapper">
<button class="cta--add-to-calendar" id="[HL]your-custom-event-id[/HL]">Add to Calendar</button>
<!--REPLACE THIS EXAMPLE WITH YOUR NEW EMBED CODE-->
<a href="https://add.eventable.com/events/533e7eba6a26df16a1bcb445/535548006a26df5c73d767aa/" data-event="535548006a26df5c73d767aa" class="eventable-link" target="_blank" data-key="533e7eba6a26df16a1bcb445" [HL]data-style="1"[/HL] [HL]data-target="your-custom-event-id"[/HL] [HL]style="display:none"[/HL]>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="https://plugins.eventable.com/eventable.js";fjs.parentNode.insertBefore(js, fjs);}}(document, "script", "eventable-script");</script>
<!--END EMBED CODE-->
</div>
