Quikly Components

You can use the Quikly tag to display custom components in multiple spots on your site.

Step 1: Ensure Quikly JS tag is present on landing page

Ensure the Quikly javascript tag is present on any landing page used with an activation link, as the tag will capture offer code from the URL and enable the offer for that visitor. This will not display anything on the page.

<script>
(function (w, d) {
  w.qData || (w.qData = function() {
    (w.qDataLayer = w.qDataLayer || []).push(arguments);
  });
  s = d.createElement('script');
  s.src = 'https://pixel.quiklydemo.com/embed/js';
  s.async = true;
  f = d.scripts[0];
  f.parentNode.insertBefore(s, f);
})(window, document);
qData('config', 'm/[your-config-key]');
</script>

Step 2: Displaying the Component

Include the code to render your component. The placements key should contain an array of component definitions.

<!-- Place this tag wherever you'd like to show the component -->
<div id="quikly-promo"></div>
<!-- Place this script anywhere on the page. This assumes you have the base tag above already installed. -->
<script>
qData('ui', { ids: ['campaignKey'], placements: [
  { component: 'feature', root: 'quikly-promo', position: 'inline' }
]);
</script>

Reminder: If you already include the base Quikly tag globally on your site, you only have to include the last line (qData('ui')...) on any page where you’d like to display the component.

Example: Bounceback Offer with Live Counter

This example demonstrates how to implement a bounceback offer that shows a banner with available offers and allows users to claim rewards post-purchase.

Implementation

1. Initial Setup with Offer Banner

Display a banner showing available offers using the offerTeaser component:

<!-- Base Quikly tag -->
<script>
(function (w, d) {
  w.qData || (w.qData = function() {
    (w.qDataLayer = w.qDataLayer || []).push(arguments);
  });
  s = d.createElement('script');
  s.src = 'https://pixel.quikly.com/embed/js';
  s.async = true;
  f = d.scripts[0];
  f.parentNode.insertBefore(s, f);
})(window, document);
qData('config', 'm/[your-config-key]');

// Display the offer banner
qData('ui', {
  ids: ['campaignKey'],
  placements: [
    { component: 'offerTeaser', root: 'quikly-banner', position: 'inline' }
  ]
});
</script>

<!-- Banner placement -->
<div id="quikly-banner"></div>

2. Trigger Reward Claim on Purchase

When a purchase is completed or reward event occurs, display the reward feature:

<!-- Reward container -->
<div id="quikly-embed"></div>

<script>
// Call this function when the reward event occurs (e.g., post-purchase)
function claimReward(userEmail) {
  qData('ui', {
    ids: ['campaignKey'],
    placements: [
      { component: 'rewardFeature', root: 'quikly-embed', position: 'inline' }
    ],
    email: userEmail
  });
}

// Example: Trigger on form submission
document.getElementById('purchase-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const email = document.getElementById('email').value;
  claimReward(email);
});
</script>

Key Features

• Live Counter: The offerTeaser component automatically displays and updates the number of available offers
• Reward Claiming: The rewardFeature component handles the reward claim process
• Email Association: Pass the user’s email when triggering the reward to associate it with their account
• Automatic Updates: The banner counter decreases automatically as rewards are claimed