Veyra widget — installatiegids

De Veyra-widget is één <script>-regel op je productpagina. Bezoekers uploaden een foto van hun kamer en zien jouw product erin geplaatst.

Je installatie-snippet staat in je dashboard (/dashboard/{jouw-shop}). Hij ziet er zo uit:

<script src="https://api.useveyra.ai/embed.js"
        data-tenant="jouw-shop"
        defer></script>

data-tenant is verplicht en uniek voor jouw shop — neem hem letterlijk over uit je dashboard. De rest van deze gids legt uit waar je die regel per platform plakt.

Vragen tijdens de installatie? Mail support@useveyra.ai — we reageren binnen één werkdag.

Eerst: zet je domein in het dashboard

Voordat het script iets doet, moet in je dashboard staan op welk domein je widget mag draaien: Instellingen → Toegestane domeinen. Vul daar het adres in dat in de adresbalk van je shop staat, bijvoorbeeld www.jouwwinkel.nl, één domein per regel.

Staat er geen domein, dan weigert de widget elke bezoeker — je ziet dan wel de knop op je pagina, maar er gebeurt niets. Heb je een aparte staging-omgeving of een tweede domein? Zet ze er allebei in.

Waar komt het script?

De widget hoort op de productpagina, vlak vóór de afsluitende </body>-tag. De widget leest zelf het productbeeld en de titel van de pagina (via de standaard OpenGraph-tags die de meeste webshops al hebben), dus je hoeft niets anders te configureren.

WordPress / WooCommerce

Getest op een schone WordPress + WooCommerce + Storefront-installatie — deze stappen kloppen, inclusief de twee valkuilen onderaan.

Optie A — via een plugin (aanbevolen, geen code):

1. Installeer en activeer een "header & footer scripts"-plugin — WPCode of Insert Headers and Footers (gratis, 1 klik vanuit Plugins → Nieuwe plugin). WordPress zelf heeft geen veld om een script te plakken; vandaar deze plugin.
2. Ga naar de instellingen van de plugin → Footer.
3. Plak je snippet en sla op.
4. Open een productpagina — de knop "Bekijk in je eigen kamer" verschijnt onder In winkelwagen.

WooCommerce-tip — plaats de knop netjes bij In winkelwagen. Voeg data-mount=".single_add_to_cart_button" toe aan het script, anders belandt de knop onderaan de pagina:

<script src="https://api.useveyra.ai/embed.js"
        data-tenant="jouw-shop"
        data-mount=".single_add_to_cart_button"
        defer></script>

Optie B — via het thema:

1. Uiterlijk → Thema-bestandseditor → footer.php (gebruik een child-thema zodat een thema-update je wijziging niet overschrijft).
2. Plak het snippet vlak vóór </body>.
3. Opslaan.

Twee WooCommerce-valkuilen (getest)

• "Coming soon"-modus staat standaard AAN op nieuwe WooCommerce-shops — je hele winkel (en dus de widget) zit dan achter een lanceerscherm. Zet hem uit via WooCommerce → Instellingen → Algemeen → Site-zichtbaarheid → "Live" (of klik Launch your store) voordat je test.
• Productafbeelding werkt zónder SEO-plugin. Vanilla WooCommerce zet geen OpenGraph-tags, maar de widget pakt automatisch de volledige productfoto uit de WooCommerce-gallery (geen Yoast/RankMath nodig). Heeft je thema een afwijkende opbouw? Geef dan een data-image-selector mee.

Shopify

1. Online Store → Themes → … → Edit code.
2. Open layout/theme.liquid.
3. Plak je snippet vlak vóór </body>.
4. Save.

De widget verschijnt op elke productpagina. Wil je hem alleen op specifieke producten? Mail ons — we helpen met een conditie.

Magento (Adobe Commerce)

Via de admin (geen deploy nodig):

1. Content → Design → Configuration → bewerk je store view.
2. HTML Head → Scripts and Style Sheets.
3. Plak je snippet en sla op.
4. Cache leegmaken (System → Cache Management → Flush).

Custom HTML / overig platform

Plak het snippet in de HTML van je productpagina, vlak vóór </body>:

    <!-- … je pagina-inhoud … -->

    <script src="https://api.useveyra.ai/embed.js"
            data-tenant="jouw-shop"
            defer></script>
  </body>
</html>

Werkt op elk platform dat een <script>-tag toelaat. Geen build-stap nodig.

Conversie meten (optioneel — tweede snippet)

Wil je zien hoeveel bezoekers daadwerkelijk een product kopen nadat ze het in hun eigen kamer zagen? Plak één extra regel op je bestelbevestigings- / bedankt-pagina (de pagina ná een geslaagde bestelling):

<script src="https://api.useveyra.ai/embed-purchase.js"
        data-tenant="jouw-shop"
        data-order-value="129.95"
        defer></script>

• De pixel koppelt een aankoop anoniem aan een eerdere kamer-preview via een first-party token in de browser van de bezoeker — er worden geen bezoekers gevolgd en geen persoonsgegevens verstuurd.
• Heeft de bezoeker de widget nooit gebruikt? Dan is er geen token en wordt er niets verstuurd — alleen Veyra-aanrakingen tellen mee.
• data-order-value is optioneel — het orderbedrag in euro's (bv. 129.95). Zonder bedrag telt de aankoop nog steeds mee, alleen zonder omzetcijfer. Per platform:
  • Shopify (checkout Additional Scripts / Order status-pagina, Liquid — let op: total_price is in centen, deel door 100): data-order-value="{{ total_price | divided_by: 100.0 }}"
  • WooCommerce heeft géén template-variabelen op de bedankt-pagina; voeg de pixel toe via een PHP-hook in je (child-)theme:

    add_action('woocommerce_thankyou', function ($order_id) {
        $order = wc_get_order($order_id);
        printf('<script src="https://api.useveyra.ai/embed-purchase.js" data-tenant="jouw-shop" data-order-value="%s" defer></script>',
            esc_attr($order->get_total()));
    });
    

  • Twijfel je? Laat data-order-value gewoon weg — de aankoop telt dan mee zonder bedrag, wat beter is dan een verkeerd bedrag.
• data-order-id is optioneel maar aan te raden: je ordernummer (bv. data-order-id="{{ order_number }}"). De pixel gebruikt het om dubbeltellen te voorkomen als de bedankt-pagina ververst wordt; zonder ordernummer valt hij terug op het pagina-adres.
• Let op (Shopify en externe checkouts): draait je bedankt-pagina op een ander domein dan je productpagina's (bv. checkout.shopify.com), dan kan de pixel de eerdere kamer-preview niet terugvinden en telt er niets. Mail ons in dat geval — dan kijken we mee naar een passende oplossing.
• Je dashboard toont vervolgens Aankopen, conversieratio en (indien meegegeven) omzet onder Conversie.

Het bedrag is een indicatief signaal voor je eigen dashboard — het is geen factuurregel en wordt niet voor facturatie gebruikt.

Je eigen AI-key aanleveren

Veyra draait op jouw eigen OpenRouter-key. Dat betekent dat OpenRouter het AI-verbruik rechtstreeks aan jou factureert — transparant, en je houdt volledige controle over je spend-limieten. Wij zien je key nooit in leesbare vorm (versleuteld opgeslagen).

1. Maak een gratis account op https://openrouter.ai/keys
2. Zet er wat tegoed op (± $5 is genoeg om te starten; een kamer-preview kost enkele centen)
3. Klik "Create key" en plak hem zelf in je dashboard onder Instellingen → AI-key — klik daarna "Test mijn key" om direct te controleren dat hij werkt (kost geen tegoed).

Liever dat je financiële persoon dit regelt? Prima — nodig ze uit als extra gebruiker via Instellingen → Gebruikers; de key kan los van de installatie worden ingesteld. De widget werkt zodra beide er zijn.

Aanpassen (optioneel)

Extra data-*-attributen op het script-tag:

Voorbeeld:

<script src="https://api.useveyra.ai/embed.js"
        data-tenant="jouw-shop"
        data-button-label="Pas toe in mijn kamer"
        data-mount=".product-summary"
        defer></script>

Gekozen opties overnemen in je formulier of winkelwagen

Kiest de bezoeker in de widget opties (kleur, zijsteen, leer…), dan laat de widget dat je pagina weten, zodat je offerteformulier of winkelwagen dezelfde keuze krijgt in plaats van wat er achter het venster nog geselecteerd staat:

window.addEventListener('veyra:cta', function (e) {
  // e.detail.options    → { kleur: 'wit', zijsteen: 'natuursteen' }
  // e.detail.selections → [{ key: 'kleur', label: 'Kleur', value: 'wit', valueLabel: 'Wit' }, …]
  // e.detail.productRef → het product uit data-product-ref
});

veyra:cta vuurt bij een klik op de primaire knop; veyra:result (zelfde inhoud) zodra een resultaat in beeld staat.

Standaardkeuze, weergave en linkparameter per optie

Elk optie-veld in het configurator-schema (dashboard → Producten → product → "Weergave in de widget") kent drie optionele instellingen. Laat je ze leeg, dan werkt het veld precies zoals voorheen.

In de widget

Heeft precies één veld display: primary (keuzeknoppen), dan ziet de bezoeker na de upload alleen die vraag, als plaatjes; één tik en het beeld wordt gemaakt. De AI meet ondertussen het raam op: verborgen maatvelden (hidden met prefill) krijgen die maat en gaan mee in de link, bv. …/gordijnen/havana?pv_id=123&curtain_type=vouw&curtain_lining=zonder&curtain_width=240&curtain_height=260. Parameters die al in data-result-url staan blijven staan. Het veyra:cta-event krijgt dezelfde set als e.detail.params.

Meerdere productbeelden (JSON-LD)

Levert je pagina schema.org Product structured data (<script type="application/ld+json">), dan leest de widget die als eerste: het image-veld mag één URL of een array zijn. De eerste afbeelding wordt het primaire productbeeld; de rest gaat als extra referentiebeelden mee (max 3 extra, totaal 4). Zo krijgt het AI-model bij een muurstaal bijvoorbeeld óók een sfeerfoto voor de juiste schaal en materiaaluitstraling.

Heb je geen JSON-LD maar wél een fotogalerij in de DOM? Gebruik dan data-images-selector om die beelden aan te wijzen. Eén productbeeld (alleen og:image) blijft gewoon werken zoals voorheen — er verandert niets aan bestaande installaties.

Werkt het niet?

Content-Security-Policy (CSP)

Heeft je shop een Content-Security-Policy (vaak bij enterprise- of bank-omgevingen), dan moet je de Veyra-domeinen toestaan — anders blokkeert de browser de aanroep en toont de widget "Kan de Veyra-dienst niet bereiken". Voeg toe:

connect-src https://api.useveyra.ai https://app.useveyra.ai;  # compose-aanroep + beacon + download van het resultaat
img-src     https://*.useveyra.ai blob:;                      # het gegenereerde beeld + de voorvertoning van de kamerfoto

Let op beide details: het gegenereerde beeld wordt geserveerd vanaf app.useveyra.ai (vandaar de tweede connect-src-host, nodig voor de download-knop), en de widget toont de kamerfoto van de bezoeker lokaal via een blob:-URL (vandaar blob: in img-src).

Gebruik je een strikte style-src zónder 'unsafe-inline'? De widget rendert in een geïsoleerde Shadow-DOM met een eigen <style>-blok; sta in dat geval 'unsafe-inline' toe vóór de Veyra-stijlen, of mail ons — dan denken we mee over een oplossing voor jouw policy.

Single-page apps (React / Vue / Next / Hydrogen)

Wisselt je productpagina van product zonder volledige herlaad (client-side navigatie), roep dan na elke navigatie aan:

window.veyra.updateProduct();   // herleest titel/prijs/afbeelding van de nieuwe pagina

De widget leest het product opnieuw bij elke klik op de knop, dus meestal gaat dit vanzelf goed — updateProduct() is de zekere weg. Het herleest ook de per-product attributen op de script-tag (data-bundle-products, data-dimensions, data-product-type, data-material, data-options, data-register, data-result-label…), dus een configurator die de manifest herschrijft roept daarna gewoon updateProduct() aan. Let op: als je framework bij een routewissel het stuk pagina verwijdert waar de Veyra-knop in staat, verdwijnt de knop mee; plaats de knop dan via data-mount op een element dat blijft staan, of open het venster programmatisch met window.veyra.open() vanaf je eigen knop.

Kom je er niet uit? support@useveyra.ai — wij installeren hem desnoods samen via een screenshare.

Controleren wat de widget ziet

Open je eigen productpagina met #veyra-inspect achter de URL, bijvoorbeeld https://www.jouwwinkel.nl/product/fauteuil#veyra-inspect. Linksonder verschijnt een paneel met exact wat de widget van je pagina leest: de productafbeelding(en), titel en via welke route ze gevonden zijn (JSON-LD, og:image of selector). De eerste afbeelding is wat de AI in de kamer plaatst — klopt die niet, pas dan je og:image of JSON-LD aan en herlaad. Bezoekers zien dit paneel nooit; het verschijnt alleen met die URL-hash.