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 for the guide to each builder. To create gift cards, see Gift Cards.
Add the gift cards widget#
- Open Admin → Settings → Storefront → Website embed.
- Under Which widget?, select Gift cards.
- 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.
- 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:
<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. 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.
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:
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" />
}