# WhatsApp-widgetti ## WhatsApp-widgetin integrointi Lisää kelluva WhatsApp-chat-painike verkkosivustollesi tämän yksinkertaisen oppaan avulla. > **Hyvä tietää.** WhatsApp-widget on yksinkertainen "napsauta ja keskustele" -painike – sen napsauttaminen avaa WhatsAppin vierailijallesi, jotta hän voi lähettää sinulle viestin siellä. Se ei tuo viestejä Keskustelut-postilaatikkoosi eikä käynnistä tekoälyä itsestään. Jos haluat sivustollesi upotetun tekoälypohjaisen chat-kokemuksen, käytä sen sijaan erillistä [Chat-widgetiä](chat-widget.md). > > **Haluatko vain tavallisen linkin tai oman painikkeen?** Jos et halua kelluvaa widgetiä ja haluat mieluummin linkittää oman painikkeesi (tai tekstinpätkän) suoraan WhatsApp-keskusteluun, siirry kohtaan [Haluatko mieluummin tavallisen linkin tai painikkeen? (wa.me)](#prefer-a-plain-link-or-button-wa-me) alla. Tekstiviestivastineen löydät kohdasta [Napsauta ja lähetä tekstiviesti (SMS) -linkin lisääminen](../messaging-channels/sms.md#adding-a-click-to-text-sms-link-to-your-website). ### Asennus 1. Avaa verkkosivustosi HTML-tiedosto tekstieditorissa. 2. Etsi ``-tunniste (yleensä HTML-tiedostosi lopussa). 3. Liitä seuraava skripti juuri ennen ``-tunnistetta: {% code overflow="wrap" %} ```html ``` {% endcode %} 1. Korvaa yllä olevassa koodissa: * `NUMBER` WhatsApp-numerollasi * Esimerkki: jos numerosi on +1 555 123 4567, käytä vain: 15551234567 ### Mukautetun viestin lisääminen Jos haluat, että esitäytetty viesti ilmestyy, kun joku napsauttaa painiketta: 1. Käytä sen sijaan tätä koodia: {% code overflow="wrap" %} ```html ``` {% endcode %} 1. Esimerkki oikealla numerolla ja viestillä: {% code overflow="wrap" %} ```html ``` {% endcode %} ### Mitä saat Asennuksen jälkeen näet automaattisesti: * Vihreän WhatsApp-painikkeen verkkosivustosi oikeassa alakulmassa * Painike pysyy näkyvissä sivua vieritettäessä * Painike toimii saumattomasti mobiililaitteilla * Hienovarainen animaatio ilmestyy, kun viet hiiren painikkeen päälle ### Lisätietoja * Puhelinnumerosi voidaan kirjoittaa seuraavilla tavoilla tai ilman niitä: * Plus-merkki (+) * Välilyönnit * Yhdysviivat (-) * Nämä käsitellään automaattisesti oikein * Viesti voi sisältää välilyöntejä luonnollisesti * Ei vaadi lisätiedostoja tai asennuksia * Painike mukautuu automaattisesti mobiilinäytöille ### Esimerkki kokonaisesta verkkosivusta {% code overflow="wrap" %} ```html My Website ``` {% endcode %} ## Haluatko mieluummin tavallisen linkin tai painikkeen? (wa.me) Yllä oleva widget tarjoaa valmiin kelluvan painikkeen. Mutta jos sinulla on jo oma painike (tai valikkolinkki, kuva tai tekstinpätkä) ja haluat vain, että se avaa WhatsApp-keskustelun numerollasi, et tarvitse widgetiä lainkaan – linkitä se vain `wa.me`-URL-osoitteeseen. Muoto on: {% code overflow="wrap" %} ``` https://wa.me/NUMBER ``` {% endcode %} Korvaa `NUMBER` koko numerollasi kansainvälisessä muodossa – **vain numerot, ei plus-merkkiä, välilyöntejä tai yhdysviivoja**. Esimerkiksi numerolle +31 6 5801 5937 käyttäisit: {% code overflow="wrap" %} ``` https://wa.me/31658015937 ``` {% endcode %} ### Viestin esitäyttö Jos haluat, että viesti on valmiiksi kirjoitettuna, kun keskustelu avautuu, lisää `?text=` ja sen perään viestisi: {% code overflow="wrap" %} ``` https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question ``` {% endcode %} Viestin välilyönnit on kirjoitettava muodossa `%20` (näin linkit käsittelevät välilyöntejä). ### Lisääminen painikkeeseen Linkitä mikä tahansa painike kyseiseen URL-osoitteeseen – täsmälleen samalla tavalla kuin linkittäisit painikkeen mihin tahansa muuhun verkko-osoitteeseen. Raakana HTML-koodina se näyttää tältä: {% code overflow="wrap" %} ```html Chat on WhatsApp ``` {% endcode %} Verkkosivujen rakennustyökalussa (Wix, Squarespace, WordPress, Webflow jne.) lisää painike tavalliseen tapaan ja liitä `wa.me`-URL-osoite sen "linkki" / "URL"-kenttään. > **Haluatko yhden lyhyen linkin, joka vaihtelee useiden numeroiden välillä, muistaa palaavat vierailijat ja seuraa klikkauksia?** Käytä lyhytlinkkejä (kohdassa **Asetukset → Kanavat**) raa'an `wa.me`-URL-osoitteen sijaan.