Sælg mere
Knapper på din egen side
Din gavekortsside kan stå for sig selv, men de fleste salg sker der hvor kunden allerede er. Én linje kode lægger en knap på din side — og du bestemmer selv hvor den står, hvad der sker når der klikkes, og hvordan den ser ud.
Den korte version
Sæt denne linje ind lige før </body> på din side. Så er du i gang: der kommer en "Køb gavekort"-knap i hjørnet, og den åbner din butik i et vindue oven på siden.
<script src="https://order.pirr.fun/embed.js" data-slug="dit-butiksnavn"></script>Fire måder at gøre det på
| Sådan | Hvad du skriver | Hvornår |
|---|---|---|
| Flydende knap | Kun <script>-linjen | Hurtigst. Sidder fast i hjørnet på alle sider. |
| Knap hvor du vil | <span data-pirr-buy></span> | Sæt den ved et produkt, i menuen, i footeren. Så mange du vil. |
| Din egen knap | data-pirr-open på dit eget element | Du har allerede en knap eller et link, der passer til din side. |
| Hele butikken | <div data-pirr-inline></div> | Gavekortsiden vises direkte på din side — ingen knap, intet vindue. |
Den flydende knap forsvinder af sig selv, så snart du har sat en af dine egne ind. Du ender aldrig med to knapper ved et uheld.
<!-- En knap ved hvert produkt, hver med sit eget beløb -->
<span data-pirr-buy data-amount="300" data-label="Gavekort · 300 kr."></span>
<span data-pirr-buy data-amount="500" data-label="Gavekort · 500 kr."></span>
<!-- Dit eget link i menuen -->
<a href="/gavekort" data-pirr-open>Gavekort</a>
<!-- Én gang, nederst på siden -->
<script src="https://order.pirr.fun/embed.js" data-slug="dit-butiksnavn"></script>Sådan kommer den til at se ud
Prøv dig frem herunder. Det er de rigtige knapper — samme mål og former som dem dine kunder får at se.
Fyldt
Standard. Din farve, hvid tekst.
data-variant="solid"Kant
Til lyse sider og sekundære placeringer.
data-variant="outline"Kun tekst
Til en menu eller en fodnote.
data-variant="text"
Det du vælger her svarer til attributterne nedenfor. I dashboardet er der den samme opsætning med en knap, der kopierer koden — du behøver ikke skrive den selv.
Har du allerede et design, du hellere vil bruge, så sæt data-class til dine egne klasser. Så holder vi fingrene fra udseendet helt og aldeles, og knappen arver din egen styling i stedet for at slås med den.
<span data-pirr-buy data-class="btn btn-primary"></span>Bestem hvad knappen åbner
En knap kan pege på et bestemt produkt, et fast beløb, et antal — og starte køberen længere inde i flowet. Det er sådan "Køb gavekort · 500 kr." bliver til ét klik i stedet for fire.
<span data-pirr-buy
data-product="prod_spaophold"
data-amount="500"
data-quantity="2"
data-label="To spa-gavekort · 500 kr."></span>Alle muligheder
| Attribut | Hvor | Eksempel |
|---|---|---|
| data-slug | <script> | nogen |
| data-origin | <script> | https://order.pirr.fun |
| data-locale | begge | da |
| data-button | <script> | auto |
| data-pirr-buy | på elementet | — |
| data-pirr-open | på elementet | — |
| data-pirr-inline | på elementet | — |
| data-label | begge | Køb gavekort |
| data-color | begge | #b8935a |
| data-text-color | begge | #ffffff |
| data-size | begge | md |
| data-shape | begge | pill |
| data-variant | begge | solid |
| data-block | begge | true |
| data-class | begge | min-knap |
| data-position | <script> | br |
| data-product | begge | prod_open |
| data-amount | begge | 500 |
| data-quantity | begge | 1 |
| data-step | begge | personalize |
| data-event | begge | evt_sommerfest |
| data-campaign | begge | cmp_jul |
| data-height | begge | 640 |
| data-mode | begge | modal |
Til udviklere
Scriptet lægger window.pirr på siden, så en single-page-app kan åbne butikken fra sin egen kode, og sender begivenheder på window, som dit eget analyseværktøj kan lytte med på.
pirr.open({ product: 'prod_spaophold', amount: 500 })
pirr.close()
window.addEventListener('pirr:checkout', (e) => {
// e.detail — send videre til din egen måling
})- pirr:ready — scriptet er indlæst og knapperne sat op
- pirr:open — butikken blev åbnet
- pirr:close — butikken blev lukket igen
- pirr:checkout — køberen trykkede betal, med beløb og antal
Render din side knapper efter at scriptet er kørt — som en React- eller Vue-side gør — så kald pirr.refresh() bagefter. Den samler nye knapper op og springer dem over, den allerede kender.