| Field | Type | Required | HTML Attribute | Query Url | Code functions | Notes |
|---|---|---|---|---|---|---|
| string | NO | data-ecal-email=“test@test.com” | &email=test@test.com | email: “test@test.com” | Same as email for init() | |
| category | string | NO | data-ecal-category=“category1, category2” | &category=“category1, category2” | category: “category1, category2” | 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 | HTML Attribute: string Query Url: array [string] Code Functions: array [string] | NO | data-ecal-calendar-ids=“id1, id2, id3” | &calendarIds=[“id1”, “id2, “id3”] | calendarIds: [“id1”, “id2, “id3”] | Only show a particular calendar based on its ID, when specified, the category option will be ignored |
| calendar_reference | HTML Attribute: string Query Url: array [string] Code Functions: array [string] | NO | data-ecal-calendar-reference=“reference1, reference2, reference3” | &calendar_reference=[“reference1”, “reference2”, “reference3”] | calendar_reference:[“reference1”, “reference2”, “reference3”] | 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. |
| referringPage | string | NO | data-ecal-referring-page=“www.ecal.com” | &referringPage=https://ecal.com | referringPage: “https://ecal.com” | A useful string for tracking and analytical purpose |
| subscriber_reference | string | No | data-ecal-subscriber-reference=“user reference” | &subscriber_reference=user reference | subscriber_reference: ‘user reference’ | A useful string for tracking and analytical purpose |
| state | HTML Attribute: string Query Url: object [string] Code Functions: array [string] | NO | data-ecal-state=“anything” | &state= { category: [“Category2”, “Category1”] } | state: { category: [“Category2”, “Category1”] } | 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. |
| autoSubscribe | boolean | NO | data-ecal-autosubscribe | &autoSubscribe=true | autoSubscribe: true | 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 | data-ecal-skip-schedule-selection | &skip_schedule_selection=true | skip_schedule_selection: true | Set as true if you need Users to be able to Subscribe without selecting a Schedule. |
| autoshow | boolean | NO | data-ecal-autoshow | NA | NA | Add into ECAL button tag if you need the Sync display automatically showing up. |
| data-ecal-no-styling | boolean | NO | data-ecal-no-styling | NA | NA | Add into ECAL button tag if you need to customise the preview button design. |
Example Code
<!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_WIDGET_ID'
data-ecal-email='INSERT_USER_EMAIL'
data-ecal-subscriber-reference='INSERT_SUBSCRIBER_REFERENCE'
>
Sync to Calendar
</button>
</body>
</html>
Example Code
https://sync.ecal.com/schedules?apiKey=INSERT_YOUR_API_KEY&widgetId=INSERT_YOUR_WIDGET_ID
&category=Fixture/{{ECAL_USER_COUNTRYCODE}} // Optional
&subscriber_reference=user reference // Optional
&email=test@test.com // Optional
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',
subscriber_reference: 'user reference',
})
Displays the widget
ECALWidget.show({
email: 'user@example.com',
category: ['path/to/category1','path/to/category2'],
calendarIds: ['4d6449d86c212173490001bf'],
calendar_reference: ['19374'],
referringPage: 'PurchaseConfirmationPage',
autoSubscribe: true
});
Example Code
<!DOCTYPE html>
<html>
<head>
<script src='//sync.ecal.com/v2/ecal.widget.js' data-ecal-apikey='INSERT_YOUR_API_KEY' data-ecal-script-onload="initSyncDisplay"></script>
<script>
function initSyncDisplay () {
window.EcalSyncWidget = EcalWidget.init({
email: 'INSERT_USER_EMAIL',
subscriber_reference: 'INSERT_SUBSCRIBER_REFERENCE',
});
}
</script>
</head>
<body>
<button
class='ecal-sync-widget-button'
data-ecal-widget-id='INSERT_WIDGET_ID'
>
Sync to Calendar
</button>
</body>
</html>