Elfsight Embed SDK

Buttons

const options = {
  type: 'create', // string,required: 'create' | 'edit' | 'remove' | 'custom'/null
  size: 'big' // string: 'big' | 'medium' | 'small'
  style: 'primary', // string: 'primary' | 'outline'
  backgroundColor: '#f93262',
  textColor: '#fff',
  borderColor: false,
  text: 'Add Widget', // string
  icon: 'glyph' // string: 'glyph' | 'edit' | 'plus' | 'trash' | 'search'
}

const container = document.querySelector('#button-container');
const handler = (response) => {
  // your logic
};

ElfsightEmbedSDK.displayButton(container, handler, options);

Widget Panel

const options = {
  widgetId: widgetId, // string,required
  size: 'big' // string: 'big' | 'medium' | 'small'
}

const container = document.querySelector('#button-container');
const handler = (response) => {
  // your logic
};

ElfsightEmbedSDK.displayButton(container, handler, options);

Popup

const popupContent = `
  <div>
    <h2>Hello world!</h2>
    <p>This is a popup</p>
  </div>
`;

ElfsightEmbedSDK.displayPopup(popupContent);

Applications Catalog

const container = document.querySelector('#catalog-container');
const options = {
  title: 'Add Widget',
  searchPlaceholder: 'Search by Widget Name',
  searchEnabled: true,
  height: 'auto',
  category: null
};
const handler = (response) => {
  // your logic
};

ElfsightEmbedSDK.displayCatalog(container, handler, options)

Application Card

const container = document.querySelector('#card-container');
const options = {
  appAlias: 'app-alias',
  buttonText: 'ADD'
};
const handler = (response) => {
  // your logic
};

ElfsightEmbedSDK.displayCard(container, handler, options)

Preview

const container = document.querySelector('#preview-container');
const options = {
  appAlias: 'app-alias'
};

ElfsightEmbedSDK.displayCard(container, options)

const container = document.querySelector('#widget-container');

ElfsightEmbedSDK.displayWidget(container, widgetId)