Widget op de website, link naar de agent en app op de telefoon
Hoe u de agent met één coderegel op de website plaatst, hoe een korte link voor sociale media en berichtenapps werkt en hoe een klant uw agent als app op de telefoon installeert.
De agent heeft twee gezichten. Op de website is het een venster in de hoek dat opent via een knop. Op sociale media en in chat-apps is het een pagina via een korte link, die werkt als een kleine winkel en op de telefoon geïnstalleerd kan worden als een app. De catalogus, voorwaarden, gesprekken en aanvragen zijn daarbij gemeenschappelijk: de agent is één.
Alles wat hieronder wordt beschreven, vindt u in het gedeelte “Widget en link”.
Link naar de agent#
Een kort adres zoals comag.vibevox.pro/c/uw-winkel. Plaats dit in de profielbio van Instagram, TikTok of Telegram, stuur het via WhatsApp, of zet het in de beschrijving onder een YouTube-video.
Wanneer u de link verstuurt via een chat-app, ontvouwt deze zich tot een kaart: met omslagafbeelding, winkelnaam en beschrijving. Alle drie de velden zijn aanpasbaar:
- Voorbeeldtitel — standaard de naam van de winkel.
- Voorbeeldomschrijving — een korte zin over wat men kan vragen.
- Omslagafbeelding — wordt automatisch samengesteld uit uw accentkleur, logo en productfoto's. U kunt ook uw eigen afbeelding uploaden, formaat 1200 bij 630 pixels.
U controleert het uiterlijk van het voorbeeld het eenvoudigst door de link naar uzelf te sturen via Telegram.
Code voor de website#
Eén regel code die op alle pagina's vóór de sluitende tag </body> wordt geplaatst. Deze kopieert u met een knop in het dashboard.
Waar u de code precies plaatst op populaire platforms:
| Platform | Waar te plaatsen |
|---|---|
| Tilda | “Site-instellingen” → “Meer” → “HTML-code voor body” |
| Shopify | “Thema” → “Code bewerken” → theme.liquid, vóór </body> |
| WordPress | “Weergave” → “Thema-editor” → footer.php, of een code-invoegplug-in |
| Wix | “Instellingen” → “Aangepaste code” → toevoegen aan Body end |
| Eigen website | Direct in de template vóór </body> |
Na het plaatsen verschijnt er een knop in de rechterbenedenhoek. De positie wijzigt u naar links in de instellingen; kleur en thema stelt u daar ook in.
De widget laadt asynchroon en vertraagt de pagina niet. Als u een strikte CSP heeft geconfigureerd, sta dan het domein comag.vibevox.pro toe in script-src en connect-src.
Vormgeving#
Instellingen die de klant ziet:
- Winkelnaam en naam van de assistent. Het tweede is de handtekening van de gesprekspartner in de chatheader.
- Welkomstbericht. De eerste zin. Een goed welkomstbericht belooft voordeel, in plaats van alleen te groeten.
- Suggesties bij de start van het gesprek. Maximaal vier knoppen met vragen. Leeg — worden automatisch samengesteld op basis van de catalogus.
- Gesprekstoneel. Uit de lijst of eigen: “warm en beknopt”, “deskundig, u-vorm”.
- Accentkleur. Eén kleur bepaalt de knop, links en de markering van kaarten.
- Logo. Dit wordt ook het app-icoon op de telefoon.
- Microfoonknop. Spraakherkenning in de browser. Als de browser dit niet ondersteunt, neemt de klant een spraakbericht op, dat Gemini vervolgens transcribeert.
Rechts ziet u een live voorvertoning: deze verandert terwijl u typt. De knop “Opslaan” past de wijzigingen toe op de website.
Licht en donker thema#
De chat heeft twee ontwerpen, die u in één instellingenveld schakelt — “Thema”.
| Waarde | Wat de klant ziet |
|---|---|
| Zoals bij bezoeker | Het thema past zich aan de instellingen van de telefoon of computer van de bezoeker aan: 's nachts donker, overdag licht |
| Licht | Altijd een licht venster, ongeacht het apparaat |
| Donker | Altijd een donker venster |
Standaard staat de instelling op “zoals bij bezoeker”, en in de meeste gevallen is dit de juiste keuze: iemand met een donker thema op de telefoon krijgt geen witte flits in het gezicht, en wie gewend is aan een licht thema, ziet een vertrouwd venster.
Een vaste thema-instelling is nodig wanneer de website zelf in één stijl is ontworpen. Een donkere landingspagina met een lichte chat in de hoek ziet eruit als een lapmiddel, en vice versa. Stel in dat geval hetzelfde thema in als de website, en de widget zal naadloos opgaan in het design.
De accentkleur werkt bovenop beide thema's: knoppen, links en de markering van kaarten nemen uw bedrijfskleur over, terwijl de achtergrond en tekst mee veranderen met het thema. U controleert beide varianten het eenvoudigst in de voorvertoning rechts — deze wordt direct bijgewerkt terwijl u de waarde wijzigt.
Productkaarten leiden naar uw website#
De agent antwoordt niet met doorlopende tekst, maar met kaarten: foto, naam, prijs, knop. Achter de knop zit altijd een adres — de productpagina op uw website of het originele socialmediapost, als de kaart daarvandaan is samengesteld.
Binnen de widget op de website vindt de overgang plaats in hetzelfde venster, om geen tabbladen te vermenigvuldigen. Op de agentpagina via de link opent de kaart in een nieuw tabblad, zodat het gesprek niet verloren gaat.
Voor winkels op Shopify en WooCommerce is er een prettig detail: de knop opent niet alleen het product, maar plaatst het ook in de winkelwagen via het standaardmechanisme van het platform. Details vindt u in de artikelen over Shopify en WordPress.
Bovendien: de widget leest de productopmaak op de pagina waar deze is geopend en geeft deze door aan de agent. Daarom wordt de vraag “is deze er ook in het blauw?” op de productkaart in context begrepen, zonder verdere specificatie.
App op de telefoon van de klant#
De agentpagina kan als app worden geïnstalleerd. De klant opent de link vanaf de telefoon, ziet een voorstel om toe te voegen aan het startscherm en krijgt een icoon met uw logo.
- Naam onder icoon — één woord, maximaal 12 tekens. Leeg — dan nemen we het eerste woord van de winkelnaam.
- Icoon — het geüploade logo. Als er geen logo is, wordt het logo van Commerce Agents gebruikt.
- Op iPhone gebeurt de installatie via “Delen” → “Zet op beginscherm”, dit is een beperking van Safari, en de agent begeleidt de stappen zelf.
Na installatie kunt u pushmeldingen naar de klant sturen vanuit het gedeelte “Gesprekken”. De klant geeft hiervoor zelf toestemming door op het belletje in de chatheader te klikken.
Bijlagen van de klant#
In de chat zit een paperclip-icoon: voor foto, video of audio tot 20 megabyte. Als de browser geen spraakherkenning heeft, neemt het ingedrukt houden van de microfoon een spraakbericht op.
Gemini analyseert het bestand: wat er wordt getoond, welke tekst op de afbeelding staat, wat er hardop wordt gezegd. De agent antwoordt op basis van deze analyse, en u ziet in het gesprek zowel het bestand zelf als een korte beschrijving. Dit is handig in niches waar het makkelijker is om te laten zien dan te beschrijven: onderdelen, reparatie, selectie op basis van foto's.
Aankoop-pixel voor websites met winkelwagen#
Als de betaling op uw website plaatsvindt, en niet in de chat, voeg dan op de pagina “Bedankt voor uw bestelling” een kort fragment uit het dashboard toe, met invulling van het ordernummer en het bedrag. De aankoop wordt gekoppeld aan het gesprek, en in de statistieken is te zien welke conversaties leiden tot een verkoop.
Controle#
Drie minuten die u na de instelling kunt besteden:
- Open de website in incognitomodus en klik op de widgetknop. Stel een vraag over een product.
- Open de link naar de agent vanaf een telefoon. Controleer of de installatie wordt aangeboden.
- Stuur de link naar uzelf in een messenger en bekijk de preview.
- Kijk in “Gesprekken”: beide conversaties zouden daar moeten verschijnen.
Veelgestelde vragen#
De widget op de website en de link: zijn dat verschillende agents?#
Het is dezelfde agent. De catalogus, voorwaarden, gesprekken en aanvragen zijn gemeenschappelijk. Alleen de vormgeving verschilt: op de website een venster in de hoek, via de link een paginavullende pagina die u op uw telefoon kunt installeren.
Kan ik het adres van de link wijzigen?#
Het adres wordt gevormd uit de naam van de winkel bij het aanmaken van de storefront. Als u een ander adres wilt, neem dan contact met ons op via Telegram. We wijzigen het handmatig om te voorkomen dat reeds verspreide links breken.
Zal de widget de website vertragen?#
Nee. Het script is licht en laadt asynchroon, na de hoofdinhoud van de pagina. Het chatvenster zelf wordt pas geladen wanneer de koper op de knop klikt.
Wat ziet de koper als de agent is uitgeschakeld?#
Niets: de knop verschijnt niet en de pagina via de link toont dat de agent niet beschikbaar is. De schakelaar bevindt zich in de sectie “Widget en link”.
Hoe verwijder ik de tekst “Aangedreven door Commerce Agents”?#
Voorlopig niet: de handtekening blijft op alle abonnementen staan. Deze is klikbaar en leidt naar onze website. Dit is onderdeel van de prijs, waardoor de service 29 € kost in plaats van een aanzienlijk hoger bedrag.