Ugradnja widgeta

Dodajte svoj AI chatbot na bilo koju web-stranicu u nekoliko sekundi pomoću našeg jednostavnog embed codea.

Brzi početak

Dodajte ovaj kod prije zatvarajuće </body> oznake:

<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 na postavke vašeg chatbota
2. Idite na karticu Embed
3. Kopirajte embed kod (sadrži vaš ID)

Ili pronađite ID u URL-u vašeg dashboarda: /dashboard/company/chatbots/[CHATBOT_ID]

Opcije widgeta

Prilagodite widget pomoću data atributa:

Osnovne opcije

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

Color Overrides

Prepišite dashboard postavke pomoću inline boja:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

FAQ widget

Prikažite često postavljana pitanja (FAQ) 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"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

FAQ widget prikazuje objavljena FAQs iz vašeg chatbota.

Opcije FAQ widgeta

Primjer filtriranja kategorija

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

Mobilna optimizacija

Chat widget je potpuno optimiziran za mobilne uređaje:

• Layout pune širine na malim zaslonima
• Animacija klizanja prema gore pri otvaranju
• Rukovanje iOS tipkovnicom (widget se prilagođava zaslonskoj tipkovnici)
• Podrška za safe-area za iPhone notch i home indikator
• Veće dodirne mete za bolju upotrebljivost
• Veličina fonta unosa sprječava iOS automatski zoom

Vodiči specifični za platformu

WordPress

Preporučeno: Koristite službeni ChatReact WordPress dodatak za najlakšu integraciju s Gutenberg blokovima, Elementor widgetima i kratkim kodovima.

Alternativa: Ručna ugradnja putem "Header/Footer Scripts" dodatka:

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

Shopify

Preporučeno: ChatReact Shopify App

Instalirajte ChatReact aplikaciju iz Shopify App Store za najlakšu integraciju:

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

Aplikacija također podržava Form i FAQ widgete kao App Blockove 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 web-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

Upravljajte widgetom programski:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

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

// Send a message
ChatReact.sendMessage('Hello!');

// Set user data
ChatReact.setUser({
  name: 'John Doe',
  email: '[email protected]'
});

Testiranje

Način pregleda

Prije objave uživo:

1. Koristite značajku Preview u svom dashboardu
2. Testirajte različite scenarije
3. Provjerite jesu li odgovori točni

Lokalni razvoj

Za lokalno testiranje koristite localhost URL-ove:

<script 
  src="http://localhost:3000/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Rješavanje problema

Widget se ne pojavljuje

1. Provjerite konzolu preglednika za greške
2. Provjerite je li chatbot ID ispravan
3. Provjerite je li chatbot aktivan (nije onemogućen)
4. Provjerite ne ometaju li ad-blockeri

Sukobi stilova

Ako CSS vaše stranice stvara sukobe:

• Widget koristi shadow DOM za izolaciju
• Provjerite vrijednosti z-index
• Provjerite da nema !important override-a

Performanse

Widget je dizajniran za minimalan utjecaj:

• Lazy loaded
• < 50KB ukupne veličine
• Non-blocking
• Cached aggressively

Sljedeći koraci

• WordPress dodatak →
• Shopify integracija →
• Upravljanje FAQ-om →