Jump to section
{ eCard Video }
Integration Guide
Add video messages to your digital gift cards. One integration scenario, aligned with the interactive demo. Retrieve QR codes, PDF cards, or direct URLs and deliver eCards your way.
Key Concepts
Core terminology you need before integrating.
CRID
Client Reference ID — Your unique order identifier (e.g. order number). Used in every API call to associate a video message with a specific eCard.
Container
A container is a "slot" ready to receive a video message. Created via POST /v3/containers. Returns a urid and editKey for the widget.
Widget
A JavaScript module that embeds the Livstick recording interface directly in your checkout page. Initialized with urid and editKey.
Environments
| Environment | Base URL | Usage |
|---|---|---|
| Production | https://public.api.livstick.com/v3 | Live environment |
| Staging | https://service.stage.livstick.com/v3 | Pre-production testing |
Integration Scenario
One integration path, matching the interactive demo. Toggle between Widget Capture and Email Capture below.
Step-by-Step Guide
Detailed implementation guide. Toggle between Widget Capture (recommended, as shown in the demo) and Email Capture.
eCard with Video
Create a video-enhanced eCard. Retrieve the QR code, PDF card, or video URL, and deliver the eCard through your own channels.
The buyer records their video directly on your confirmation page via the Livstick widget. You retrieve the QR code (or PDF card) to deliver the eCard yourself.
Create a container
When the buyer completes a gift card purchase with the video option, your back-end creates a Livstick container. This prepares the "slot" that will receive the video.
/v3/containers{
"crid": "ORD-2026-1234",
"email": "alice@example.com",
"receiverEmail": "bob@example.com",
"language": "en",
"additionalData": {
"senderFirstName": "Alice",
"receiverFirstName": "Bob",
"amount": "50 EUR"
}
}{
"crid": "ORD-2026-1234",
"urid": "abc123xyz9",
"state": "recording_open",
"editKey": "550e8400-e29b-41d4-a716-446655440000",
"links": {
"recordingUrl": "https://brand.example/abc123xyz9",
"previewUrl": "https://brand.example/preview/abc123xyz9"
}
}Store the crid, urid and editKey. The urid and editKey are needed to initialize the recording widget. The receiverEmail is optional — only needed if you want Livstick to send the delivery email via /notify.
Display the recording widget
On your order confirmation page, load the Livstick JavaScript widget. The buyer records their video message without leaving your site.
<!-- Mount point -->
<div id="livstick-plugin"></div>
<!-- Widget script -->
<script
type="module"
src="https://app.livstick.com/widget/assets/widget.latest.js"
data-uid="{urid}"
data-editKey="{editKey}"
data-lang="en"
></script>The widget uses the urid and editKey from Step 1.
Retrieve video assets
Once the video is recorded, retrieve the QR code image to include in your eCard delivery. The QR code links directly to the video message.
/v3/containers/{crid}/qrcode// Returns: QR code image (PNG, 300×300px)
// Alternative: GET /v3/containers/{crid}/card
// Returns: Ready-to-print PDF card with QR code + branding
// Alternative: GET /v3/containers/{crid}/url
// Returns: Direct video viewing URL (JSON)You control the delivery: use the QR code in your own email template, generate a PDF card via /card, or get the direct video URL via /url to embed as a link.
Deliver to recipient
Use the assets from Step 3 to deliver the eCard to the recipient through your own channels — email, downloadable PDF, or in-app notification.
Optional: if you provided a receiverEmail in Step 1, you can call POST /v3/containers/{crid}/notify to let Livstick send the delivery email on your behalf. No request body needed.
Widget Integration
Embed the Livstick recording widget directly in your checkout or confirmation page.
Add this script to your confirmation page:
<!-- Mount point -->
<div id="livstick-plugin"></div>
<!-- Widget script -->
<script
type="module"
src="https://app.livstick.com/widget/assets/widget.latest.js"
data-uid="{urid}"
data-editKey="{editKey}"
data-lang="en"
></script>Data Attributes
| Attribute | Required | Description |
|---|---|---|
data-uid | Yes | The urid from the POST /v3/containers response |
data-editKey | Yes | The editKey from the POST /v3/containers response |
data-lang | No | Widget UI language (en, fr, de, es, etc.) |
JavaScript Events
livstickRecordedFired on document when the user completes a video recording. Listen for this event to update your UI (e.g. show a success message).
document.addEventListener('livstickRecorded', () => {
// Video recorded successfully
showSuccessMessage();
});API Reference
Endpoints used in the eCard integration scenario. All endpoints require Bearer token authentication.
Ready to transform your customer experiences?
Let's discuss your project and discover how LIVSTICK can help you create unforgettable moments.