Widget

In this Article:

  1. init() Method
  2. show() Method

API Methods

init()

This method initialises the widget so we can perform operations (such as show()) on the assigned JS object.

Example

ECALWidget.init({
  widgetId: 'INSERT_YOUR_WIDGET_ID',
  apiKey:   'INSERT_YOUR_API_KEY',
  email:    'user@example.com',
})

show()

Displays the widget

widget.show({
  email:                 'user@example.com',
  category:              ['path/to/category1','path/to/category2'],
  calendarIds:           ['4d6449d86c212173490001bf'],
  calendar_reference:    ['19374'],
  mobileNumber:          '61403123456',
  shareUrl:              'http://example.com/',
  referringPage:         'PurchaseConfirmationPage',
  autoSubscribe:         true
});

Parameters

Field Type Required Notes
email String NO Same as email for init()
category String NO Used to display schedules that match with specific categories. For e.g. setting category=Fixture/AU will select schedules that have the category value of Fixture/AU

An example of direct link: https//sync.ecal.com/button/v1/schedule/?widgetId={widget-ID}&apiKey={API-Key}&category={Fixture/AU}

Refer to Use of Category to see other ways of using this parameter
calendarIds Array [String] NO Only show a particular calendar based on its ID, when specified, the category option will be ignored
calendar_reference Array [String] NO Array of Strings. Only show Calendars (Schedules) with a reference present in this array. Calendar.reference can be set via the ECAL Admin or API.
mobileNumber String NO Mobile phone number, including its international country code
shareUrl String NO The URL for sharing on social networks
referringPage String NO A useful string for tracking and analytical purpose
doubleClickParameters Object NO DoubleClick ad parameters
autoSubscribe Boolean NO If true, widget will skip the schedule selection page so that user is subscribing to whatever schedules (CalendarIDs) have been passed to the widget.
skip_schedule_selection Boolean NO Set as true if you need Users to be able to Subscribe without selecting a Schedule.
state 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 Widget 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' + '?t=' + Date.now());
      (function(){function l() {
        var w=window.ECAL_SYNC_WIDGET=EcalWidget.init({
          apiKey: '2bb9b49cb2dfec08640fb6e6907cc96b5a0bd05deb662',
          email: 'joe.user@gmail.com'
        });
      };(window.attachEvent?window.attachEvent('onload', l):window.addEventListener('load', l, false));
      }());
    </script>
  </head>
  <body>
    <button class='ecal-sync-widget-button' data-ecal-widget-id='5a71604775961ed7068b4567' data-ecal-no-styling>Sync to Calendar</button>
  </body>
</html>