Using Private Schedules

In this Article:

In ECAL, Private Events are Events that only appear in the individual Subscriber’s calendar.

1: Add ECAL Widget

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>

2: Add the button HTML to your webpage

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>