Verkkosivun widget, linkki agenttiin ja puhelinsovellus
Miten agentti asennetaan verkkosivulle yhdellä koodirivillä, miten lyhyt linkki toimii sosiaalisessa mediassa ja viestisovelluksissa, ja miten asiakas asentaa agenttisi puhelimeensa sovelluksena.
Agentilla on kaksi ilmettä. Verkkosivustolla se on kulmassa oleva ikkuna, joka avautuu napista. Sosiaalisessa mediassa ja viestisovelluksissa se on lyhytlinkkisivu, joka toimii pienenä kauppana ja jonka voi asentaa puhelimeen sovelluksena. Luettelo, ehdot, keskustelut ja tilaukset ovat kuitenkin yhteisiä: agentti on yksi.
Kaikki alla kuvattu löytyy osiosta “Widget ja linkki”.
Linkki agenttiin#
Lyhyt osoite, esimerkiksi comag.vibevox.pro/c/your-shop. Sen voi lisätä Instagramin, TikTokin tai Telegramin profiilin kuvaukseen, lähettää WhatsAppissa tai laittaa YouTube-videon kuvaukseen.
Kun linkki lähetetään viestisovellukseen, se avautuu kortiksi: kansikuva, kaupan nimi ja kuvaus. Kaikki kolme kenttää ovat muokattavissa:
- Esikatselun otsikko — oletuksena kaupan nimi.
- Esikatselun kuvaus — lyhyt lause siitä, mitä voi kysyä.
- Kansikuva — muodostuu automaattisesti korostusväristäsi, logostasi ja tuotekuvistasi. Voit ladata oman, koko 1200 x 630 pikseliä.
Helpoin tapa tarkistaa esikatselun ulkoasu on lähettää linkki itsellesi Telegramissa.
Koodi verkkosivustolle#
Yksi rivi, joka lisätään ennen sulkevaa </body>-tagia kaikille sivuille. Kopioidaan napilla hallintapaneelista.
Mihin se tarkalleen ottaen lisätään suosituilla alustoilla:
| Alusta | Mihin lisätään |
|---|---|
| Tilda | Verkkosivuston asetukset → Lisää → HTML-koodi bodyyn |
| Shopify | Teema → Muokkaa koodia → theme.liquid, ennen </body> |
| WordPress | Ulkoasu → Teemaeditori → footer.php, tai koodin lisäysliitännäinen |
| Wix | Asetukset → Mukautettu koodi → lisää Body endiin |
| Oma sivusto | Suoraan mallipohjaan ennen </body> |
Lisäämisen jälkeen oikeaan alakulmaan ilmestyy painike. Sijainnin voi vaihtaa vasempaan asetuksista, väri ja teema ovat myös siellä.
Widget latautuu asynkronisesti eikä hidasta sivua. Jos sinulla on tiukka CSP käytössä, salli comag.vibevox.pro-verkkotunnus script-src- ja connect-src-asetuksissa.
Ulkoasu#
Asetukset, jotka asiakas näkee:
- Kaupan nimi ja assistentin nimi. Jälkimmäinen on keskustelukumppanin nimi chatin yläosassa.
- Tervehdys. Ensimmäinen lause. Hyvä tervehdys lupaa hyötyä, eikä vain tervehdi.
- Vinkit keskustelun alussa. Enintään neljä kysymyspainiketta. Jos tyhjä, ne kootaan automaattisesti luettelon perusteella.
- Viestinnän sävy. Luettelosta tai oma: “lämmin ja ytimekäs”, “asiantunteva, teitittelevä”.
- Korostusväri. Yksi väri määrittää painikkeen, linkit ja korttien korostuksen.
- Logo. Siitä tulee myös sovelluksen kuvake puhelimessa.
- Mikrofonipainike. Puheentunnistus selaimessa. Jos selain ei tue sitä, asiakas tallentaa ääniviestin, ja Gemini purkaa sen.
Oikealla on reaaliaikainen esikatselu: se muuttuu kirjoittaessasi. “Tallenna”-painike siirtää muutokset verkkosivustolle.
Vaalea ja tumma teema#
Chatilla on kaksi ulkoasua, ja ne vaihdetaan yhdessä asetuskentässä — “Teema”.
| Arvo | Mitä asiakas näkee |
|---|---|
| Kuten vierailijalla | Teema mukautuu hänen puhelimensa tai tietokoneensa asetuksiin: yöllä tumma, päivällä vaalea |
| Vaalea | Aina vaalea ikkuna, laitteesta riippumatta |
| Tumma | Aina tumma ikkuna |
Oletuksena on “kuten vierailijalla”, ja useimmissa tapauksissa tämä on oikea valinta: puhelimessaan tummaa teemaa käyttävä henkilö ei saa valkoista välähdystä kasvoilleen, ja vaaleaan tottunut näkee tutun ikkunan.
Kiinteää teemaa tarvitaan, kun verkkosivusto on itse tehty yhdellä tyylillä. Tumma laskeutumissivu, jossa on vaalea chat kulmassa, näyttää paikalta, ja päinvastoin. Tällöin aseta sama teema kuin verkkosivustolla, ja widget sulautuu muotoiluun.
Korostusväri toimii molempien teemojen päällä: painikkeet, linkit ja korttien korostus käyttävät yrityksesi väriä, kun taas tausta ja teksti muuttuvat teeman mukana. Molemmat vaihtoehdot on helpoin tarkistaa oikealla olevasta esikatselusta – se päivittyy heti, kun vaihdat arvoa.
Tuotekortit johtavat verkkosivustollesi#
Agentti vastaa ei yhtenäisellä tekstillä, vaan korteilla: valokuva, nimi, hinta, painike. Painikkeen takana on aina osoite – tuotesivu verkkosivustollasi tai alkuperäinen sosiaalisen median julkaisu, jos kortti on koottu sieltä.
Widgetin sisällä verkkosivustolla siirtyminen tapahtuu samassa ikkunassa, jotta välilehtiä ei synny liikaa. Agentin linkkisivulla kortti avautuu uuteen välilehteen, jotta keskustelu ei katoa.
Shopify- ja WooCommerce-kaupoille on miellyttävä yksityiskohta: painike ei vain avaa tuotetta, vaan lisää sen kaupan ostoskoriin alustan omalla mekanismilla. Lisätietoja löydät artikkeleista Shopify ja WordPress.
Ja vielä: widget lukee tuotteen merkinnät sivulta, jolla se on avattu, ja välittää ne agentille. Siksi kysymys “onko sinisenä?” tuotekortilla ymmärretään kontekstissa, ilman tarkennusta siitä, mistä on kyse.
Sovellus asiakkaan puhelimessa#
Agentin sivu voidaan asentaa sovellukseksi. Asiakas avaa linkin puhelimella, näkee ehdotuksen lisätä sen aloitusnäyttöön ja saa kuvakkeen logollasi.
- Nimi kuvakkeen alla — yksi sana, enintään 12 merkkiä. Jos tyhjä, käytämme kaupan nimen ensimmäistä sanaa.
- Kuvake — ladattu logo. Jos logoa ei ole, käytetään Commerce Agentsin logoa.
- iPhonella asennus tapahtuu “Jaa” → “Lisää Koti-valikkoon” -toiminnolla, tämä on Safarin rajoitus, ja agentti opastaa vaiheissa itse.
Asennuksen jälkeen asiakkaalle voidaan lähettää push-ilmoituksia osiosta “Keskustelut”. Hän antaa luvan niihin itse painamalla kellokuvaketta chatin yläosassa.
Liitteet asiakkaalta#
Chatissa on liitekuvake: valokuva, video tai ääni, enintään 20 megatavua. Jos selaimessa ei ole puheentunnistusta, mikrofonin painaminen tallentaa ääniviestin.
Gemini analysoi tiedoston: mitä näytetään, mitä tekstiä kuvassa on, mitä sanotaan ääneen. Agentti vastaa tämän analyysin perusteella, ja näet keskustelussa sekä itse tiedoston että lyhyen kuvauksen. Tämä on hyödyllistä aloilla, joilla on helpompi näyttää kuin kuvata: varaosat, korjaus, valokuvan perusteella valinta.
Ostospikseli verkkosivustolle, jossa on ostoskori#
Jos maksu tapahtuu verkkosivustollasi, eikä chatissa, lisää “Kiitos tilauksesta” -sivulle lyhyt koodinpätkä hallintapaneelista, syöttämällä tilauksen numeron ja summan. Ostos linkittyy keskusteluun, ja tilastoista näkyy, mitkä keskustelut päättyvät myyntiin.
Tarkistus#
Kolme minuuttia, jotka kannattaa käyttää asetusten tekemisen jälkeen:
- Avaa verkkosivusto incognito-tilassa ja napsauta widget-painiketta. Kysy tuotteesta.
- Avaa agentin linkki puhelimella. Tarkista, että asennusta ehdotetaan.
- Lähetä linkki itsellesi pikaviestimellä ja katso esikatselua.
- Kurkista “Keskustelut”-osioon: molempien keskustelujen pitäisi näkyä siellä.
Usein kysytyt kysymykset#
Ovatko verkkosivuston widget ja linkki eri agentteja#
Sama agentti. Tuotevalikoima, ehdot, keskustelut ja hakemukset ovat yhteisiä. Vain ulkoasu eroaa: verkkosivustolla ikkuna on kulmassa, linkin kautta avautuu koko näytön sivu, jonka voi asentaa puhelimeen.
Voiko linkin osoitetta muuttaa#
Osoite muodostuu kaupan nimestä myyntisivun luomisen yhteydessä. Jos tarvitset toisenlaisen, kirjoita meille Telegramissa – vaihdamme sen manuaalisesti, jotta jo jaettuja linkkejä ei rikota.
Hidastaako widget sivustoa#
Ei. Skripti on kevyt ja latautuu asynkronisesti, sivun pääsisällön jälkeen. Itse chat-ikkuna latautuu vasta, kun asiakas napsauttaa painiketta.
Mitä asiakas näkee, jos agentti on pois päältä#
Ei mitään: painike ei ilmesty, ja linkin kautta avautuva sivu ilmoittaa, että agentti ei ole käytettävissä. Katkaisija löytyy osiosta “Widget ja linkki”.
Miten “Powered by Commerce Agents” -tekstin saa pois#
Ei toistaiseksi mitenkään: allekirjoitus pysyy kaikilla hinnoittelutasoilla. Se on klikattavissa ja johtaa verkkosivustollemme – tämä on osa hintaa, jonka ansiosta palvelu maksaa 29 € huomattavasti suuremman summan sijaan.