You can configure ECAL Buttons to subscribe a user directly to one or more Events without the need to select a Schedule.
Add the following code to the of your webpage, replacing the apiKey and email values as required. You can also find your API Key by logging into your ECAL Admin (http://www.ecal.com/login).
Example Embed Code
<script>
!function(e,t,n,c,i,a,s){i=i||'EcalWidget',e.EcalWidgetObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},a=t.createElement(n),s=t.getElementsByTagName(n)[0],e[i].u=c,a.async=1,a.src=c,s.parentNode.insertBefore(a,s)}(window,document,'script', '//sync.ecal.com/button/v1/main.js');
(function(){
function l() {
var w=window.ECAL_SYNC_WIDGET=EcalWidget.init({
apiKey: 'INSERT_YOUR_API_KEY'
});
};
(window.attachEvent?window.attachEvent('onload', l):window.addEventListener('load', l, false));
}());
</script>
Finally, add the following DOM attributes to the HTML element you would like to open the ECAL Popup when clicked.
Add data-ecal-calendar-reference field to the button HTML to subscribe the User to specific events. You can pass one or more of your EventIDs as a comma separated (,) string.
Finally, add the ecal-sync-widget-button class to the HTML element you would like to open the ECAL Popup when clicked.
Example HTML Code
<button class='ecal-sync-widget-button' data-ecal-widget-id='INSERT_YOUR_WIDGET_ID' data-ecal-calendar-reference='INSERT_YOUR_CALENDAR_REFERENCE'>
Sync to Calendar
</button>
If an event matching the EventID can’t be found in ECAL, the widget will automatically hide the button on page load.
Example Usage
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
!function(e,t,n,c,i,a,s){i=i||"EcalWidget",e.EcalWidgetObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},a=t.createElement(n),s=t.getElementsByTagName(n)[0],e[i].u=c,a.async=1,a.src=c,s.parentNode.insertBefore(a,s)}(window,document,"script","//sync.ecal.com/button/v1/main.js");
window.addEventListener('load', function() {
ecalWidget = EcalWidget.init({
apiKey: 'bun0cbw0',
email: 'user@example.com' // this is optional
});
});
</script>
</head>
<body>
<button id='add-to-calendar-button' class='ecal-sync-widget-button' data-ecal-widget-id='4e6262643b34e5e0fe4f5b76092675a55652d2ebb4837' data-ecal-calendar-reference='19374' data-ecal-no-styling>Add to Calendar</button>
</body>
</html>