# Show Your Gift Cards on Your Website

Add your gift cards to your website so visitors can buy one in a Naayya window

Canonical URL: https://www.naayya.com/help-center/website-gift-cards-widget
Category: integrations
Last updated: 2026-11-07T15:00:00Z

# Show Your Gift Cards on Your Website

The gift cards widget shows the gift cards you sell on your own website, each
in its own colours, with the amounts customers can choose. When a visitor
selects **Buy**, the gift card's purchase page opens on Naayya in a small
window over your website. They choose the amount and pay there.

## Who this is for

Business owners and managers who run their own website and sell gift cards on
Naayya. The widget works in the same website builders as the schedule. See
[Website Integration](/help-center/website-integration) for the guide to each
builder. To create gift cards, see [Gift Cards](/help-center/gift-cards).

## Add the gift cards widget

1. Open **Admin → Settings → Storefront → Website embed**.
2. Under **Which widget?**, select **Gift cards**.
3. Under **Website code**, choose your builder in **Where is your website
   built?** and copy what it needs: **Copy code**, **Copy iframe code**,
   **Copy link** or **Copy React code**.
4. Paste it where you want your gift cards to appear, in the same kind of
   block you would use for the schedule.

The code looks like this:

```html
<script type="module" async src="https://www.naayya.com/plugin/v2/loader.js"></script>
<naayya-gift-cards business-id="YOUR_EMBED_KEY"></naayya-gift-cards>
```

Use the copied code rather than typing your own: it holds your embed key. You
can show the schedule, the pricing widget, the services widget and the gift
cards widget on the same page. Each one needs its own element; the script line
is needed only once per page.

## What the widget shows

The widget shows the gift cards on your gift cards page, in the same order. A
gift card marked **Inactive** in **Admin → Gift Cards** does not show. Each
card shows:

- The name, on a card in the gift card's own colours with your business name.
- The amounts customers can choose, smallest first. These are the amounts you
  set in **Price Options**, and they are what checkout charges.
- How long the gift card is valid once bought, from **Valid for**.
- A **Buy** button.

A gift card with no amount customers can buy does not show.

## Buying a gift card

When a visitor selects **Buy**, the gift card's purchase page opens in a small
window over your website:

- The visitor chooses an amount and who the gift card is for, then pays by
  card.
- A visitor already signed in to Naayya in that browser buys from their
  account. Anyone else buys as a guest. A guest can send the gift card by email
  now or keep it. A signed-in customer can also choose to send it later from
  their account.
- When the purchase is complete, the window closes and the widget shows
  **Purchase complete**.
- If the visitor closes the window without paying, nothing changes.
- If the visitor's browser blocks pop-up windows, the purchase page opens in a
  new tab instead, and the widget does not show a confirmation.

The widget is told only that a purchase was completed. It is never told who
bought the gift card, who it is for, or which amount they chose.

## Choose which gift cards show

In the Website embed section, with **Gift cards** selected, the **Gift cards**
section sets which gift cards the widget shows:

- **Show everything** (on): every gift card you sell, in the same order,
  including any you add later.
- **Show everything** (off): only the gift cards you turn on, in the order you
  set. Turn each gift card on or off, and use the up and down arrows to move
  it. A gift card you add later stays off until you turn it on.

If you mark a chosen gift card **Inactive** in **Admin → Gift Cards**, it
leaves the widget. When you make it active again, it comes back in the same
place.

Changes save as you go. The **Embed preview** shows your choice straight away,
and your website shows it the next time a page loads, without new code.

## Match your brand

The gift cards widget uses the same **Appearance** as the schedule: theme,
colours, font, text size, corners, spacing and card shadow. The gift card
itself keeps the colours of its own design. See
[Match your brand](/help-center/website-integration#match-your-brand). The
**Schedule cards** settings apply to the schedule only.

## Your websites

The websites you list under **Your websites** in the Website embed section
apply to every widget. Only those websites can show the gift cards widget in a
frame or load it from the code. See
[Your websites](/help-center/website-integration#your-websites).

## React and Next.js

For an app built with Lovable, choose **Lovable** and select **Copy React
code**. In another React or Next.js app, use the wrapper directly:

```jsx
import { createNaayyaGiftCards } from 'https://www.naayya.com/plugin/v2/react.js'
import React from 'react'

const NaayyaGiftCards = createNaayyaGiftCards(React)

export function GiftCards() {
  return <NaayyaGiftCards businessId="YOUR_EMBED_KEY" />
}
```

## Related

- [Gift Cards](/help-center/gift-cards)
- [Website Integration](/help-center/website-integration)
- [Show your pricing on your website](/help-center/website-pricing-widget)
- [Show your services on your website](/help-center/website-services-widget)
- [Website integration troubleshooting](/help-center/website-integration-troubleshooting)