In ECAL, Private Events are Events that only appear in the individual Subscriber’s calendar.
Start by adding 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 (https://admin.ecal.net/login).
After a User’s successful subscription, the email address supplied will be sent using a webhook notification by ECAL. You can then use it to add the User’s ecalId
to your existing customer record.
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' + '?t=' + Date.now());
(function(){function l() {
var w=window.ECAL_SYNC_WIDGET=EcalWidget.init({
apiKey: 'INSERT_YOUR_API_KEY',
email: 'INSERT_USER_EMAIL'
});
};(window.attachEvent?window.attachEvent('onload', l):window.addEventListener('load', l, false));
}());
</script>
Finally, add the ecal-sync-widget-button class and the data-ecal-widget-id attribute to the HTML element you would like to open the ECAL widget in a popup window when clicked.
Example HTML Code
<!DOCTYPE html>
<html>
<head>
<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");
window.addEventListener('load', function() {
ecalWidget = EcalWidget.init({
apiKey: 'INSERT_API_KEY',
email: 'user@example.com'
});
document.querySelector('.ecal-sync-widget-button').addEventListener('click', function() {
window.ecalWidget.show({
skip_schedule_selection: true
});
});
});
</script>
</head>
<body>
<button class='ecal-sync-widget-button' data-ecal-widget-id='INSERT_YOUR_WIDGET_ID' data-ecal-no-styling>Sync to Calendar</button>
</body>
</html>