Widgetu iegulšana

Pievienojiet savu AI tērzēšanas robotu jebkurai vietnei dažu sekunžu laikā, izmantojot mūsu vienkāršo iegulšanas kodu.

Ātrā sākšana

Pievienojiet šo kodu pirms slēgjošā </body> taga:

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

Tās arī viss! Jūsu tērzēšanas robots tagad darbojas jūsu vietnē.

Kā atrast savu tērzēšanas robota ID

1. Atveriet sava tērzēšanas robota iestatījumus
2. Pārejiet uz cilni Embed
3. Nokopējiet iegulšanas kodu (tas ietver jūsu ID)

Widgeta pielāgošana

Widgeta izskatu un uzvedību konfigurējat savā panelī — ne iegulšanas kodā. Dodieties uz Dashboard → Chatbots → [your chatbot] → Widget, lai pielāgotu:

• Position — apakšējā labajā stūrī, apakšējā kreisajā stūrī vai iebūvēti (inline)
• Colors — primārā, fona un teksta krāsa, kā arī stūru noapaļojuma rādiuss
• Size — widgeta platums un augstums

Lai atvērtu tērzēšanu automātiski pēc konfigurējama aiztures, iespējojiet Auto-Open cilnē Behavior tajā pašā iestatījumu lapā.

Izmaiņas tiek piemērotas jūsu vietnei automātiski — nav nepieciešams atjaunināt iegulšanas kodu. Skatiet Widget Customization ceļvedi, lai uzzinātu par visām pieejamajām opcijām.

Widgeta valoda tiek automātiski noteikta no katra apmeklētāja pārlūka, pamatojoties uz valodām, kuras jūs iespējojat sava tērzēšanas robota cilnē Languages.

FAQ widget

Rādiet biežāk uzdotos jautājumus 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"
  async
></script>

FAQ widget rāda publicētās FAQ no jūsu tērzēšanas robota. Krāsas un stils (primārā, fona un teksta krāsa, stūru noapaļojums) tiek konfigurēti sadaļā Dashboard → FAQs → Settings.

FAQ widget opcijas

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>

Mobiilā optimizācija

Čata widget pilnībā optimizēts mobilajām ierīcēm:

• Pilna platuma izkārtojums uz mazākiem ekrāniem
• Slaida augšup animācija atverot
• iOS tastatūras apstrāde (widget pielāgojas ekrānā redzamajai tastatūrai)
• Atbalsts drošajai zonai (safe-area) iPhone izgriezumiem un mājas indikātoram
• Lielāki skārienjūtīgie mērķi labākai lietojamībai
• Ievades fonta izmērs novērš iOS automātisko pietuvināšanu

Platformai specifiski ceļveži

WordPress

Ieteicams: Izmantojiet oficiālo ChatReact WordPress Plugin visvienkāršākajai integrācijai ar Gutenberg bloki, Elementor widgetiem un īssaucējiem.

Alternatīva: Manuāla iegulšana, izmantojot “Header/Footer Scripts” spraudni:

1. Instalējiet kādu “Header/Footer Scripts” spraudni
2. Pievienojiet iegulšanas kodu footer sadaļā
3. Saglabājiet un publicējiet

Shopify

Ieteicams: ChatReact Shopify App

Instalējiet ChatReact lietotni no Shopify App Store visvienkāršākajai integrācijai:

1. Instalējiet ChatReact lietotni savā Shopify administrācijā
2. Ievadiet savu Chatbot ID lietotnes iestatījumos
3. Čata widget automātiski parādīsies jūsu veikala veidlapā
4. Pārvaldiet widgeta piešķiršanu pa lapām vai iespējojiet to visur

Lietotne atbalsta arī Form un FAQ widgetus kā App Blocks Theme Editor.

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 komponenti:

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 savā galvenajā App.vue vai izkārtojumā:

<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

Sadarbojieties ar widgetu programmatiski:

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

Testēšana

Priekšskatījuma režīms

Pirms iegulšanas tiešraidē:

1. Izmantojiet funkciju Preview savā panelī
2. Testējiet dažādus scenārijus
3. Pārliecinieties, ka atbildes ir precīzas

Traucējummeklēšana

Widget neparādās

1. Pārbaudiet pārlūkprogrammas konsoli kļūdu ziņojumiem
2. Pārliecinieties, ka tērzēšanas robota ID ir pareizs
3. Pārliecinieties, ka tērzēšanas robots ir aktīvs (nav atspējots)
4. Pārbaudiet, vai reklāmu bloķētāji netraucē
5. Pārbaudiet sava plāna lietojumu — widget tiek apturēts, kad jūsu plāna mēneša limits ir sasniegts

Kešošanas un optimizācijas spraudņi

Daži kešošanas vai skriptu optimizācijas spraudņi pārraksta skriptu URL, kas var novērst widgeta ielādi. Ja tas notiek, pievienojiet skripta tagam skaidru API URL:

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

Tas pats atribūts darbojas arī FAQ un form widgetu skriptos.

Stilistu konflikti

Ja jūsu vietnes CSS konflikts:

• Widget ierobežo savus stilus uz savu konteineru un izmanto augstas prioritātes noteikumus, lai pretotos konfliktiem
• Pārbaudiet pārklājošo elementu z-index vērtības
• Izvairieties no plašiem !important noteikumiem jūsu vietnes CSS, kas mērķē uz vispārīgiem elementiem

Veiktspēja

Widget ir izstrādāts ar minimālu ietekmi:

• Ielādējas asinhroni — nekad nebloķē jūsu lapas renderēšanu
• Viegls: aptuveni 30 KB saspiesta pārsūtīšana

Nākamie soļi

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — iegult atsevišķas formas ar form widgetu