Vdelava gradnika

Dodajte svoj AI klepetalni robot na katero koli spletno stran v nekaj sekundah z našo preprosto vdelano kodo.

Hitri začetek

Dodajte to kodo pred zapiralnim </body> tagom:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

To je vse! Vaš klepetalni robot je zdaj aktiven na vaši spletni strani.

Kje najti ID klepetalnega robota

1. Pojdite v nastavitve vašega klepetalnega robota
2. Odprite zavihek Embed
3. Kopirajte vdelano kodo (vsebuje vaš ID)

Prilagajanje gradnika

Videz in vedenje gradnika urejate v nadzorni plošči — ne v vdelani kodi. Pojdite v Dashboard → Chatbots → [your chatbot] → Widget, da prilagodite:

• Pozicija — spodaj desno, spodaj levo ali inline
• Barve — primarna, ozadje in barve besedila ter radij roba
• Velikost — širina in višina gradnika

Če želite klepet samodejno odpreti po nastavljivem zamiku, omogočite Auto-Open v zavihku Behavior iste strani z nastavitvami.

Spremembe se samodejno uporabijo na vaši spletni strani — ni potrebe po posodabljanju vdelane kode. Oglejte si vodič Widget Customization za vse razpoložljive možnosti.

Jezik gradnika se samodejno zazna iz brskalnika obiskovalca, glede na jezike, ki jih omogočite v zavihku Languages vašega klepetalnega robota.

FAQ gradnik

Prikažite Pogosta vprašanja kot harmoniko na kateri koli strani:

<div id="chatreact-faq"></div>
<script 
  src="https://www.chatreact.ai/embed/faq-widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  async
></script>

FAQ gradnik prikazuje objavljena pogosta vprašanja iz vašega klepetalnega robota. Barve in stilizacija (primarna, ozadje in barve besedila, radij roba) se nastavijo v Dashboard → FAQs → Settings.

Možnosti FAQ gradnika

Primer filtriranja po kategoriji

<script
  src="https://www.chatreact.ai/embed/faq-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-categories="shipping,returns"
  async
></script>

Optimizacija za mobilne naprave

Klepetalni gradnik je popolnoma optimiziran za mobilne naprave:

• Postavitev polne širine na majhnih zaslonih
• Animacija drsenja navzgor ob odpiranju
• Ravnanje s tipkovnico na iOS (gradnik se prilagodi zaslonski tipkovnici)
• Podpora za varno območje (safe-area) za zarezo in indikator doma na iPhone
• Večji cilji za dotik za boljšo uporabnost
• Velikost pisave v vnosu preprečuje samodejno povečanje na iOS

Vodiči po platformah

WordPress

Priporočeno: Uporabite uradni ChatReact WordPress Plugin za najlažjo integracijo z Gutenberg bloki, Elementor widgeti in kratkimi kodami.

Alternativa: Ročna vdelava preko vtičnika "Header/Footer Scripts":

1. Namestite poljuben vtičnik "Header/Footer Scripts"
2. Dodajte vdelano kodo v odsek za footer
3. Shrani in objavite

Shopify

Priporočeno: ChatReact Shopify App

Namestite aplikacijo ChatReact iz Shopify App Store za najlažjo integracijo:

1. Namestite aplikacijo ChatReact v vašem Shopify administraciji
2. Vnesite vaš Chatbot ID v nastavitvah aplikacije
3. Klepetalni gradnik se samodejno prikaže v vaši trgovini
4. Upravljajte dodelitve gradnika po strani ali omogočite povsod

Aplikacija podpira tudi Form in FAQ gradnike kot App Blocks v Theme Editorju.

Alternativa: Ročna vdelava

1. Pojdite na Online Store → Themes → Edit Code
2. Odprite theme.liquid
3. Dodajte kodo pred </body>
4. Shrani

Webflow

1. Pojdite v Project Settings → Custom Code
2. Dodajte v Footer Code
3. Objavite splet

Next.js / React

Uporabite komponento Script:

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="https://www.chatreact.ai/embed/widget.js"
        data-chatbot-id="YOUR_CHATBOT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue.js

Dodajte v vaš glavni App.vue ali postavitev:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://www.chatreact.ai/embed/widget.js';
  script.dataset.chatbotId = 'YOUR_CHATBOT_ID';
  script.async = true;
  document.body.appendChild(script);
});
</script>

JavaScript API

S programskim dostopom upravljajte z gradnikom:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

// Toggle open/closed
ChatReact.toggle();

// Start a fresh conversation
ChatReact.newChat();

// Remove the widget from the page entirely
// (useful in single-page apps, e.g. on route changes)
ChatReact.destroy();

Testiranje

Način predogleda

Pred vdelavo v živo:

1. Uporabite funkcijo Preview v vaši nadzorni plošči
2. Testirajte različne scenarije
3. Preverite, ali so odgovori natančni

Odpravljanje težav

Gradnik se ne prikaže

1. Preverite konzolo brskalnika za napake
2. Preverite, ali je ID klepetalnega robota pravilný
3. Prepričajte se, da je klepetalni robot aktiven (ni onemogočen)
4. Preverite, ali oglasni blokatorji motijo delovanje
5. Preverite porabo vašega načrta — gradnik se ustavi, ko dosežete mesečno omejitev vašega načrta

Vtičniki za predpomnjenje in optimizacijo

Nekateri vtičniki za predpomnjenje ali optimizacijo skriptov prepišejo URL-je skript, kar lahko prepreči nalaganje gradnika. Če se to zgodi, dodajte ekspliciten API URL v skript tag:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-api-url="https://www.chatreact.ai"
  async
></script>

Enak atribut deluje tudi na FAQ in form widget skripte.

Konflikti s stilom

Če se CSS vaše strani spopada z gradnikovim stilom:

• Gradnik omeji svoje stile na lastni vsezvitek (container) in uporablja visoko-prioritetna pravila za upiranje konfliktom
• Preverite vrednosti z-index elementov, ki prekrivajo gradnik
• Izogibajte se širokim !important pravilom v vaši strani, ki ciljajo splošne elemente

Zmogljivost

Gradnik je zasnovan za minimalen vpliv:

• Nalaga se asinhrono — nikoli ne blokira upodabljanja strani
• Lahka teža: približno 30 KB stisnjenega prenosa

Naslednji koraki

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — vdelajte samostojne obrazce z form widgetom