Buttons on your own page

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>

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>

Try it out below. These are the real buttons, with the same sizes and shapes as the ones your customers will 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>

A button can point to a specific product, a fixed amount or a quantity and start the buyer further into the flow. That is how «Buy gift card · DKK 500» 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>

data-event normally points to one specific event. If you write next instead, the button opens the next one that is on sale, so you do not have to edit your page every time you set up a new date.

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

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()

// The same choices as a plain link, for a mail, a QR code or a new tab
kuvert.url({ event: 'next', view: 'tables' })

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

• kuvert:ready: the script has loaded and the buttons are set up
• kuvert:open: the shop was opened
• kuvert:close: the shop was closed again
• kuvert:checkout: the buyer pressed pay. It includes the amount, quantity, currency and what was bought (gift card, ticket, table or cart), and for an event its ID and the IDs of its prices

If your page renders its buttons after the script has run, as a React or Vue page does, call kuvert.refresh() afterwards. It picks up new buttons and skips the ones it already knows.

If you have put a Google Tag Manager container in your shop, it only runs once the customer has said yes. If the customer opens the shop directly on shop.kuvert.dk, Kuvert asks once itself, and the answer is remembered. But if the shop is embedded on your own page, YOUR cookie banner has already asked, and Kuvert should not 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="analytics ads"></script>
<!-- statistics only: data-consent="analytics" -->

// JavaScript banner: tell us when the customer answers
kuvert.consent(true) // or false, if they decline
// or each half on its own:
kuvert.consent({ analytics: true, ads: false })

Your banner most likely asks about statistics and marketing separately, and you can pass that on: analytics is statistics, ads is marketing. If the customer only said yes to statistics, your Google Analytics measures, while your ad tags get a no through Google Consent Mode. data-consent="granted" and kuvert.consent(true) still mean yes to both.

The answer also carries through the payment. When the customer comes back from Stripe they are no longer on your site, but Kuvert does not ask again: the answer your banner gave when the customer pressed pay also applies on the page after the payment, so the purchase reaches your container. If the customer withdraws their yes before paying, that no carries through in the same way.

If you have set up a Meta pixel ID and an access token under Integrations, Kuvert sends the purchase to Meta from the server, but only for a customer who has agreed to marketing. With a yes, your site also passes its own Meta cookie (_fbp) and the ad click's (_fbc) into the shop, so Meta can find the ad that led to the purchase.

If your own page already shows the poster, door times, age limit, description and lineup, the ticket sales below it need not repeat them. Put data-compact beside data-event, and the frame shows only the night's name and date, followed by what it takes to buy: tickets and tables, prices, the table map and the basket. Opened in a new tab, the whole night is back.

<div data-kuvert-inline data-event="nytaarsaften" data-compact></div>