Widget på nettstedet, lenke til agenten og app på telefonen
Slik legger du agenten på nettstedet med én kodelinje, hvordan en kort lenke fungerer for sosiale medier og meldingsapper, og hvordan kunden installerer agenten din som en app på telefonen.
Agenten har to ansikter. På nettstedet er det et vindu i hjørnet som åpnes med en knapp. I sosiale medier og meldingsapper er det en side med en kort lenke, som fungerer som en liten butikk og kan installeres på telefonen som en app. Katalog, vilkår, dialoger og henvendelser er likevel felles: agenten er én.
Alt som er beskrevet nedenfor, finnes i seksjonen “Widget og lenke”.
Lenke til agenten#
En kort adresse av typen comag.vibevox.pro/c/your-shop. Plasseres i profilbioen på Instagram, TikTok eller Telegram, sendes i WhatsApp, legges i beskrivelsen under en YouTube-video.
Når lenken sendes i en meldingsapp, utvides den til et kort: forsidebilde, butikknavn og beskrivelse. Alle tre feltene kan tilpasses:
- “Forhåndsvisningstittel” — butikknavnet som standard.
- “Forhåndsvisningsbeskrivelse” — en kort setning om hva man kan spørre om.
- “Forsidebilde” — genereres automatisk fra din aksentfarge, logo og produktbilder. Du kan laste opp ditt eget, størrelse 1200 ganger 630 piksler.
Den enkleste måten å sjekke hvordan forhåndsvisningen ser ut på, er å sende lenken til deg selv i Telegram.
Kode for nettstedet#
Én linje som settes inn før den avsluttende </body>-taggen på alle sider. Kopieres med en knapp i kontrollpanelet.
Hvor du skal sette inn koden på populære plattformer:
| Plattform | Hvor du skal sette inn |
|---|---|
| Tilda | Nettstedinnstillinger → Mer → HTML-kode for body |
| Shopify | Tema → Rediger kode → theme.liquid, før </body> |
| WordPress | Utseende → Temaredigerer → footer.php, eller et kodeinnsettingsplugin |
| Wix | Innstillinger → Egendefinert kode → legg til i Body end |
| Eget nettsted | Direkte i malen før </body> |
Etter innsetting vil en knapp vises i nedre høyre hjørne. Posisjonen kan endres til venstre i innstillingene; farge og tema justeres også der.
Widgeten lastes asynkront og forsinker ikke siden. Hvis du har en streng CSP konfigurert, tillat domenet comag.vibevox.pro i script-src og connect-src.
Utforming#
Innstillinger som kunden ser:
- Butikknavn og assistentens navn. Det siste er samtalepartnerens signatur i chat-hodet.
- Hilsen. Den første setningen. En god hilsen lover nytte, den bare hilser ikke.
- Forslag i starten av dialogen. Opptil fire knapper med spørsmål. Hvis tom, genereres de automatisk basert på katalogen.
- Samtaletonen. Fra en liste eller din egen: “varm og kortfattet”, “ekspert, formell”.
- Aksentfarge. Én farge definerer knappen, lenkene og uthevingen av kortene.
- Logo. Den vil også bli app-ikonet på telefonen.
- Mikrofonknapp. Talegjenkjenning i nettleseren. Hvis nettleseren ikke støtter det, vil kunden spille inn en talemelding, og Gemini vil transkribere den.
Til høyre er det en live forhåndsvisning: den endres mens du skriver. Knappen “Lagre” overfører endringene til nettstedet.
Lys og mørk modus#
Chatten har to utforminger, og de byttes i ett innstillingsfelt — “Tema”.
| Verdi | Hva kunden ser |
|---|---|
| Som hos besøkende | Temaet tilpasses innstillingene på telefonen eller datamaskinen: mørkt om natten, lyst om dagen |
| Lys | Alltid et lyst vindu, uavhengig av enheten |
| Mørk | Alltid et mørkt vindu |
Standardinnstillingen er “som hos besøkende”, og i de fleste tilfeller er dette det riktige valget: en person med mørk modus på telefonen vil ikke få et hvitt glimt i ansiktet, og den som er vant til lys modus, vil se et kjent vindu.
En fast modus er nødvendig når nettstedet selv er utformet i én stil. En mørk landingsside med en lys chat i hjørnet ser ut som en lapp, og omvendt. I så fall velger du samme modus som nettstedet, og widgeten vil smelte sammen med designet.
Aksentfargen fungerer over begge modusene: knapper, lenker og utheving av kort får din bedriftens farge, mens bakgrunn og tekst endres sammen med modusen. Den enkleste måten å sjekke begge variantene på er i forhåndsvisningen til høyre — den oppdateres umiddelbart mens du bytter verdi.
Produktkort fører til nettstedet ditt#
Agenten svarer ikke med sammenhengende tekst, men med kort: fotografi, navn, pris, knapp. Bak knappen er det alltid en adresse — produktsiden på nettstedet ditt eller det opprinnelige innlegget i sosiale medier, hvis kortet er hentet derfra.
Inne i widgeten på nettstedet skjer overgangen i samme vindu for å unngå å generere mange faner. På agentsiden via lenken åpnes kortet i en ny fane, slik at dialogen ikke går tapt.
For butikker på Shopify og WooCommerce er det en fin detalj: knappen åpner ikke bare produktet, men legger det i butikkens handlekurv ved hjelp av plattformens standardmekanisme. Detaljer finner du i artiklene om Shopify og WordPress.
I tillegg: widgeten leser produktoppmerkingen på siden der den er åpnet, og overfører den til agenten. Derfor forstås spørsmålet “finnes den i blått?” på produktkortet i kontekst, uten behov for å spesifisere hva det gjelder.
App på kundens telefon#
Agentsiden kan installeres som en app. Kunden åpner lenken fra telefonen, ser et tilbud om å legge til på startskjermen og får et ikon med din logo.
- Navn under ikonet — ett ord opptil 12 tegn. Hvis tomt, bruker vi det første ordet i butikknavnet.
- Ikon — den opplastede logoen. Hvis det ikke er noen logo, brukes Commerce Agents-logoen.
- På iPhone skjer installasjonen via “Del” → “Legg til på Hjem-skjermen”, dette er en begrensning i Safari, og agenten veileder selv gjennom trinnene.
Etter installasjon kan kunden motta push-varsler fra seksjonen “Dialoger”. Tillatelse for dette gir han selv ved å trykke på bjellen i chat-hodet.
Vedlegg fra kunden#
I chatten er det et bindersikon: bilde, video eller lyd på opptil 20 megabyte. Hvis nettleseren ikke har talegjenkjenning, vil det å holde mikrofonen inne spille inn en talemelding.
Gemini analyserer filen: hva som vises, hvilken tekst som er på bildet, hva som sies høyt. Agenten svarer basert på denne analysen, og du ser både selve filen og en kort beskrivelse i dialogen. Dette er nyttig i nisjer hvor det er enklere å vise enn å beskrive: reservedeler, reparasjon, utvalg basert på bilde.
Kjøpspiksel for nettsted med handlekurv#
Hvis betalingen skjer på nettstedet ditt, og ikke i chatten, sett inn et kort fragment fra kontrollpanelet på siden “Takk for bestillingen”, og legg inn ordrenummer og beløp. Kjøpet vil bli knyttet til dialogen, og i statistikken vil det være synlig hvilke samtaler som ender i salg.
Sjekk#
Tre minutter som er verdt å bruke etter oppsettet:
- Åpne nettsiden i inkognitomodus og klikk på widget-knappen. Still et spørsmål om et produkt.
- Åpne lenken til agenten fra telefonen. Sjekk at installasjon tilbys.
- Send lenken til deg selv i en meldingstjeneste og se på forhåndsvisningen.
- Sjekk “Dialoger”: begge samtalene skal vises der.
Ofte stilte spørsmål#
Widgeten på nettsiden og lenken – er det ulike agenter?#
Det er den samme. Katalog, vilkår, dialoger og henvendelser er felles. Det er bare utformingen som er annerledes: på nettsiden er det et vindu i hjørnet, mens lenken fører til en fullskjermsside som kan installeres på telefonen.
Kan lenkeadressen endres?#
Adressen genereres fra butikkens navn når du oppretter butikkfronten. Hvis du ønsker en annen, skriv til oss på Telegram — så endrer vi det manuelt for å unngå å ødelegge lenker som allerede er i bruk.
Vil widgeten gjøre nettsiden tregere?#
Nei. Skriptet veier lite og lastes asynkront, etter hovedinnholdet på siden. Selve chatvinduet lastes bare inn når kunden klikker på knappen.
Hva ser kunden hvis agenten er slått av?#
Ingenting: knappen vises ikke, og siden via lenken viser at agenten er utilgjengelig. Bryteren finner du under “Widget og lenke”.
Hvordan fjerne teksten “Drevet av Commerce Agents”?#
Foreløpig ikke mulig: signaturen forblir på alle abonnementer. Den er klikkbar og fører til nettsiden vår — dette er en del av prisen, som gjør at tjenesten koster 29 € i stedet for en betydelig høyere sum.