Pridėję ChatLab pokalbių robotą prie savo „Webflow“ svetainės, lankytojams suteiksite galimybę bendrauti su DI asistentu tiesiogiai Jūsų svetainėje. Šiame vadove paaiškinama, kaip gauti įterpimo kodą iš „ChatLab“ ir įklijuoti jį į „Webflow“.
Prieš pradedant
Prieš pradėdami, sukurkite savo pokalbių robotą ir patikrinkite, ar Jūsų „Webflow“ svetainė arba darbo erdvė palaiko pasirinktinio kodo (angl. custom code) funkciją. Žr. „Webflow“ pasirinktinio kodo reikalavimus. Taip pat turite turėti leidimą redaguoti ir publikuoti svetainę.
1 žingsnis - nukopijuokite įterpimo kodą iš „ChatLab“
- Prisijunkite prie ChatLab ir pasirinkite pokalbių robotą, kurį norite įterpti
- Spustelėkite skirtuką Deploy (įdiegti), tada dešinėje esančiame platformų skydelyje pasirinkite Webflow
- Pasirinkite Widget (valdiklis), jei norite įdiegti kodą antraštėje, kaip aprašyta toliau. Jei norite visada matomo pokalbių lango, pasirinkite Iframe ir vadovaukitės toliau pateiktomis „iframe“ instrukcijomis. Palyginimą rasite straipsnyje Kuo skiriasi widget ir Iframe?
- Spustelėkite Copy to clipboard (kopijuoti į iškarpinę)
2 žingsnis - pridėkite kodą prie „Webflow“
Pridėjus kodą skiltyje Site Settings (svetainės nustatymai), pokalbių robotas bus rodomas kiekviename Jūsų „Webflow“ svetainės puslapyje.
- Atidarykite savo projektą „Webflow Dashboard“ valdymo skyde
- Eikite į Site settings > Custom code
- Įklijuokite nukopijuotą kodą į skiltį Head Code
- Spustelėkite Save Changes (išsaugoti pakeitimus)
- Pasirinkite Publish (publikuoti), kad pakeitimai įsigaliotų Jūsų svetainėje
Pridėjimas tik konkrečiame puslapyje
Jei norite, kad pokalbių robotas būtų rodomas tik konkrečiame puslapyje, o ne visoje svetainėje:
- Atidarykite puslapį „Webflow Designer“ aplinkoje
- Spustelėkite krumpliaračio piktogramą, kad atidarytumėte Page Settings (puslapio nustatymai)
- Slinkite žemyn iki skilties Custom Code
- Įklijuokite kodą į laukelį Head Code
- Išsaugokite ir publikuokite svetainę
Visada matomo „iframe“ pridėjimas
„Webflow Designer“ aplinkoje įkelkite Code Embed (kodo įterpimo) elementą ten, kur norite matyti pokalbių robotą, įklijuokite Iframe kodo fragmentą iš „ChatLab“ ir nustatykite jo plotį bei aukštį pagal puslapio išdėstymą. Išsaugokite ir publikuokite svetainę. „Iframe“ kodas turi būti puslapio turinyje, o ne skiltyje Head Code.
Įdiegimo patikrinimas
Publikavę atidarykite savo „Webflow“ svetainę naršyklėje. Puslapio kampe turėtumėte matyti pokalbių piktogramą (naudojant valdiklio režimą) arba puslapyje įterptą pokalbių langą (naudojant „iframe“ režimą). Spustelėkite piktogramą, kad atidarytumėte pokalbį, ir išsiųskite bandomąją žinutę, kad įsitikintumėte, jog viskas veikia sklandžiai.