Script Tag Embed

Quick Start

Add these two lines anywhere in your HTML. The script auto-discovers the container div, creates an iframe, and renders your engagement.

<!-- Bricqs Embed, add anywhere in your HTML -->
<script src="https://runtime.bricqs.co/embed.js"></script>
<div data-bricqs-id="YOUR_ENGAGEMENT_UUID"></div>

How It Works

Data Attributes

Configure the embed behavior with HTML data attributes on the container div.

<div
  data-bricqs-id="a1b2c3d4-e5f6-7890-abcd-ef1234567890"
  data-bricqs-height="600px"
  data-bricqs-width="100%"
  data-bricqs-title="Weekly quiz"
></div>

Event Callbacks

Listen for events from the embedded engagement using the global window.Bricqs API or PostMessage.

<script src="https://runtime.bricqs.co/embed.js"></script>
<div data-bricqs-id="YOUR_ENGAGEMENT_UUID"></div>

<script>
  // window.Bricqs (capital B) is available once embed.js loads.
  // .on() takes SHORT alias names; callbacks receive (payload, instanceId).

  // Activity completed (quiz answered, form submitted, etc.)
  Bricqs.on('activity:complete', function (data) {
    // data: { activityId, activityType, result?, actionResults? }
    console.log('Activity done:', data.activityType);
  });

  // Points awarded
  Bricqs.on('points', function (data) {
    // data: { points, newBalance }
    document.getElementById('my-points').textContent = data.newBalance;
  });

  // Badge unlocked
  Bricqs.on('badge', function (data) {
    // data: { badgeCode, badgeName? }
    showToast('You earned ' + (data.badgeName || data.badgeCode));
  });

  // Reward claimed (coupon code, voucher, etc.)
  Bricqs.on('reward', function (data) {
    // data: { rewardName, rewardType, codeValue? }
    if (data.codeValue) showCouponModal(data.rewardName, data.codeValue);
  });

  // Tier changed
  Bricqs.on('tier', function (data) {
    // data: { tierCode, tierName, tierLevel }
    console.log('New tier:', data.tierName);
  });
</script>

window.addEventListener('message', function (event) {
  var data = event.data;
  // Messages are { source: 'bricqs', type, payload } — source and type
  // are separate fields (there is no 'bricqs:<event>' naming scheme).
  if (!data || data.source !== 'bricqs') return;

  if (data.type === 'activity:completed') {
    console.log('Activity completed:', data.payload);
  }
  if (data.type === 'points:awarded') {
    console.log('Points awarded:', data.payload.points);
  }
  if (data.type === 'reward:claimed') {
    console.log('Reward code:', data.payload.codeValue);
  }
});

Programmatic API

Control the embed programmatically after initialization.

// Render into a container you control (instead of data attributes).
// Per-instance callbacks use the same payload shapes as Bricqs.on().
var instanceId = Bricqs.render({
  id: 'YOUR_ENGAGEMENT_UUID',        // required
  container: '#my-quiz',             // CSS selector or DOM element
  height: 'auto',                    // 'auto' (default), number, or CSS value
  width: '100%',
  onReady: function () { console.log('loaded'); },
  onActivityComplete: function (data) { console.log(data.activityType); },
  onPointsAwarded: function (data) { console.log('+' + data.points); },
  onBadgeUnlocked: function (data) { console.log(data.badgeCode); },
  onTierChanged: function (data) { console.log(data.tierName); },
  onRewardClaimed: function (data) { console.log(data.rewardName); },
});

// Global listeners receive (payload, instanceId) so you can tell
// multiple embeds apart:
Bricqs.on('points', function (data, fromInstance) {
  if (fromInstance === instanceId) { /* this embed */ }
});

Multiple Embeds on One Page

You can embed multiple engagements on the same page. Each gets its own iframe and session.

<script src="https://runtime.bricqs.co/embed.js"></script>

<!-- Quiz widget -->
<div data-bricqs-id="quiz-uuid-here"></div>

<!-- Spin wheel widget -->
<div data-bricqs-id="spinwheel-uuid-here"></div>

<!-- Leaderboard widget -->
<div data-bricqs-id="leaderboard-uuid-here"></div>

The script only needs to be included once. It discovers all containers on the page.

Platform Examples

<!-- WordPress Custom HTML Block -->
<script src="https://runtime.bricqs.co/embed.js"></script>
<div data-bricqs-id="YOUR_ENGAGEMENT_UUID" style="max-width: 600px; margin: 0 auto;"></div>

<!-- Shopify Custom Liquid Section -->
<script src="https://runtime.bricqs.co/embed.js"></script>
<div
  data-bricqs-id="YOUR_ENGAGEMENT_UUID"
  data-bricqs-user-id="{{ customer.id }}"
  data-bricqs-user-email="{{ customer.email }}"
  data-bricqs-user-name="{{ customer.first_name }}"
></div>

<!-- In <head> or before </body> -->
<script src="https://runtime.bricqs.co/embed.js"></script>

<!-- Embed element in your layout -->
<div data-bricqs-id="YOUR_ENGAGEMENT_UUID"></div>

Content Security Policy (CSP)

If your site uses a Content Security Policy, add these directives:

Content-Security-Policy:
  script-src 'self' https://app.bricqs.co;
  frame-src 'self' https://app.bricqs.co;
  connect-src 'self' https://api.bricqs.co;

Troubleshooting