Getting Started

This page covers everything you need to integrate Embed Elements into your application.

1. Get Credentials

To use Embed Elements you need a session_key, user_id, and my_price_app_host. Obtain these through Spaaza’s authentication and login endpoints.

2. Import

import { initializeSpaazaElements } from 'https://elements-test01.spaaza.com/elem/spaaza-elements.js';

Staging: elements-test01.spaaza.com · Production: elements.spaaza.com

3. Initialize

initializeSpaazaElements() mounts web components, fetches data, and handles user actions. The two examples below show how to initialize with either the page or the detail view component. See Bootstrapped DOM Structure for the mounted component tree.

Page View

Displays zones with campaigns, vouchers, and member cards. Use initializeSpaazaElements() with a pageName:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spaaza Elements - Page</title>
</head>
<body>
  <div id="spaaza-elements"></div>

  <script type="module">
    import { initializeSpaazaElements } from 'https://elements-test01.spaaza.com/elem/spaaza-elements.js';

    const params = new URLSearchParams(window.location.search);

    const controller = await initializeSpaazaElements({
      target: '#spaaza-elements',
      config: {
        origin: params.get('origin') || 'https://apistage0.spaaza.com',
        auth: {
          sessionKey: params.get('session_key') || 'YOUR_SESSION_KEY',
          userID: params.get('user_id') || 'YOUR_USER_ID',
          myPriceAppHost: params.get('my_price_app_host') || 'yourapp.spaaza.com'
        }
      },
      pageName: params.get('name') || 'home',
      componentBaseUrl: 'https://elements-test01.spaaza.com/',
      customZones: {
        membercard: { pages: ['home'], index: 0 },
        voucher: { pages: ['home'], index: 1 }
      }
    });
  </script>
</body>
</html>

Or pass it through the URL:

your-page.html?session_key=KEY&user_id=ID&my_price_app_host=yourapp.spaaza.com&name=home

Detail View

Displays a single campaign or voucher in card format on top, with room for extra information below it. Use initializeSpaazaElements() with a campaignId or voucherId:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spaaza Elements - Detail</title>
</head>
<body>
  <div id="spaaza-elements"></div>

  <script type="module">
    import { initializeSpaazaElements } from 'https://elements-test01.spaaza.com/elem/spaaza-elements.js';

    const params = new URLSearchParams(window.location.search);

    const controller = await initializeSpaazaElements({
      target: '#spaaza-elements',
      config: {
        origin: params.get('origin') || 'https://apistage0.spaaza.com',
        auth: {
          sessionKey: params.get('session_key') || 'YOUR_SESSION_KEY',
          userID: params.get('user_id') || 'YOUR_USER_ID',
          myPriceAppHost: params.get('my_price_app_host') || 'yourapp.spaaza.com'
        }
      },
      // choose either one
      campaignId: Number(params.get('campaign_id')) || undefined,
      voucherId: Number(params.get('voucher_id')) || undefined,
      componentBaseUrl: 'https://elements-test01.spaaza.com/'
    });
  </script>
</body>
</html>

Or pass it through the URL:

your-page.html?session_key=KEY&user_id=ID&my_price_app_host=yourapp.spaaza.com&campaign_id=4911

Vouchers and Member Cards

Vouchers and member cards are displayed using custom zones. Configure which pages show them and where they appear using the customZones option. See Custom Zones for details.

The controller emits content:select events when users click content. Your application decides what to do. For example, open a detail page, navigate to an internal page, or open an external website. See Navigation for the navigation contract and Navigation Examples for implementation patterns.