A gift card is an amount. A video message makes it a gift.

Pick a shop and an amount, record a real message. Then see the card they receive.

Start the demo Or request a tailored demo

Real recorder
Nothing is chargedNothing charged
No app

Which journey?

Gift + parcel Gift card

A woman smiles at a video on her phone, a gift card in her hand

Your five screens

Shop
Amount
Details
Video Real
Voucher

Opens from the card’s QR

Fictional gift card shop · live demo

The real recorderReal recorder

The gift card they receive

Your brand

Use the left and right arrow keys to move between steps.

Step 1

Pick the shop

In a real programme this list is your own catalogue. Here it stands for the moment where the customer chooses what the card is worth spending on.

These six shops are invented for the demo. Livstick never displays a brand it has no agreement with.

Step 4

Record the video message

This is the Livstick recorder itself, served from this domain and opened on a recording slot created for you a moment ago.

Opening the recorder…

You are the customer. Ready?

Five screens. Your camera is only asked for at step 4.

Demo mode: no payment, no real order.

Same journey. Your brand on every screen.

Example brands, for illustration.

Developer? See each API call behind the scenesDeveloper? See each API call

Behind the scenes

What a gift card programme calls, screen by screen

One single call leaves this website, and it leaves from its server. Your browser only ever talks to /api/demo — the API key never reaches it.

Picking the shop Frontend

Nothing leaves the page. The catalogue belongs to your commerce platform, and Livstick never needs to know which shop was chosen.
Choosing the amount Frontend

Still nothing. The amount is settled by your payment flow; it will travel later as a simple label attached to the message.
Sender and recipient Next step

Leaving this screen, your backend opens a recording slot — a container — with the details it already has. This is the only call of the whole journey.
- POST /api/v3/containers
Request
```
{
  "crid": "DEMO-1754035200000-9f2c41ab",
  "language": "en",
  "sender": { "firstName": "Alice", "email": "alice.rivera@example.com" },
  "recipient": { "firstName": "Ben", "email": "ben.okoro@example.com" },
  "additionalData": { "demo": "gift-cards", "amount": 50, "personalMessage": "See you in July!" }
}
```
The key travels in an Authorization header, from server to server. A key placed in the page would be readable by anyone visiting it.

Recording the message Active

The slot answers with a public identifier and two links. The recorder is then mounted with that identifier — and with the domain and API base it must use, named rather than guessed.

Response 201

{
  "crid": "DEMO-1754035200000-9f2c41ab",
  "urid": "a1b2c3d4e5", "state": "recording_open",
  "editKey": "550e8400-e29b-41d4-a716-446655440000",
  "links": { "recordingUrl": "https://livs.tk/a1b2c3d4e5" }
}

Recorder

<script type="module" src="/widget/assets/widget.latest.js" data-uid="a1b2c3d4e5"
        data-lang="en" data-domain="{your domain}" data-api-url="{your Livstick API}"></script>

The recorder announces the end of the upload with a DOM event, livstickRecorded. The demo listens for it, and does nothing else with the recording.

Voucher and QR code Completed

The QR code is an asset of the container: ask for it whenever you need it, print it on a card, or drop it in an email. A ready-to-print PDF is available from the same container.
- GET /api/v3/containers/{crid}/qrcode
- GET /api/v3/containers/{crid}/card
On this page the QR travels through a signed proxy: without the token issued with the container, the request is refused. An open proxy would hand out the QR code of any real order.
Delivery Automatic

Livstick delivers the message on its own, at the moment the programme has set — with the card, never before. Your backend only steps in when it wants to force the send.
- POST /api/v3/containers/{crid}/notify
No request body: the container already knows who to write to, in which language and with which branding.

What you will live, step by step.

Three quick screens, then the part an amount cannot carry.

Step 1
Pick the shop

Six invented shops stand in for your catalogue.
Mock-up screenMock-up
Step 2
Choose an amount

Suggested amounts, or one of your own.
Mock-up screenMock-up
Step 3
Who gives, who receives

The fields your checkout already collects.
Mock-up screenMock-up
Record your message

The real Livstick recorder, in the brand’s style.
Real recorder
The gift card is ready

Card, code, and a QR that opens the video.
Your message