ChatLab-chatbotin lisääminen Webflow-sivustollesi antaa vierailijoille mahdollisuuden keskustella tekoälyavustajasi kanssa suoraan sivustollasi. Tässä oppaassa käydään läpi vaiheet upotuskoodin hakemiseen ChatLabista ja sen liittämiseen Webflow'hun.
Ennen kuin aloitat
Ennen kuin aloitat, luo chatbotisi ja tarkista, että Webflow-sivustosi tai -työtilasi sisältää pääsyn mukautettuun koodiin (custom code). Katso Webflown mukautetun koodin vaatimukset. Tarvitset myös oikeudet verkkosivuston muokkaamiseen ja julkaisemiseen.
Vaihe 1 - Kopioi upotuskoodi ChatLabista
- Kirjaudu sisään ChatLabiin ja valitse chatbot, jonka haluat upottaa
- Napsauta Deploy-välilehteä (Julkaise) ja valitse sitten oikealla olevasta alustapaneelista Webflow
- Valitse Widget (Widgetti) alla olevaa ylätunnisteasennusta varten. Jos haluat aina näkyvissä olevan chatin, valitse Iframe ja noudata alla olevia iframe-ohjeita. Katso vertailu artikkelista Mitä eroa on widgetillä ja Iframella?
- Napsauta Copy to clipboard (Kopioi leikepöydälle)
Vaihe 2 - Lisää koodi Webflow'hun
Koodin lisääminen Site Settings -asetuksiin (Sivustoasetukset) asettaa chatbotin Webflow-sivustosi jokaiselle sivulle.
- Avaa projektisi Webflow Dashboardissa
- Siirry kohtaan Site settings > Custom code (Mukautettu koodi)
- Liitä kopioitu koodi Head Code -osioon
- Napsauta Save Changes (Tallenna muutokset)
- Valitse Publish (Julkaise), jotta muutokset tulevat voimaan sivustollasi
Lisääminen vain yhdelle sivulle
Jos haluat chatbotin vain tietylle sivulle koko sivuston sijaan:
- Avaa sivu Webflow Designerissa
- Napsauta rataskuvaketta avataksesi Page Settings -asetukset (Sivuasetukset)
- Vieritä alas Custom Code -osioon
- Liitä koodi Head Code -kenttään
- Tallenna ja julkaise sivustosi
Aina näkyvissä olevan iframen lisääminen
Aseta Webflow Designerissa Code Embed -elementti (Koodinupotus) kohtaan, johon haluat chatbotin, liitä ChatLabista saatu Iframe-katkelma ja määritä sen leveys ja korkeus asettelullesi sopivaksi. Tallenna ja julkaise sivusto. Iframe kuuluu sivun sisältöön, ei Head Code -osioon.
Asennuksen tarkistaminen
Avaa Webflow-sivustosi selaimessa julkaisun jälkeen. Sinun pitäisi nähdä chat-kuvakkeen ilmestyvän sivun kulmaan (widget-tilassa) tai sivuun upotetun chat-ikkunan (iframe-tilassa). Napsauta kuvaketta avataksesi chatin ja lähetä testiviesti varmistaaksesi, että kaikki toimii.