Widget Embedding

Adăugați chatbot-ul AI pe orice site în câteva secunde cu codul nostru de embed simplu.

Quick Start

Adăugați acest cod înainte de tag-ul de închidere </body>:

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

Asta este tot! Chatbot-ul dvs. este acum activ pe site.

Finding Your Chatbot ID

1. Accesați setările chatbot-ului dvs.
2. Navigați la fila Embed
3. Copiați codul de embed (conține ID-ul dvs.)

Customizing the Widget

Aspectul și comportamentul widget-ului sunt configurate în panoul dvs. — nu în codul de embed. Accesați Dashboard → Chatbots → [your chatbot] → Widget pentru a ajusta:

• Position — bottom-right, bottom-left, sau inline
• Colors — culorile primare, de fundal și de text, plus raza colțurilor
• Size — lățimea și înălțimea widget-ului

Pentru a deschide chat-ul automat după o întârziere configurabilă, activați Auto-Open în fila Behavior din aceeași pagină de setări.

Modificările se aplică automat pe site-ul dvs. — nu este nevoie să actualizați codul de embed. Consultați ghidul Widget Customization pentru toate opțiunile disponibile.

Limba widget-ului este detectată automat din browser-ul fiecărui vizitator, pe baza limbilor pe care le activați în fila Languages a chatbot-ului dvs.

FAQ Widget

Afișați întrebările frecvente ca un acordeon pe orice pagină:

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

Widget-ul FAQ afișează întrebările frecvente publicate din chatbot-ul dvs. Culorile și stilizarea (primare, fundal și text, raza colțurilor) sunt configurate în Dashboard → FAQs → Settings.

FAQ Widget Options

Category Filter Example

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

Mobile Optimization

Widget-ul de chat este complet optimizat pentru dispozitive mobile:

• Layout full-width pe ecrane mici
• Animație de slide-up la deschidere
• Gestionare a tastaturii pe iOS (widget-ul se ajustează la tastatura de pe ecran)
• Suport pentru safe-area pentru decupajul iPhone și indicatorul de start
• Ținte tactile mai mari pentru o utilizare mai bună
• Dimensiunea fontului din input previne auto-zoom-ul pe iOS

Platform-Specific Guides

WordPress

Recommended: Folosiți pluginul oficial ChatReact WordPress Plugin pentru cea mai simplă integrare cu blocuri Gutenberg, widget-uri Elementor și shortcode-uri.

Alternative: Embed manual printr-un plugin de tip "Header/Footer Scripts":

1. Instalați orice plugin de tip "Header/Footer Scripts"
2. Adăugați codul de embed în secțiunea footer
3. Salvați și publicați

Shopify

Recommended: ChatReact Shopify App

Instalați aplicația ChatReact din Shopify App Store pentru cea mai facilă integrare:

1. Instalați aplicația ChatReact în admin-ul Shopify
2. Introduceți ID-ul chatbot-ului în setările aplicației
3. Widget-ul de chat apare automat pe magazinul dvs.
4. Gestionați atribuirea widget-ului per pagină sau activați-l peste tot

Aplicația suportă, de asemenea, widget-uri Form și FAQ ca App Blocks în Theme Editor.

Alternative: Manual Embed

1. Mergeți la Online Store → Themes → Edit Code
2. Deschideți theme.liquid
3. Adăugați codul înainte de </body>
4. Salvați

Webflow

1. Mergeți la Project Settings → Custom Code
2. Adăugați la Footer Code
3. Publicați site-ul

Next.js / React

Folosiți componenta 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

Adăugați în App.vue principal sau în 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

Interacționați programatic cu widget-ul:

// 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();

Testing

Preview Mode

Înainte de a integra live:

1. Folosiți funcția Preview în panoul dvs.
2. Testați scenarii diferite
3. Verificați dacă răspunsurile sunt corecte

Troubleshooting

Widget Not Appearing

1. Verificați consola browser-ului pentru erori
2. Verificați dacă ID-ul chatbot-ului este corect
3. Asigurați-vă că chatbot-ul este activ (nu este dezactivat)
4. Verificați dacă extensiile de blocare a reclamelor interferează
5. Verificați utilizarea planului dvs. — widget-ul se oprește când se atinge limita lunară a planului

Caching & Optimization Plugins

Unele plugin-uri de cache sau optimizare a scripturilor pot rescrie URL-urile scripturilor, ceea ce poate opri încărcarea widget-ului. Dacă se întâmplă asta, adăugați un URL API explicit în tag-ul script:

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

Același atribut funcționează și pentru scripturile widget-urilor FAQ și form.

Styling Conflicts

Dacă CSS-ul site-ului dvs. intră în conflict:

• Widget-ul izolează stilurile în propriul container și folosește reguli cu prioritate mare pentru a rezista conflictelor
• Verificați valorile z-index ale elementelor care se suprapun peste widget
• Evitați regulile globale !important în CSS-ul site-ului care vizează elemente generice

Performance

Widget-ul este proiectat pentru un impact minim:

• Se încarcă asincron — nu blochează randarea paginii
• Ușor: aproximativ 30 KB transfer comprimat

Next Steps

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — integrați formulare standalone cu form widget-ul