Using Schedule Reference

In this Article:

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 value as required. You can also find your API Key by logging into your ECAL Admin (http://admin.ecal.net/login).

Example Embed Code

<script src='//sync.ecal.com/v2/ecal.widget.js' data-ecal-apikey='INSERT_YOUR_API_KEY'></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 src='//sync.ecal.com/v2/ecal.widget.js' data-ecal-apikey='INSERT_YOUR_API_KEY'></script>
  </head>
  <body>
    <button
      class='ecal-sync-widget-button'
      data-ecal-widget-id='INSERT_YOUR_WIDGET_ID'
      data-ecal-calendar-reference='INSERT_YOUR_CALENDAR_REFERENCE'
      data-ecal-email='INSERT_YOUR_EMAIL' // this is optional
      data-ecal-no-styling
      >
      Add to Calendar
    </button>
  </body>
</html>