In ReactJS/NextJS

In this Article:

1: Get ECAL Widget details

You can get your ECAL widget details by logging into your ECAL Admin and navigating to the “Displays” > “Manage Displays” page. For the required button, click the icon to get the “Button Code”. Make a note of Widget ID and API Key (see below).

widget

2: Copy ecal-react.js file to your project

Copy the code snippet below as ecal-react.js in app src where the React App Page can import or include it.

Example Embed Code

/*
 * EmbedEcalScripts enabled to only embed ecal once.
 */
export function embedEcalScripts () {
    if (!window.EcalWidget) {
      !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());
    }
}

/*
* place this script on NextJS / ReactJS component that will render the sync button(s)
* call this function before the button is rendered.
*/
export function renderEcalSyncButtons (apikey) {
    embedEcalScripts();
    clearTimeout(window.ecalSyncRenderTimeout);
    function rebootWidgets () {
      const eCalButton = document.getElementsByClassName('ecal-sync-widget-button');
      if (window.EcalWidget &&
          eCalButton.length > 0 &&
          apikey) {
        window.EcalWidget('destroy');
        window.EcalWidget('boot', { apiKey: apikey });
        return;
      }
      // reboot ecal widget if isn't availble yet
      window.renderEcalSyncTO = setTimeout(rebootWidgets, 500);
    }
    window.ecalSyncRenderTimeout = setTimeout(rebootWidgets, 500);
}

3: Import the renderEcalSyncButtons() helper function

In the component file where your button sits, import the helper function renderEcalSyncButtons().

import { renderEcalSyncButtons } from './ecal-react'

4: Call the renderEcalSyncButtons() helper function

Pass the API Key here that you noted in step 1.

  • Functional Component Implementation
useEffect(() => {
  renderEcalSyncButtons('INSERT_YOUR_API_KEY');
}, []);
  • Class Component Implementation
componentDidMount () {
  renderEcalSyncButtons('INSERT_YOUR_API_KEY');
};

5: Add Sync Button in the Component

Finally, pass the Widget ID here that you noted in step 1.

return (
  <div>
    <button class='ecal-sync-widget-button' data-ecal-widget-id='INSERT_YOUR_WIDGET_ID'>
      Sync to Calendar
    </button>
  </div>
);

6: 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.