Afbeeldingswidgetcode voor webwinkels: mock-ups en beeldideeën voor shoppers
Een AI-afbeeldingswidget helpt shoppers zich een productidee voor te stellen voordat ze kopen. Zo gebruiken winkels de widgetcode, en zo houd je het on-brand en binnen budget.
Gepubliceerd:
Shoppers vinden het vaak lastig om zich het resultaat voor te stellen: een gepersonaliseerde print, een kleur voor een kamer, een cadeau-idee. Met een AI-afbeeldingswidget beschrijven ze het en zien ze binnen enkele seconden een gegenereerd beeld, zonder je winkel te verlaten. Omdat de widget white label is, ziet hij eruit als onderdeel van je shop en niet als een tool van derden.
Ideeën die werken in een winkel
- Gepersonaliseerde prints en merchandise: "een minimalistische lijntekening van bergen voor een mok" geeft de shopper een vertrekpunt om met jou te bespreken.
- Interieur en decoratie: bezoekers schetsen een sfeer ("een rustige Scandinavische slaapkamer in saliegroen") voordat ze bijpassende producten bekijken.
- Cadeau-inspiratie: een snel beeld helpt iemand te beslissen wat hij gaat bestellen.
Maak op de pagina duidelijk dat de afbeeldingen door AI gegenereerde concepten zijn, geen foto's van een product dat je verstuurt. Zo blijven de verwachtingen eerlijk en voorkom je retouren.
Voeg hem toe aan een product- of landingspagina
Maak een widget Afbeelding aan in Widgets, sla hem op en kopieer de code:
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
De meeste webwinkelplatforms accepteren een blok met eigen HTML. Plak de tag daar, of geef de widget weer in een specifiek element met data-target. De widget leeft in een eigen Shadow DOM, dus de CSS van je thema en de widget zitten elkaar nooit in de weg.
Laat hem eruitzien als je winkel
De afbeeldingswidget heeft geen logo en geen "powered by"-regel. Schrijf de titel en de knop in de toon van je shop, kies de accentkleur van je merk en een thema dat bij je pagina's past. Gebruik de plaatshoudertekst om een goede voorbeeldprompt te tonen: shoppers nemen over wat ze zien.
Houd de uitgaven voorspelbaar
Een winkel kan drukke dagen hebben, dus stel limieten in vóór een campagne:
- Laat de widget draaien op een aparte API-key. In de editor is de laatste optie van de keylijst Nieuwe API-key maken. Geef die key een dagelijkse bestedingslimiet en beperk hem tot het afbeeldingsmodel dat je hebt gekozen.
- Stel ook op de widget zelf een dagelijkse bestedingslimiet in.
- Stel onder Instellingen, Widgetinstellingen in hoeveel verzoeken één bezoeker per dag mag sturen.
Gebruik toont de verzoeken van de widget per site en per widget, zodat je kunt zien of de tool zichzelf terugverdient.
Sta alleen het domein van je winkel toe
Vermeld het domein van je shop onder Instellingen, Widget-sites. Een domein omvat ook de subdomeinen, dus example.com omvat www.example.com.
Probeer de builder op de widgetpagina om te zien hoe een afbeeldingswidget er in je winkel uit zou zien.