Buttons on your own page

The short version

Insert this line just before </body> on your page. Then you're ready: a «Buy gift card» button appears in the corner, and it opens your shop in a window on top of the page.

<script src="https://shop.kuvert.dk/embed.js" data-slug="dit-butiksnavn"></script>

Four ways to do it

The floating button disappears by itself as soon as you insert one of your own. You never end up with two buttons by accident.

<!-- One button per product, each with its own amount -->
<span data-kuvert-buy data-amount="300" data-label="Gavekort · 300 kr."></span>
<span data-kuvert-buy data-amount="500" data-label="Gavekort · 500 kr."></span>

<!-- Your own link in the menu -->
<a href="/gavekort" data-kuvert-open>Gavekort</a>

<!-- Once, at the foot of the page -->
<script src="https://shop.kuvert.dk/embed.js" data-slug="dit-butiksnavn"></script>

Here's what it will look like

Try it out below. These are the real buttons — same size and shapes as your customers see.

If you already have a design you'd rather use, set data-class to your own classes. Then we keep our hands off the look entirely, and the button inherits your own styling instead of clashing with ours.

<span data-kuvert-buy data-class="btn btn-primary"></span>

Choose what the button opens

A button can point to a specific product, a fixed amount, a quantity — and start the buyer further into the flow. That's how «Buy gift card · 500 kr.» becomes one click instead of four.

<span data-kuvert-buy
      data-product="prod_spaophold"
      data-amount="500"
      data-quantity="2"
      data-label="To spa-gavekort · 500 kr."></span>

A button for your next event

data-event normally points to one specific event. If you write next instead, the button opens the next one that's for sale — and you don't have to edit your page every time you set a new date.

<a href="/arrangementer" data-kuvert-open data-event="next">Billetter</a>

All options

For developers

The script places window.kuvert on the page, so a single-page app can open the shop from its own code, and sends events on window, which your own analytics tool can listen to.

kuvert.open({ product: 'prod_spaophold', amount: 500 })
kuvert.close()

window.addEventListener('kuvert:checkout', (e) => {
  // e.detail — pass it on to your own analytics
})

• kuvert:ready — the script is loaded and the buttons are set up
• kuvert:open — the shop was opened
• kuvert:close — the shop was closed again
• kuvert:checkout — the buyer clicked pay, with amount and quantity

Render your page's buttons after the script has run — as a React or Vue page would — then call kuvert.refresh(). It collects new buttons and skips the ones it already knows.

Consent when the shop is on your page

If you've placed a Google Tag Manager container on your gift card page, it runs only when the customer has consented. If the customer opens the shop directly on shop.kuvert.dk, Kuvert asks itself — once, and the answer is remembered. But if the shop is embedded on your own page, YOUR cookie banner has already asked, so Kuvert shouldn't ask again in the middle of a modal just before the customer pays. You pass the answer on:

<!-- server-side banner: set the attribute -->
<script src="https://shop.kuvert.dk/embed.js" data-slug="dit-butiksnavn"
        data-consent="granted"></script>

// JavaScript banner: tell us when the customer answers
kuvert.consent(true) // or false, if they decline