Using Category Path

In this Article:

  1. Add ECAL Widget
  2. Add the button HTML to your webpage
  3. Customise Category Paths

Categories provide a simple and effective way of filtering and grouping the schedules that are displayed by the ECAL widget:

1: Add ECAL Widget

Add the following code to the of your webpage, replacing the widgetId and apiKey values as directed below with those provided to you by ECAL. You can also find these by logging into your ECAL Admin (http://admin.ecal.com).

Example Embed Code

<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: 'INSERT_YOUR_API_KEY',
          widgetId: 'INSERT_YOUR_WIDGET_ID',
          subscriberReference: 'INSERT_USER_REFERENCE',
        });
      });
     });
       
</script>

2: Add the button HTML to your webpage

Finally, add the HTML element you would like to open the ECAL Popup when clicked. Including the additional attributes shown below and the Category Path you wish to use.

Example HTML Code

<button class='ecal-widget-button' data-ecal-widget-id='INSERT_YOUR_WIDGET_ID' data-ecal-category="INSERT_CATEGORY_PATH">
  Sync to Calendar
</button>

3: Customise Category Paths

  • You can pass multiple categories. For e.g. category=Men,Women. When multiple categories are passed, they are displayed as a drop-down on the widget,allowing the user to filter the calendars.

  • Categories feature also supports the use of {{ECAL_USER_COUNTRYCODE}} macro,which can be used to display country specific calendars. This macro is replaced with the country code of the user based on their IP address. For e.g. setting category=Fixture/{{ECAL_USER_COUNTRYCODE}} for Australian users will result in displaying schedules that match the category value of Fixture/AU.

Example HTML Code

<button class='ecal-sync-widget-button'data-ecal-category = '{{ECAL_USER_COUNTRYCODE}}/Team'data-ecal-widget-id={widget-id}>Sync to Calendar</button>