Pagalbos centras
Chatboto pridėjimas prie svetainės

Chatboto pridėjimas prie jūsų svetainės

Paskutinį kartą atnaujinta:

Pridėję ChatLab prie savo svetainės, lankytojams suteiksite galimybę bendrauti su Jūsų dirbtinio intelekto pokalbių robotu tiesiogiai Jūsų puslapyje. Šiame vadove paaiškinama, kaip gauti įterpimo kodą ir pridėti jį prie svetainės.

Skirtuko Deploy atidarymas

Pagrindiniame valdymo skyde pasirinkite savo pokalbių robotą ir spustelėkite skirtuką Deploy (diegti).

Paryškintas skirtukas Deploy

Platformos pasirinkimas

Dešinėje esančiame skydelyje Select Platform (pasirinkti platformą) rodomos visos palaikomos platformos. Spustelėkite platformą, atitinkančią Jūsų svetainę, kad pamatytumėte konkrečiai jai pritaikytas diegimo instrukcijas.

Paryškintas skydelis Select Platform

Palaikomos platformos:

  • HTML Code - veikia su bet kuria svetaine, kurioje galite redaguoti HTML
  • WordPress - naudojant oficialų ChatLab įskiepį arba įterpiant kodą rankiniu būdu
  • Wix - per Settings > Advanced > Custom Code
  • Webflow - per Site Settings > Custom Code (reikalingas mokamas Webflow planas)
  • PrestaShop - naudojant ChatLab PrestaShop modulį arba įterpiant kodą rankiniu būdu
  • Shopify - per failą theme.liquid
  • WooCommerce - naudojant WordPress įskiepį arba įterpiant kodą rankiniu būdu
  • Abicart - per Store design > Themes > Site header
  • CS-Cart - per Design > Layouts > Custom HTML code

Kiekvienai platformai pateikiamos išsamios, konkrečiai tai integracijai skirtos instrukcijos. Platformoms, turinčioms atskirus pagalbos straipsnius, apačioje rodoma nuoroda View full instructions (peržiūrėti visas instrukcijas).

Pridėjimas naudojant HTML kodą

Parinktis HTML Code tinka bet kuriai svetainei, kurios pirminį kodą galite pasiekti. Pamatysite dvi įterpimo parinktis: Widget (valdiklis) ir Iframe.

Režimas Widget

Skirtuke Widget pateikiamas kodas, kuris Jūsų svetainėje prideda pokalbių piktogramą. Lankytojams spustelėjus šią piktogramą, atidaromas iškylantysis pokalbių langas.

Paryškintas skirtukas Widget

  1. Spustelėkite skirtuką Widget
  2. Spustelėkite Copy to clipboard (kopijuoti į iškarpinę), kad nukopijuotumėte kodą
  3. Raskite savo svetainės skiltį <head>
  4. Įklijuokite kodą kaip paskutinį elementą skiltyje <head>
  5. Atnaujinkite naršyklės puslapį ir įsitikinkite, kad pokalbių roboto piktograma rodoma

Režimas Iframe

Skirtuke Iframe pateikiamas kodas, kuris įterpia pokalbių robotą tiesiai į Jūsų puslapio turinį. Pokalbių robotas yra matomas visada ir jį gali supti kiti puslapio elementai.

Paryškintas skirtukas Iframe

  1. Spustelėkite skirtuką Iframe
  2. Spustelėkite Copy to clipboard, kad nukopijuotumėte kodą
  3. Įklijuokite kodą bet kurioje svetainės HTML vietoje, kurioje norite matyti pokalbių robotą
  4. Pritaikykite atributus width ir height, kad atitiktų Jūsų puslapio išdėstymą

Nežinote, kurį variantą pasirinkti? Išsamų palyginimą skaitykite straipsnyje Kuo skiriasi widget ir Iframe?.

Pridėjimas per WordPress arba WooCommerce

WordPress ir WooCommerce platformos siūlo du diegimo būdus: Plugin Installation (įskiepio diegimas, rekomenduojama) ir Manual Installation (rankinis diegimas).

WordPress platforma su skirtuku Plugin Installation

Plugin Installation (rekomenduojama)

  1. Spustelėkite Get WordPress Plugin (gauti WordPress įskiepį), kad atidarytumėte WordPress įskiepių saugyklą
  2. Įdiekite ir suaktyvinkite įskiepį „ChatLab - AI Chatbot“
  3. Eikite į įskiepio nustatymų puslapį WordPress administratoriaus aplinkoje
  4. Nukopijuokite savo Bot ID iš ChatLab paspausdami mygtuką Copy
  5. Įklijuokite Bot ID į įskiepio nustatymus ir išsaugokite
  6. Patikrinkite, ar pokalbių robotas rodomas Jūsų svetainėje

Manual Installation

Perjunkite į skirtuką Manual Installation, jei norite diegti naudodami kodą:

  1. Įdiekite WordPress įskiepį „Insert Headers and Footers“
  2. Eikite į Settings > Insert Headers and Footers
  3. Nukopijuokite kodą iš ChatLab ir įklijuokite jį į skiltį Header
  4. Išsaugokite pakeitimus ir atnaujinkite svetainę

Išsamią informaciją rasite straipsnyje Kaip pridėti pokalbių robotą prie WordPress svetainės.

Pridėjimas per kitas platformas

Naudodami Shopify, Wix, Webflow, PrestaShop, Abicart ir CS-Cart, pasirinkite atitinkamą platformą skydelyje Select Platform. Kiekvienoje platformoje pateikiama:

  1. Įterpimo kodas su Widget ir Iframe parinktimis
  2. Konkrečiai platformai skirtos nuoseklios kodo įklijavimo instrukcijos
  3. Nuoroda View full instructions, vedanti į išsamų platformos vadovą

Shopify platforma su nuosekliomis instrukcijomis

BDAR atitiktis

Jei norite, kad pokalbių robotas būtų įkeliamas tik gavus sutikimą dėl slapukų, peržiūrėkite straipsnį ChatLab nustatymas BDAR atitikčiai užtikrinti, kuriame rasite CookieBot, Usercentrics ir Google Tag Manager integracijos vadovus.

Turinio saugumo politika (CSP)

Jei Jūsų svetainėje naudojamos Content Security Policy antraštės, turite leisti ChatLab domenus, kad pokalbių robotas veiktų. Reikalingos direktyvos priklauso nuo to, ar naudojate režimą Widget, ar Iframe.

Režimas Widget

Valdiklis Jūsų puslapyje įkelia scenarijų, kuris sukuria pokalbių sąsają. Įtraukite šias direktyvas į savo CSP antraštę:

script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com 'unsafe-inline';
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;

Pagal numatytuosius nustatymus valdiklis įterpia kai kuriuos stilius tiesiogiai į kodą (inline), todėl direktyvoje style-src būtina nurodyti 'unsafe-inline'.

CSP Safe Mode - kaip išvengti unsafe-inline

Jei Jūsų svetainės saugumo politika neleidžia naudoti 'unsafe-inline' direktyvoje style-src, galite įjungti CSP Safe Mode (CSP saugųjį režimą). Tokiu atveju valdiklis visus stilius įkelia iš išorinių CSS failų, užuot įterpęs juos tiesiogiai.

Norėdami jį įjungti, prieš ChatLab scenarijaus žymę pridėkite window.aichatbotCspSafe = true;:

<script>
  window.aichatbotApiKey = "YOUR_API_KEY";
  window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>

Įjungus CSP Safe Mode, parametro 'unsafe-inline' nebereikia, o Jūsų CSP antraštėje galima naudoti:

script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com;
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;

Režimas Iframe

Naudojant Iframe, visas pokalbių robotas įkeliamas iš vieno URL adreso, todėl reikalinga tik viena direktyva:

frame-src https://api.chatlab.com;