How to Add Gift Cards to Your Website

Getting to the Embedded Checkout Page

Tab 1: Embed Code & Link

The Embed Code & Link tab is where you'll spend most of your time. It has four sections:

1. Embed Code

At the top you'll see a dark code block containing your personalised embed snippet. It looks something like this:

<div class="giftcard-checkout"
  data-site-id="your-site-id"
  data-platform="https://www.zapgifts.com">
</div>
<script type="text/javascript">
(function (g, i, f, t, u, p, s) {
  g[u] = g[u] || function() {
    (g[u].q = g[u].q || []).push(arguments)
  };
  p = i.createElement(f);
  p.async = 1; p.src = t;
  s = i.getElementsByTagName(f)[0];
  s.parentNode.insertBefore(p, s);
})(window, document, "script",
  "https://www.zapgifts.com/assets/js/embed.js?v=3.3",
  "giftcard");
</script>

Click the Copy Code button in the top-right corner of the code block to copy the snippet to your clipboard.

Filtering Which Gift Cards Appear

Above the code block you'll see optional filter checkboxes organised into two columns:

When you check or uncheck any filter, the embed code updates automatically. The generated code will include the appropriate data-groups and/or data-cards attributes. If nothing is checked, all active gift cards will be shown.

For example, if you check a group called “Holiday Specials”, the code updates to include:

<div class="giftcard-checkout"
  data-site-id="your-site-id"
  data-platform="https://www.zapgifts.com"
  data-groups="clx...abc">
</div>

2. Shareable Checkout Link

Below the embed code, you'll find a Shareable Checkout Link section. This gives you a direct URL to your hosted checkout page that you can share anywhere:

• Social media bios (Instagram, Facebook, TikTok)
• Email campaigns and newsletters
• QR codes on printed materials
• Text messages to customers

The link is shown in a read-only text field. Next to it you'll see two buttons:

• An open-in-new-tab icon — opens the live checkout in a new browser tab so you can preview it.
• A Copy Link button — copies the URL to your clipboard.

If you have any filter checkboxes checked (groups or individual items), the shareable link updates automatically to include those filters, so the link matches your embed code.

3. Share on Social Media

The third section provides one-click sharing buttons for four platforms:

Each button uses your current shareable link (including any active filters), so customers are taken directly to the right set of gift cards.

4. Platform Installation Guides

At the bottom of the tab, you'll see a grid of website platform tiles. Click any tile to expand step-by-step installation instructions for that platform. Supported platforms include:

The general process is the same for every platform:

1. Copy the embed code from the top of the page.
2. In your website editor, add an HTML block (sometimes called “Custom Code” or “Embed”).
3. Paste the embed code into that block.
4. Save and publish your page.

Each platform tile gives you the exact menu names and button labels for that specific builder, so you know exactly where to go.

Tab 2: Checkout Design

Switch to the Checkout Design tab to customise how the embedded checkout looks on your site. This tab lets you change colours, fonts, button styles, and other visual settings so the checkout matches your brand. Changes are saved automatically and apply to all embedded checkouts using your site ID.

How the Embed Code Works

The snippet has two parts:

1. The container — a <div> with your data-site-id and data-platform attributes. This is where the checkout widget renders on your page.
2. The loader script — a lightweight JavaScript file that finds the container and loads the checkout inside an iframe. It auto-resizes to fit the content, so there are no scrollbars.

Payments, emails, and voucher generation all happen securely on our servers. Your website never handles any payment data.

Quick Reference: Data Attributes

These attributes are added to the container <div> automatically when you use the filter checkboxes. You generally don't need to edit them by hand, but here's what each one does:

Troubleshooting