Overview

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.

1<script>
2(function (w, d) {
3  w.qData || (w.qData = function() {
4    (w.qDataLayer = w.qDataLayer || []).push(arguments);
5  });
6  s = d.createElement('script');
7  s.src = 'https://pixel.quiklydemo.com/embed/js';
8  s.async = true;
9  f = d.scripts[0];
10  f.parentNode.insertBefore(s, f);
11})(window, document);
12qData('config', 'm/[your-config-key]');
13</script>

Step 2: Displaying the Component

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

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