Widget Embedding

Добавете вашия AI chatbot към всеки уебсайт за секунди с нашия прост embed code.

Бърз старт

Добавете този код преди затварящия </body> таг:

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

Това е всичко! Вашият чатбот вече е активен на вашия уебсайт.

Намиране на ID на чатбота ви

1. Отидете в настройките на вашия чатбот
2. Навигирайте до раздела Embed
3. Копирайте кода за вграждане (съдържа вашето ID)

Или намерете ID-то в URL адреса на таблото ви: /dashboard/company/chatbots/[CHATBOT_ID]

Опции за Widget

Персонализирайте widget-а с атрибути за данни:

Основни опции

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

Презаписване на цветове

Презапишете настройките на таблото с вградени цветове:

<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

Показвайте често задаваните въпроси като акордеон на всяка страница:

<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 показва публикуваните ЧЗВ от Вашия чатбот.

Опции за FAQ уиджет

Пример за филтър по категория

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

Оптимизация за мобилни устройства

Чат уиджетът е напълно оптимизиран за мобилни устройства:

• Оформление с пълна ширина на малки екрани
• Анимация на плъзгане нагоре при отваряне
• Обработка на клавиатурата на iOS (уиджетът се приспособява към екранната клавиатура)
• Поддръжка на безопасна зона за iPhone notch и индикатор за начало
• По-големи области за докосване за по-добра използваемост
• Размерът на шрифта на входа предотвратява автоматичното увеличаване на iOS

Ръководства за конкретни платформи

WordPress

Препоръчително: Използвайте официалния ChatReact WordPress плъгин за най-лесна интеграция с блокове Gutenberg, уиджети Elementor и shortcode-ове.

Алтернатива: Ръчно вграждане чрез плъгин „Header/Footer Scripts":

1. Инсталирайте произволен плъгин "Header/Footer Scripts"
2. Добавете кода за вграждане в секцията footer
3. Запазете и публикувайте

Shopify

Препоръчително: ChatReact Shopify App

Инсталирайте приложението ChatReact от Shopify App Store за най-лесна интеграция:

1. Инсталирайте приложението ChatReact в своя Shopify admin
2. Въведете вашия Chatbot ID в настройките на приложението
3. Чат уиджетът автоматично ще се появи на вашия магазин
4. Управлявайте присвояванията на уиджети по страница или ги активирайте навсякъде

Приложението също поддържа уиджети Form и FAQ като App Blocks в Theme Editor.

Алтернатива: Ръчно вграждане

1. Отидете на Online Store → Themes → Edit Code
2. Отворете theme.liquid
3. Добавете кода преди </body>
4. Запазете

Webflow

1. Отидете в Project Settings → Custom Code
2. Добавете в Footer Code
3. Публикувайте сайта

Next.js / React

Използвайте компонента 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

Добавете във Вашия основен App.vue или 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

Взаимодействайте с виджета програмно:

// 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]'
});

Тестване

Режим на предварителен преглед

Преди внедряване на живо:

1. Използвайте функцията Preview във Вашия dashboard
2. Тествайте различни сценарии
3. Проверете дали отговорите са точни

Локална разработка

За локално тестване използвайте localhost URL адреси:

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

Отстраняване на проблеми

Уиджетът не се появява

1. Проверете конзолата на браузъра за грешки
2. Уверете се, че ID-то на чатбота е правилно
3. Уверете се, че чатботът е активен (не е деактивиран)
4. Проверете дали блокиращи реклами не пречат

Конфликти със стиловете

Ако CSS на вашия сайт конфликтува:

• Уиджетът използва shadow DOM за изолация
• Проверете стойностите на z-index
• Уверете се, че няма !important презаписвания

Производителност

Уиджетът е проектиран за минимално въздействие:

• Зарежда се lazy
• < 50KB общ размер
• Не блокиращ
• Агресивно кеширан

Следващи стъпки

• WordPress Plugin →
• Shopify интеграция →
• Управление на FAQ →