Kuvert · demo
Et hotel, en restaurant, en café, et badehus, et oplevelsesfirma og en natklub — hver med sin egen hjemmeside og Kuverts købsknap på. Køb et gavekort, en billet eller et klippekort, eller book et bord, præcis som deres kunder ville.
Forretningerne er opdigtede, men butikkerne bag knapperne er rigtige Kuvert-butikker i testtilstand. Der bliver aldrig trukket penge: betal med testkortet længere nede på siden.
01Forretningerne
Hver forretning viser noget forskelligt. Åbn hjemmesiden og brug knapperne, som en kunde ville — butikken åbner oven på siden, eller i sit eget vindue.
Gavekort til ophold og middage, med en kampagne der lægger ekstra oveni.
Bordbooking, billetter til særlige aftener og gavekort — fra én hjemmeside.
Den enkleste opsætning: én linje på siden og en knap, der svæver i hjørnet.
Gavekort til behandlinger og dagsbilletter, med 20 % ekstra på gavekortet.
Billetter med flere priser og afgangstider, og ture der kan gives som gavekort.
SOFIE15 ved gavekortet, og få 15 % ekstraÅbent hver fredag og lørdag: billetter, gæsteliste og borde valgt på et kort.
02Betalingen
Butikkerne står i testtilstand, så betalingen går gennem Stripes testmiljø. Der bliver aldrig trukket en krone — og kortet, gavekortet eller billetten, du får bagefter, er præcis det, en rigtig kunde får.
4242 4242 4242 4242 · 12/34 · 123
Ethvert udløb i fremtiden og enhver trecifret kontrolkode virker. Vil du se en afvist
betaling, så brug 4000 0000 0000 0002. Butikkerne viser også kortet i et
bånd øverst på siden.
MobilePay vises ikke i testtilstand, fordi Stripes testmiljø kun tilbyder kort. I en rigtig butik kommer MobilePay med, når forretningen har slået det til hos Stripe.
Natklubben har endnu ikke en færdig Stripe-testkonto. Indtil den er på plads, svarer «Betal» med en fejl dér — alt før betalingen virker, og gæstelisten, som er gratis, kan bookes hele vejen igennem.
03Forretningens side
Hver forretning har sit eget kontrolpanel med ordrer, gavekort, produkter, kampagner,
bordbooking, udbetalinger og kassen, hvor kortene indløses. Log ind på
app.kuvert.dk
med en af adresserne herunder. Adgangskoden er kuvert-demo-1234 for dem
alle.
hotel@demo.kuvert.dk · hotel med kampagnerestaurant@demo.kuvert.dk · restaurant med bordbooking og billetter
kaffebar@demo.kuvert.dk · café med klippekortspa@demo.kuvert.dk · spa med 20 % kampagneoplevelser@demo.kuvert.dk · oplevelser med arrangementnatklub@demo.kuvert.dk · natklub, billetter og bordeKoden står her, fordi det alle er demo-butikker: de er i testtilstand, de kan ikke tage imod rigtige penge, og alt i dem er opdigtet. Andre bruger dem også, så det, du ændrer, kan blive ændret igen — og butikkerne sættes jævnligt tilbage af sig selv.
04Efter købet
Vil du se, hvad kunden får, uden at købe noget først? Her er nogle af de kort og billetter, der allerede er solgt i demo-butikkerne — sådan som de ser ud på kundens telefon og ved kassen.
05For udviklere
Hver side bruger embed.js på sin egen måde, så de tilsammen viser hver
placering, tilstand, udseende og forvalg, scriptet kan. Laboratoriet viser det hele på
én gang, og nederst på dets sider sidder et lille panel med sidens knapper, adressen
hver af dem åbner, og de fire hændelser embeddet sender til forretningens eget
analyseværktøj — ready, open, close,
checkout. De seks forretningers sider er uden panel: dem ser man, som en
kunde ville.
06Dækning
| Del af systemet | Attribut | Side |
|---|---|---|
| Flydende knap | data-button, data-position |
kaffebaren · br bl tr tl |
| Knap vi tegner | data-kuvert-buy |
alle sider |
| Kundens eget element | data-kuvert-open |
strandhotellet · spisehuset · laboratoriet |
| Indlejret butik | data-kuvert-inline, data-height |
strandhotellet/gavekort · badehuset · spisehuset · natklubben |
| Modal · inline · faneblad | data-mode |
laboratoriet · spisehuset |
| Udseende |
data-label, data-color, data-text-color, data-size, data-shape, data-variant,
data-block, data-class
|
laboratoriet |
| Forvalg | data-product, data-amount, data-quantity, data-step |
laboratoriet · kaffebaren/kaffekort |
| Kampagne | data-campaign |
strandhotellet (+10 %) · badehuset (+20 %) |
| Billetter | data-event |
spisehuset · fjordtur · natklubben |
| Bordbooking | data-booking |
spisehuset · natklubben |
| Billetter eller borde · kun det, man køber | data-view, data-compact |
natklubben |
| Mørk butik | data-scheme |
natklubben |
| Kurven — flere ting i én betaling | ingen — det er butikkens egen kurv | strandhotellet/gavekort · badehuset |
| Erhvervsgave | ingen; «Jeg køber som virksomhed» i butikken | strandhotellet (kun for virksomheder) · kaffebaren/kaffekort |
| Kampagnekode | ingen; «Har du en kampagnekode?» i butikken | fjordtur (SOFIE15, gavekortet) |
| Sprog | data-locale (da · en · no · sv · de) |
strandhotellet · laboratoriet |
| JS-API | kuvert.open / close / url / refresh |
fjordtur · laboratoriet |
| Hændelser | kuvert:ready / open / close / checkout |
panelet nederst på laboratoriet |
| Nægtet ramme | data-origin (med vilje forkert) |
laboratoriet/naegtet |