In a Website

In this Article:

  1. Add ECAL Widget
  2. Add the button HTML to your webpage
  3. Using your own styling for the button (Optional)

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.

To match the User’s ecalId to your existing customer record, you can set the corresponding email address and subscriber_reference. 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',
        email: 'INSERT_USER_EMAIL',
        subscriber_reference: 'INSERT_USER_REFERENCE',
     });
    };(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_WIDGET_ID'>Sync to Calendar</button>

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. To override this, simply add the data-ecal-no-styling attribute to the HTML element.

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