embed-sdk/application-card

by elfsight

HTML

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

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

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

  // define the callback
  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
    document.body.appendChild(widget.element);
  };

  // configure the catalog options
  const options = {
    appAlias: 'instashow', // required
    buttonText: 'ADD',
    buttonIcon: 'plus'
  };

  // initialize card
  ElfsightEmbedSDK.displayCard(container1, callback, options);

</script>

<!-- additional examples -->

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

<script>
  const container2 = document.querySelector('#container-2');
  const container3 = document.querySelector('#container-3');

  ElfsightEmbedSDK.displayCard(container2, callback, {
    appAlias: 'facebook-feed',
    buttonText: 'Select Widget'
  });
  ElfsightEmbedSDK.displayCard(container3, callback, {
    appAlias: 'whatsapp-chat',
    buttonText: '',
    buttonIcon: 'search'
  });

</script>

CSS

body {
    margin: 0;
}

main {
    max-width: 400px;
    margin: 2em auto;
}