Home
Getting Started
Button Code V2
Embed ECAL Button
In a Website
In an App
Advanced Embedding
In AngularJS
In AngularJS (Typescript)
In ReactJS/NextJS
Create Direct Link to Button
Configure ECAL Button
Using Schedule Reference
Using Category Path
Using Private Schedules
Embed Event Display
In a Website
Create Direct Link to Display
Button Code V1
Embed ECAL Button
In a Website
In an App
Advanced Embedding
In AngularJS
In AngularJS (Typescript)
In ReactJS/NextJS
Create Direct Link to Button
Configure ECAL Button
Using Schedule Reference
Using Category Path
Using Private Schedules
Embed Event Display
In a Website
Create Direct Link to Display
CRM Integration
Webhook Notifications
Data Delivery Service
Reference
API
Authentication
Account
Calendar
Event
Errors
Subscriber
Sync Display
Event Display
Genres
Timezones
Private Events
Tutorials
ECAL Appointment Reminders
ECAL Booking Reminders
ECAL Club Membership & Ticketing Reminders
ECAL My Favourites
ECAL My Travel Itinerary
ECAL Payment Reminders
ECAL Post-Purchase Reminders
ECAL Geo-specific Content
Troubleshoot
ECAL Marketing Pty Ltd © 2025
Overview
>
Getting Started
>
Button Code V2
>
Embed ECAL Button
> In an App
In this Article:
Configure ECAL Button
Configure Direct Link
Embed Direct Link
In an App
In this Article:
In this Article:
Configure ECAL Button
Configure Direct Link
Embed Direct Link
Configure ECAL Button
Create an ECAL Account and a new Button Display
Log into your ECAL Account and follow the prompts in the ‘Getting Started Guide’ to create and configure a new Button Display
Once created, ensure your button is set to ‘Live’
Configure Button Display and allow Users to subscribe
Publish your ECAL ‘Sync to Calendar’ Button
Once created, ensure your button is set to ‘Live’
Configure Direct Link
Click on the ‘Button Code’ in Button Display and make a note of:
Widget ID
API Key
Replace the placeholders in the link below
https
://
sync
.
ecal
.
com
/
schedules
?
apiKey
=
INSERT_YOUR_API_KEY
&
widgetId
=
INSERT_YOUR_WIDGET_ID
See ECAL’s
Direct Link API
for additional configuration options
Embed Direct Link
Use the Direct Link in your mobile app
For Android, open the Link inside a
Custom Tab
within the app. Refer to Google’s documentation on
CustomTabs
For iOS, open the Link inside a
SFSafariViewController
within the app. Refer to Apple’s documentation on
SFSafariViewController