Ugradnja widgeta

Dodajte svoj AI chatbot na bilo koju web-stranicu za nekoliko sekundi pomoću našeg jednostavnog koda za ugradnju.

Brzi početak

Dodajte ovaj kod prije zatvarajućeg </body> taga:

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

To je to! Vaš chatbot je sada aktivan na vašoj web-stranici.

Pronalaženje ID-a vašeg chatbota

1. Idite u postavke vašeg chatbota
2. Otvorite karticu Embed
3. Kopirajte embed kod (sadrži vaš ID)

Prilagodba widgeta

Izgled i ponašanje widgeta konfiguriraju se u vašem kontrolnom panelu — ne u embed kodu. Idite na Dashboard → Chatbots → [your chatbot] → Widget da biste podesili:

• Pozicija — donji desni kut, donji lijevi kut, ili inline
• Boje — primarna, pozadinska i boja teksta, plus zaobljenje rubova
• Veličina — širina i visina widgeta

Za automatsko otvaranje chata nakon konfigurabilnog kašnjenja, omogućite Auto-Open u kartici Behavior iste stranice postavki.

Promjene se primjenjuju na vašu web-stranicu automatski — nije potrebno ažurirati embed kod. Pogledajte vodič Widget Customization za sve dostupne opcije.

Jezik widgeta otkriva se automatski prema jezicima vašeg posjetitelja u pregledniku, na temelju jezika koje omogućite u kartici Languages vašeg chatbota.

FAQ widget

Prikažite često postavljana pitanja kao akordeon na bilo kojoj stranici:

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

FAQ widget prikazuje objavljena često postavljana pitanja iz vašeg chatbota. Boje i stilovi (primarna, pozadinska i boja teksta, zaobljenje rubova) postavljaju se u Dashboard → FAQs → Settings.

Opcije FAQ widgeta

Primjer filtra 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 uređaje

Chat widget je potpuno optimiziran za mobilne uređaje:

• Raspored preko pune širine na malim ekranima
• Animacija podizanja pri otvaranju
• Rukovanje iOS tipkovnicom (widget se prilagođava prikazanoj tipkovnici)
• Podrška za safe-area zbog iPhone zubaca i indikatora početka
• Veći dodirni ciljevi radi bolje upotrebljivosti
• Veličina fonta unosa sprječava automatsko zumiranje na iOS-u

Vodiči specifični za platformu

WordPress

Preporučeno: Koristite službeni ChatReact WordPress Plugin za najjednostavniju integraciju s Gutenberg blokovima, Elementor widgetima i shortcode-ovima.

Alternativa: Ručna ugradnja preko "Header/Footer Scripts" plugina:

1. Instalirajte bilo koji "Header/Footer Scripts" plugin
2. Dodajte embed kod u footer sekciju
3. Spremite i objavite

Shopify

Preporučeno: ChatReact Shopify App

Instalirajte ChatReact aplikaciju iz Shopify App Store-a za najjednostavniju integraciju:

1. Instalirajte ChatReact aplikaciju u vašem Shopify adminu
2. Unesite svoj Chatbot ID u postavkama aplikacije
3. Chat widget se automatski pojavljuje na vašoj trgovini
4. Upravljajte dodjelama widgeta po stranici ili omogućite ga svugdje

Aplikacija također podržava Form i FAQ widgete kao App Blocks u Theme Editoru.

Alternativa: Ručna ugradnja

1. Idite na Online Store → Themes → Edit Code
2. Otvorite theme.liquid
3. Dodajte kod prije </body>
4. Spremite

Webflow

1. Idite na Project Settings → Custom Code
2. Dodajte u Footer Code
3. Objavite stranicu

Next.js / React

Koristite Script komponentu:

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 u svoj glavni App.vue ili layout:

<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

Interakcija s widgetom programatski:

// 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

Preview način

Prije žive ugradnje:

1. Koristite značajku Preview u vašem kontrolnom panelu
2. Testirajte različite scenarije
3. Provjerite jesu li odgovori točni

Rješavanje problema

Widget se ne pojavljuje

1. Provjerite konzolu preglednika za greške
2. Provjerite je li ID chatbota točan
3. Provjerite je li chatbot aktivan (nije onemogućen)
4. Provjerite ometaju li ad blockeri
5. Provjerite iskorištenost plana — widget se pauzira kada dosežete mjesečni limit vašeg plana

Predmemorija i pluginovi za optimizaciju

Neki pluginovi za predmemoriranje ili optimizaciju skripti prepisuju URL-ove skripti, što može spriječiti učitavanje widgeta. Ako se to dogodi, dodajte eksplicitni API URL u script 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>

Isti atribut radi i za FAQ i form widget skripte.

Sukobi sa stilovima

Ako CSS vaše stranice stvara konflikte:

• Widget cilja svoje stilove unutar vlastitog containera i koristi pravila visokog prioriteta da bi se odupro konfliktima
• Provjerite z-index vrijednosti elemenata koji prekrivaju widget
• Izbjegavajte široke !important naredbe u CSS-u stranice koje ciljaju generičke elemente

Performanse

Widget je dizajniran da ima minimalan utjecaj:

• Učitava se asinkrono — nikada ne blokira render vaše stranice
• Lagana veličina: otprilike 30 KB komprimirane prijenosa

Sljedeći koraci

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — ugradite samostalne obrasce pomoću form widgeta