embed-sdk/buttons

by elfsight

HTML

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

<main>
  <!-- create the button container element in HTML -->
  <div id="container-1"></div>
</main>

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

<script>
  // get the container
  const container = document.querySelector('#container-1');
  const widgetContainer = document.querySelector('#widget-container-1');

  // define the callback for Create button
  const callback = (widget) => {
    // process the data for the configured user widget

    console.log(widget);

    // in this example the widget is simply displayed on the page
    widgetContainer.appendChild(widget.element);
  };

  // configure the button options
  const options = {
    type: 'create' // required. set the button action type
  };

  // initialize the button
  ElfsightEmbedSDK.displayButton(container, callback, options);

</script>

<hr>

<!-- additional advanced examples -->

<main>
  <div id="container-2"></div>
  <div id="container-3"></div>
  <div id="container-4"></div>
</main>

<main id="manage-buttons-container">
  <div id="container-5"></div>
  <div id="container-6"></div>
</main>

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

<script>
  const container2 = document.querySelector('#container-2');
  const container3 = document.querySelector('#container-3');
  const container4 = document.querySelector('#container-4');
  const container5 = document.querySelector('#container-5');
  const container6 = document.querySelector('#container-6');

  const widgetContainer2 = document.querySelector('#widget-container-2');
  const manageButtonsContainer = document.querySelector('#manage-buttons-container');

  const addWidgetEditButton = (widget) => {
    const onEdit = () => {
      // define the callback for Edit button

      console.log('edited!')
    };

    const editButtonOptions = {
      widgetId: widget.id, // required. set the managed widget
      size: 'medium'
    };

    // displayEditButton - button with predefined type 'edit'
...

CSS

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

main {
    max-width: 880px;
    margin: 2em auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

hr {
    width: 100%;
    height: 1px;
    margin: 0;
    background: #dedede;
    border: none;
}

main > div {
    margin: 6px 12px;
}