Вграждане на уиджет

Добавете вашия AI чатбот към всеки уебсайт за секунди с нашия прост код за вграждане.

Бърз старт

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

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

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

Намиране на вашия Chatbot ID

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

Персонализиране на уиджета

Визията и поведението на уиджета се конфигурират в таблото ви — не в кода за вграждане. Отидете в Dashboard → Chatbots → [your chatbot] → Widget за да настроите:

• Позиция — долу вдясно, долу вляво или inline
• Цветове — основен, фон и текстови цветове, както и радиус на ръбовете
• Размер — ширина и височина на уиджета

За да отваряте чата автоматично след конфигурируемо забавяне, активирайте Auto-Open в таба Behavior на същата страница с настройки.

Промените се прилагат автоматично към вашия уебсайт — няма нужда да актуализирате кода за вграждане. Вижте ръководството Widget Customization за всички налични опции.

Езикът на уиджета се засича автоматично от браузъра на всеки посетител, въз основа на езиците, които активирате в таба Languages на вашия чатбот.

FAQ уиджет

Показвайте ЧЗВ като акордеон на всяка страница:

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

FAQ уиджетът показва публикуваните ЧЗВ от вашия чатбот. Цветовете и стиловете (основен, фон и текстови цветове, радиус на ръбовете) се конфигурират в Dashboard → FAQs → Settings.

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

Пример за Category Filter

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

Мобилна оптимизация

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

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

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

WordPress

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

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

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

Shopify

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

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

1. Инсталирайте ChatReact приложението в админ панела на Shopify
2. Въведете вашия Chatbot ID в настройките на приложението
3. Чат уиджетът автоматично се появява на вашия storefront
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();

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

Тестване

Preview Mode

Преди да вградите на живо:

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

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

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

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

Плъгини за кеширане и оптимизация

Някои плъгини за кеширане или оптимизация на скриптове пренаписват URL адресите на скриптове, което може да спре зареждането на уиджета. Ако това се случи, добавете явен API URL към script тагa:

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

Същият атрибут работи и за FAQ и form widget скриптовете.

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

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

• Уиджетът ограничава своите стилове до собствен контейнер и използва правила с висока приоритетност, за да противостои на конфликти
• Проверете z-index стойностите на елементите, които припокриват уиджета
• Избягвайте широки !important правила във вашия сайт CSS, които таргетират общи елементи

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

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

• Зарежда се асинхронно — никога не блокира рендера на страницата
• Леек: приблизително 30 KB компресирана трансферна стойност

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

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — вграждане на самостоятелни форми с form widget