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 (http://www.ecal.com/login) and navigating to the “Developers” > “API Keys” menu.

The email address supplied here will be present in the Webhook notification sent to you from ECAL following the User’s successful subscription so that you can match the User’s ecalId to your existing customer record.

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'
     });
    };(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.