embed-sdk/widget-panel

by elfsight

HTML

<!-- add SDK -->
<script src="https://elfsight.com/embed-sdk.js"></script>

<main>
  <div id="button-wrapper">
    <h4>Add a widget to access the widget management panel</h4>
    <div id="button-container"></div>
  </div>

  <!-- create the panel container element in HTML -->
  <div id="panel-container"></div>

  <div id="widget-container"></div>
</main>

<script>
  const buttonContainer = document.querySelector('#button-container');
  const buttonWrapper = document.querySelector('#button-wrapper');
  const widgetContainer = document.querySelector('#widget-container');

  let userWidget = null;

  // first inittialize the widget button to be able to create your widget
  ElfsightEmbedSDK.displayCreateButton(buttonContainer, (widget) => {

    // log and save widget data
    console.log(widget);
    userWidget = widget;

    // hide the create widget button
    buttonWrapper.style.display = 'none';
    widgetContainer.appendChild(widget.element);

    // after the widget is ready tou can initialize the widget management panel

    // get the panel containers
    const panelContainer = document.querySelector('#panel-container');

    // define the panel callback
    const callbacks = {
      onEdit: (response) => {
        // logic on edit

        console.log('edited!');
      },
      onRemove: (response) => {
        // logic on remove

        // remove widget & panel and show the starter button again
        widgetContainer.innerHTML = '';
        panelContainer.innerHTML = '';
        userWidget = null;
        buttonWrapper.style.display = 'block';

        console.log('removed!');
      }
    };

    // configure the panel options
    const options = {
      widgetId: userWidget.id // required. set the widget id to manage
    };

    // initialize panel
    ElfsightEmbedSDK.displayPanel(panelContainer, callbacks, options);
  });

</script>

CSS

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

main {
    max-width: 880px;
    margin: 2em auto;
    text-align: center;
}

#button-container {
    display: flex;
    justify-content: center;
}