In a Website

In this Article:

1: Add ECAL Widget

Add the following code to the <HEAD> of your webpage, replacing the apiKey, widgetId and email values as required.

You can find your API Key by logging into your ECAL Admin and navigating to the “Developers” > “API Keys” menu.

Optional feature: To prefill the user’s email in the widget if it is already known, you can set the corresponding email address. To match the User’s ecalId to your existing customer record, you can set the subscriber_reference value. If set, this information will be sent in the Webhook notification back to you from ECAL following after the User successfully completes the subscription.

Example Embed Code

<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: 'INSERT_YOUR_API_KEY(Required)',
        email: 'INSERT_USER_EMAIL(Optional)',
        subscriber_reference: 'INSERT_USER_REFERENCE(Optional)',
     });
    };(window.attachEvent?window.attachEvent('onload', l):window.addEventListener('load', l, false));
    }());
</script>

To find your widgetId, edit your widget in the ECAL Admin. The widgetId is displayed at the bottom of the popup window (see example below).

widget

2: Add the button HTML to your webpage

Finally, add the ecal-sync-widget-button class and the data-ecal-widget-id attribute to the HTML element you would like to open the ECAL Popup when clicked.

Example HTML Code:

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

The ecal-sync-widget-button class name is connected to the Javascript snippet above. Removal or overwrite of this will cause failure during the popup.

3: Using your own styling for the button (Optional)

By default, the HTML element you apply the ecal-sync-widget-button class to will be replaced with the default ECAL button styling. To override this, simply add the data-ecal-no-styling attribute to the HTML element.

    <button class='ecal-sync-widget-button' data-ecal-widget-id='INSERT_YOUR_WIDGET_ID' data-ecal-no-styling>Sync to Calendar</button>

For further information on any of the above, refer to the detailed API reference or contact ECAL support using the chat in your ECAL Admin or support@ecal.com.