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',
})
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
});
Field | Type | Required | Notes |
---|---|---|---|
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>