UMD

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bitrix24 JS SDK Demo</title>
</head>
<body>
<h1>Company Loader Example</h1>
<p>Check developer console for results</p>

<script src="https://unpkg.com/@bitrix24/b24jssdk@3/dist/umd/index.min.js"></script>
<script>
  // Create logger
  const logger = B24Js.LoggerFactory.createForBrowser('B24/jsSdk::umd', true);

  /**
   * Load company list
   */
  async function loadCompanies(b24) {
    try {
      logger.debug('Loading companies...');

      const response = await b24.actions.v2.call.make({
        method: 'crm.item.list',
        params: {
          entityTypeId: B24Js.EnumCrmEntityTypeId.company,
          order: { id: 'desc' },
          select: ['id', 'title', 'createdTime']
        }
      });

      const data = response.getData().result;

      const companies = (data?.items || []).map((item) => {
        return {
          id: Number.parseInt(item.id),
          title: item.title,
          createdTime: B24Js.Text.toDateTime(item.createdTime) // @memo this is luxon/DateTime
        };
      });

      logger.debug('Companies loaded successfully', { companies });
      return companies;
    } catch (error) {
      logger.error('Request failed', { error });
      throw error;
    }
  }

  /**
   * Main application function
   */
  async function main() {
    try {
      // Initialize B24Frame instance
      let b24 = await B24Js.initializeB24Frame();

      // Load companies
      const companies = await loadCompanies(b24);

      // Further data processing...
      logger.info('Loaded ' + companies.length + ' companies');
    } catch (error) {
      logger.error('Some problems', { error })
    }
  }

  /// Start application after DOM load
  document.addEventListener('DOMContentLoaded', function() {
    main();
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>B24 UMD: user and placement</title>
</head>
<body>
<pre id="out">Loading…</pre>

<script src="https://unpkg.com/@bitrix24/b24jssdk@3/dist/umd/index.min.js"></script>
<script>
  const logger = B24Js.LoggerFactory.createForBrowser('umd-demo', true);
  const out = document.getElementById('out');

  async function main() {
    // 1. Initialize the frame
    const b24 = await B24Js.initializeB24Frame();
    b24.setLogger(B24Js.LoggerFactory.createForBrowser('Core'));

    // 2. Placement: delivered with the init data, no request needed
    const placement = {
      code: b24.placement.placement,        // 'DEFAULT', 'CRM_DEAL_DETAIL_TAB', ...
      isDefault: b24.placement.isDefault,
      isSliderMode: b24.placement.isSliderMode,
      options: b24.placement.options        // PLACEMENT_OPTIONS, e.g. { ID: '123' } on a CRM card
    };

    // 3. Current user: the user.current REST method
    const response = await b24.actions.v2.call.make({ method: 'user.current', params: {} });
    if (!response.isSuccess) {
      throw new Error(response.getErrorMessages().join('; '));
    }
    const u = response.getData().result;

    const info = {
      portal: b24.getTargetOrigin(),
      lang: b24.getLang(),
      isAdmin: b24.auth.isAdmin,
      user: { id: Number(u.ID), name: u.NAME, lastName: u.LAST_NAME, email: u.EMAIL },
      placement
    };

    logger.info('Frame info', info);
    out.textContent = JSON.stringify(info, null, 2);
  }

  document.addEventListener('DOMContentLoaded', () => {
    main().catch((error) => {
      logger.error('Init failed', { error });
      out.textContent = 'Error: ' + (error?.message || error);
    });
  });
</script>
</body>
</html>