Using Private Schedules

In this Article:

  1. Add ECAL Widget
  2. Add the button HTML to your webpage

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://www.ecal.com/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

<button class='ecal-sync-widget-button' data-ecal-widget-id='INSERT_YOUR_WIDGET_ID'>
  Sync to Calendar
</button>
```               	| object  	| NO        	| "A JSON object that can be used to pass any additional information you would like to be present in the Webhook notification (if used). For example, internal IDs you might use to lookup the user in your own database, etc. 	|

**Example Usage**
```html
<!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>