Widget på webbplatsen, länk till agenten och app på telefonen
Hur du lägger till agenten på din webbplats med en enda kodrad, hur den korta länken fungerar för sociala medier och meddelandetjänster, och hur kunden installerar din agent på sin telefon som en app.
Agenten har två ansikten. På webbplatsen är det ett fönster i hörnet som öppnas med en knapp. I sociala medier och meddelandetjänster är det en sida via en kort länk som fungerar som en liten butik och kan installeras på telefonen som en app. Katalog, villkor, dialoger och förfrågningar är gemensamma: agenten är en och samma.
Allt som beskrivs nedan finns i avsnittet “Widget och länk”.
Länk till agenten#
En kort adress av typen comag.vibevox.pro/c/din-butik. Placeras i profilens bio på Instagram, TikTok eller Telegram, skickas i WhatsApp, läggs i beskrivningen under en video på YouTube.
När länken skickas i en meddelandetjänst expanderar den till ett kort: omslagsbild, butiksnamn och beskrivning. Alla tre fält kan anpassas:
- Förhandsgranskningens rubrik — butiksnamnet som standard.
- Förhandsgranskningens beskrivning — en kort fras om vad man kan fråga om.
- Omslagsbild — skapas automatiskt från din accentfärg, logotyp och produktbilder. Du kan ladda upp en egen, storlek 1200 gånger 630 pixlar.
Det enklaste sättet att kontrollera hur förhandsgranskningen ser ut är att skicka länken till dig själv i Telegram.
Kod för webbplatsen#
En enda rad som klistras in före den avslutande taggen </body> på alla sidor. Kopieras med en knapp i kontrollpanelen.
Var du ska klistra in på populära plattformar:
| Plattform | Var du ska klistra in |
|---|---|
| Tilda | Webbplatsinställningar → Mer → HTML-kod för body |
| Shopify | Tema → Redigera kod → theme.liquid, före </body> |
| WordPress | Utseende → Temaredigerare → footer.php, eller plugin för kodinfogning |
| Wix | Inställningar → Anpassad kod → lägg till i Body end |
| Egen webbplats | Direkt i mallen före </body> |
Efter inklistringen visas en knapp i det nedre högra hörnet. Positionen kan ändras till vänster i inställningarna, färg och tema likaså.
Widgeten laddas asynkront och saktar inte ner sidan. Om du har en strikt CSP inställd, tillåt domänen comag.vibevox.pro i script-src och connect-src.
Utseende#
Inställningar som kunden ser:
- Butiksnamn och assistentens namn. Det senare är konversationspartnerns signatur i chattens sidhuvud.
- Hälsningsfras. Den första frasen. En bra hälsningsfras lovar nytta, snarare än att bara hälsa.
- Förslag i början av dialogen. Upp till fyra knappar med frågor. Tomt – de genereras automatiskt från katalogen.
- Konversationston. Från en lista eller egen: “varm och kortfattad”, “expert, formell”.
- Accentfärg. En färg bestämmer knappen, länkarna och markeringen av korten.
- Logotyp. Den blir också appikonen på telefonen.
- Mikrofonknapp. Taligenkänning i webbläsaren. Om webbläsaren inte stöder det, spelar kunden in ett röstmeddelande som Gemini transkriberar.
Till höger finns en liveförhandsgranskning: den ändras medan du skriver. Knappen “Spara” överför ändringarna till webbplatsen.
Ljust och mörkt tema#
Chatten har två utseenden, och de växlas i ett enda inställningsfält — “Tema”.
| Värde | Vad kunden ser |
|---|---|
| Som hos besökaren | Temat anpassar sig efter telefonens eller datorns inställningar: mörkt på natten, ljust på dagen |
| Ljus | Alltid ett ljust fönster, oavsett enhet |
| Mörk | Alltid ett mörkt fönster |
Som standard är “som hos besökaren” valt, och i de flesta fall är detta det rätta valet: en person med ett mörkt tema på telefonen får ingen vit blixt i ansiktet, och den som är van vid ett ljust tema ser ett bekant fönster.
Ett fast tema behövs när webbplatsen själv är designad i en specifik stil. En mörk landningssida med en ljus chatt i hörnet ser ut som en lapp, och vice versa. I så fall, ställ in samma tema som webbplatsen, så smälter widgeten in i designen.
Accentfärgen fungerar ovanpå båda teman: knappar, länkar och kortmarkeringar använder din företagsfärg, medan bakgrund och text ändras med temat. Det enklaste sättet att kontrollera båda varianterna är i förhandsgranskningen till höger – den ritas om direkt när du växlar värde.
Produktkort leder till din webbplats#
Agenten svarar inte med enbart text, utan med kort: fotografi, namn, pris, knapp. Bakom knappen finns alltid en adress – produktsidan på din webbplats eller det ursprungliga inlägget i sociala medier, om kortet är hämtat därifrån.
Inne i widgeten på webbplatsen sker övergången i samma fönster för att inte skapa för många flikar. På agentens sida via länken öppnas kortet i en ny flik, så att dialogen inte går förlorad.
För butiker på Shopify och WooCommerce finns en trevlig detalj: knappen öppnar inte bara produkten, utan lägger den i butikens varukorg med plattformens standardmekanism. Detaljer finns i artiklarna om Shopify och WordPress.
Dessutom: widgeten läser av produktmarkeringen på sidan där den öppnas och överför den till agenten. Därför förstås frågan “finns den i blått?” på produktkortet i sitt sammanhang, utan att behöva specificera vad det handlar om.
App på kundens telefon#
Agentens sida kan installeras som en app. Kunden öppnar länken från telefonen, ser ett förslag om att lägga till på hemskärmen och får en ikon med din logotyp.
- Namn under ikonen — ett ord upp till 12 tecken. Tomt – vi tar det första ordet i butiksnamnet.
- Ikon — den uppladdade logotypen. Om ingen logotyp finns, används Commerce Agents logotyp.
- På iPhone sker installationen via “Dela” → “Till hemskärmen”, detta är en begränsning i Safari, och agenten vägleder själv genom stegen.
Efter installationen kan push-meddelanden skickas till kunden från avsnittet “Dialoger”. Tillstånd för dessa ger kunden själv genom att trycka på klockikonen i chattens sidhuvud.
Bilagor från kunden#
I chatten finns en gemikon: foto, video eller ljud upp till 20 megabyte. Om webbläsaren inte har taligenkänning, spelar ett långt tryck på mikrofonen in ett röstmeddelande.
Filen analyseras av Gemini: vad som visas, vilken text som finns på bilden, vad som sägs högt. Agenten svarar baserat på denna analys, och du ser både filen och en kort beskrivning i dialogen. Detta är till stor hjälp i nischer där det är enklare att visa än att beskriva: reservdelar, reparationer, urval baserat på foto.
Köppixel för webbplats med varukorg#
Om betalningen sker på din webbplats, och inte i chatten, klistra in ett kort fragment från kontrollpanelen på sidan “Tack för din beställning”, och ange ordernummer och summa. Köpet kopplas till dialogen, och i statistiken kommer det att synas vilka konversationer som leder till försäljning.
Kontroll#
Tre minuter värda att lägga efter inställningen:
- Öppna webbplatsen i inkognitoläge och klicka på widgetknappen. Ställ en fråga om en produkt.
- Öppna länken till agenten från telefonen. Kontrollera att installation erbjuds.
- Skicka länken till dig själv i en meddelandetjänst och titta på förhandsvisningen.
- Titta in i “Dialoger”: båda konversationerna bör dyka upp där.
Vanliga frågor#
Widgeten på webbplatsen och länken – är det olika agenter#
Det är samma. Katalog, villkor, dialoger och förfrågningar är gemensamma. Endast utseendet skiljer sig: på webbplatsen är det ett fönster i hörnet, via länken är det en helskärmssida som kan installeras på telefonen.
Kan man ändra länkens adress#
Adressen skapas från butiksnamnet när skyltfönstret skapas. Om du behöver en annan, skriv till oss på Telegram – vi ändrar den manuellt för att inte förstöra redan utplacerade länkar.
Kommer widgeten att sakta ner webbplatsen#
Nej. Skriptet väger lite och laddas asynkront, efter sidans huvudinnehåll. Själva chattfönstret laddas först när kunden klickar på knappen.
Vad ser kunden om agenten är avstängd#
Inget: knappen visas inte, och sidan via länken visar att agenten är otillgänglig. Avstängningsknappen finns i avsnittet “Widget och länk”.
Hur tar man bort texten “Drivs av Commerce Agents”#
Inte än: signaturen finns kvar på alla abonnemang. Den är klickbar och leder till vår webbplats – detta är en del av priset, vilket gör att tjänsten kostar 29 € istället för en betydligt högre summa.