Widget Embedding

Pievienojiet savu AI chatbot jebkurai vietnei dažu sekunžu laikā, izmantojot mūsu vienkāršo embed code.

Quick Start

Pievienojiet šo kodu pirms aizverošās </body> tagas:

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

Tas arī viss! Jūsu čatbots tagad ir tiešsaistē jūsu vietnē.

Jūsu čatbota ID atrašana

1. Dodieties uz sava čatbota iestatījumiem
2. Atveriet cilni Embed
3. Nokopējiet embed kodu (iekļauj jūsu ID)

Vai atrodiet ID informācijas paneles URL: /dashboard/company/chatbots/[CHATBOT_ID]

Widget iespējas

Pielāgojiet widget ar data atribūtiem:

Pamata iespējas

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

Krāsu pārrakstīšana

Pārrakstiet dashboard iestatījumus, izmantojot inline krāsas:

<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

Rādīt FAQ kā akordeonu jebkurā lapā:

<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 logrīks parāda publicētās FAQ no Jūsu chatbot.

FAQ Widget iespējas

Kategoriju filtra piemērs

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

Mobilā optimizācija

Čata logrīks ir pilnībā optimizēts mobilajām ierīcēm:

• Pilna platuma izkārtojums mazos ekrānos
• Slīdēšanas uz augšu animācija, atverot
• iOS tastatūras apstrāde (logrīks pielāgojas ekrāna tastatūrai)
• Safe-area atbalsts iPhone iecirtumam un sākuma indikatoram
• Lielāki pieskārienu mērķi labākai lietojamībai
• Ievades fonta izmērs novērš iOS automātisko tālummaiņu

Platformai specifiskie norādījumi

WordPress

Ieteicams: Izmantojiet oficiālo ChatReact WordPress spraudni, lai iegūtu visvieglāko integrāciju ar Gutenberg blokiem, Elementor logrīkiem un īskodiem.

Alternatīva: Manuāla iegulšana caur "Header/Footer Scripts" spraudni:

1. Instalējiet jebkuru "Header/Footer Scripts" spraudni
2. Pievienojiet embed kodu kājenes sadaļā
3. Saglabājiet un publicējiet

Shopify

Ieteicams: ChatReact Shopify lietotne

Instalējiet ChatReact lietotni no Shopify App Store visvieglākajai integrācijai:

1. Instalējiet ChatReact lietotni savā Shopify admin panelī
2. Ievadiet savu Chatbot ID lietotnes iestatījumos
3. Čata logrīks automātiski parādās jūsu veikala priekšpusē
4. Pārvaldiet logrīku piešķiršanu katrai lapai vai iespējojiet to visur

Lietotne atbalsta arī Form un FAQ logrīkus kā App Blocks tēmu redaktorā.

Alternatīva: Manuāla iegulšana

1. Dodieties uz Online Store → Themes → Edit Code
2. Atveriet theme.liquid
3. Pievienojiet kodu pirms </body>
4. Saglabājiet

Webflow

1. Dodieties uz Project Settings → Custom Code
2. Pievienojiet Footer Code
3. Publicējiet vietni

Next.js / React

Izmantojiet 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

Pievienojiet savam galvenajam App.vue vai izkārtojumam:

<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

Mijiedarbojieties ar logrīku programmatiski:

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

Testēšana

Priekšskatījuma režīms

Pirms iegulšanas tiešraidē:

1. Izmantojiet dashboard Preview funkciju
2. Pārbaudiet dažādus scenārijus
3. Pārliecinieties, ka atbildes ir precīzas

Lokālā izstrāde

Lokālai testēšanai izmantojiet localhost URL:

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

Problēmu novēršana

Widget neparādās

1. Pārbaudiet pārlūkprogrammas konsoli kļūdām
2. Pārliecinieties, ka chatbot ID ir pareizs
3. Pārliecinieties, ka chatbot ir aktīvs (nav atspējots)
4. Pārbaudiet, vai reklāmu bloķētāji netraucē

Stila konflikti

Ja jūsu vietnes CSS rada konfliktus:

• Widget izmanto shadow DOM izolācijai
• Pārbaudiet z-index vērtības
• Pārliecinieties, ka nav !important pārrakstījumu

Veiktspēja

Widget ir izstrādāts, lai nodrošinātu pēc iespējas mazāku ietekmi:

• Lazy loaded
• < 50KB kopējā lieluma
• Nenobloķējošs
• Intensīvi kešēts

Nākamie soļi

• WordPress spraudnis →
• Shopify integrācija →
• BUJ pārvaldība →