Yleinen 1 rivin upotus
WhatsApp-painike: HTML & Custom Websites
Lisää kelluva WhatsApp-painike HTML & Custom Websites-sivustollesi. Valitse tervehdys ja anna kävijöiden lähettää viesti yrityksesi numeroon.
Asennus 1 min Kohde: index.html (before </body>) or root layout component
Vaiheittainen asennus: HTML & Custom Websites
Lisää WAButtonin asennuskoodi HTML & Custom Websites-sivustollesi näiden vaiheiden avulla.
- 1
Kopioi upotuskoodisi
Kopioi oma skriptikoodisi WAButton-widgetin hallintapaneelista tai käyttöönottonäkymästä.
Vinkki: Pidä async-attribuutti käytössä, jotta selain lataa skriptin asynkronisesti estämättä sivua.
- 2
Liitä ennen sulkevaa </body>-tagia
Liitä koodi juuri ennen </body>-tagia HTML-juuritiedostoosi (esim. index.html) tai juuriasettelukomponenttiisi (esim. layout.tsx, App.vue, base.blade.php).
Vinkki: Kun skripti on juuri ennen </body>-tagia, sivusi sisältö latautuu ensin.
<script src="https://widget.wabutton.app/v1.js" data-widget-id="YOUR_WIDGET_ID" async></script> - 3
Avaa selaimessa
Tallenna tiedosto ja päivitä selain. Kelluva WhatsApp-painikkeesi ilmestyy heti alakulmaan.
Miksi kauppiaat ja digitoimistot valitsevat WAButtonin: HTML & Custom Websites
Yksi yleinen script-tagi
Yksi pieni asynkroninen lataaja, joka toimii samalla tavalla staattisessa HTML:ssä, SSR:ssä ja SPA-kehyksissä.
Rajatut tyylit
Jokainen tyyli on rajattu wabutton-etuliitteisiin luokkanimiin, joten se ei muuta Tailwind-, Bootstrap- tai omien CSS-luokkiesi tyylejä.
Itsenäinen skripti
Rakennettu Preact-kirjastolla ja toimitetaan skriptin sisällä, joten sivusi ei tarvitse jQuery- tai React-kirjastoa eikä ikonifontteja.
Tukee SPA-navigointia
Säilyttää widgetin tilan automaattisesti selainpuolen reittisiirtymissä (React Router, Next.js, Vue Router).
Usein kysytyt kysymykset
Toimiiko WAButton yhden sivun sovellusten (SPA) kanssa, esimerkiksi React, Next.js tai Vue?
- Kyllä! WAButton alustetaan window-objektiin ja säilyy selainpuolen reitittimen siirtymissä ilman, että sitä tarvitsee suorittaa uudelleen jokaisella reitinvaihdolla.
Hidastaako WAButton Google Lighthouse- tai PageSpeed Insights -pisteitäni?
- WAButton on asynkroninen skripti, jonka koko on alle 40KB (gzip-pakattuna), ja se tarjoillaan Cloudflare-reunaverkosta, joten se ei viivästytä ensimmäistä piirtoa. Keskusteluikkuna latautuu vasta, kun kävijä avaa sen. Vaikutus omiin pisteisiisi riippuu sivustostasi, joten aja PageSpeed Insights ennen lisäämistä ja sen jälkeen.
Aiheeseen liittyvät ilmaiset työkalut
Luo yrityksellesi WhatsApp-linkkejä, QR-koodeja ja viestejä.
Lisää asennusohjeita
Lisää WhatsApp verkkosivustollesi.
Anna kävijöille tapa kysyä tuotteistasi, hinnoistasi tai saatavuudesta. Vastaa WhatsAppista, jota jo käytät.
Ilmainen paketti saatavilla. Luottokorttia ei tarvita.