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-sync-display-spa.js in app src where the React App Page can import or include it.

Example Embed Code

/*
 * EmbedEcalScripts enabled to only embed ecal once.
 */
const host = '//sync.ecal.com';
export function loadSyncDisplay (apikey) {
    if (!window.EcalWidget) {
      clearTimeout(window.loadSDTO);
      // debounce adding script on launch...
      window.loadSDTO = setTimeout(() => {
        const script = document.createElement('script');
        const src = `${host}/v2/ecal.widget.min.js?t=${Date.now()}}`;
        script.setAttribute('src', src);
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('data-ecal-apikey', apikey);
        script.setAttribute('data-ecal-spa', true);
        script.setAttribute('data-ecal-autoboot', false);
        const head = document.getElementsByTagName('head')[0];
        head.appendChild(script);
      },200);
    }
}

/*
* place this script on NextJS / ReactJS component that will render the sync button(s)
* call this function before the button is rendered.
*/
export function renderSyncDisplay (apikey) {
    loadSyncDisplay(apikey);
    clearTimeout(window.syncDisplayTO);
    function bootSyncDisplay () {
      const ecalBtns = document.getElementsByClassName('ecal-sync-widget-button');
      if (window.EcalWidget && ecalBtns.length > 0 && apikey) {
        window.EcalWidget('boot', { apiKey: apikey });
        return;
      }
      window.syncDisplayTO = setTimeout(bootSyncDisplay, 500);
    }
    window.syncDisplayTO = setTimeout(bootSyncDisplay, 500);
}

3: Import the renderEcalSyncButtons() helper function

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

import { renderSyncDisplay } from './ecal-sync-display-spa';

4: Call the renderEcalSyncButtons() helper function

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

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

5: Add Sync Button in the Component

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

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

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.