Using Event Reference

In this Article:

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

You can configure ECAL Buttons to subscribe a user directly to one or more Events without the need to select a Schedule.

1: Add ECAL widget

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>

2: Add the button HTML to your webpage

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>