Getting Started

In this section

Button Code V2

(Released on 6th May 2025) Learn about installing ECAL widget and embedding ECAL Buttons and Direct Links

  • What does Button Code V2 look like?
<html lang="en">
    <head>
        <script src='//sync.ecal.com/v2/ecal.widget.js' data-ecal-apikey='INSERT_YOUR_API_KEY(Required)'></script>
    </head>
    <body>
        <button
            class='ecal-sync-widget-button'
            data-ecal-widget-id='INSERT_YOUR_WIDGET_ID(Required)'
            >
            Sync to Calendar
        </button>
    </body>
</html>

Button Code V1 (Legacy)

Learn about installing ECAL widget and embedding ECAL Buttons and Direct Links

  • What does Button Code V1 look like?
<html lang="en">
    <head>
    <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)'
            });}
            ;(window.attachEvent?window.attachEvent('onload', l):window.addEventListener('load', l, false));}());
    </script>
    </head>
    <body>
        <button
            class='ecal-sync-widget-button'
            data-ecal-widget-id='INSERT_YOUR_WIDGET_ID(Required)'
            >
            Sync to Calendar
        </button>
    </body>
</html>