Ionsú Widget

Cuir do chatbot AI ar aon suíomh Gréasáin i gceann soicindí le ár gcód ionsúcháin simplí.

Tús Tapa

Cuir an cód seo leis roimh an lipéad dúnta </body>:

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

Sin é! Tá bhur chatbot anois beo ar bhur láithreán gréasáin.

Ag Aimsiú ID do Chatbot

1. Téigh chuig socruithe bhur chatbot
2. Téigh chuig an cluaisín Embed
3. Cóipeáil an cód embed (a chuimsíonn bhur ID)

Nó faigh an ID i URL bhur dashboard: /dashboard/company/chatbots/[CHATBOT_ID]

Roghanna Widget

Saincheap an widget trí data attributes:

Roghanna Bunúsacha

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

Sáruithe Datha

Sárú socruithe an dashboard le dathanna inlíne:

<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

Taispeáin FAQs mar accordion ar aon leathanach:

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

Taispeánann an FAQ widget FAQs foilsithe ó do chatbot.

Roghanna FAQ Widget

Sampla Scagaire Catagóire

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

Optamú Soghluaiste

Tá an widget comhrá optamaithe go hiomlán do ghléasanna soghluaiste:

• Leagan amach lánleithead ar scáileáin bheaga
• Beochan sleamhnáin suas nuair a osclaítear
• Láimhseáil méarchlár iOS (coigeartaíonn an widget don mhéarchlár ar an scáileán)
• Tacaíocht safe-area do ghearrán agus táscaire baile iPhone
• Spriocanna tadhaill níos mó le haghaidh inúsáidteachta níos fearr
• Méid clófhoinn ionchur a choiscíonn uathmhéadú iOS

Treoracha Sonracha don Ardán

WordPress

Molta: Bain úsáid as an Breiseán WordPress ChatReact oifigiúil le haghaidh an chomhtháthaithe is éasca le bloic Gutenberg, giuirléidí Elementor, agus giorrchóid.

Malartach: Ionsú láimhe trí bhreiseán "Header/Footer Scripts":

1. Suiteáil aon bhreiseán "Header/Footer Scripts"
2. Cuir an embed code sa rannóg footer
3. Sábháil agus foilseachain

Shopify

Molta: Aip Shopify ChatReact

Suiteáil an aip ChatReact ó Shopify App Store le haghaidh an chomhtháthaithe is éasca:

1. Suiteáil an aip ChatReact in do admin Shopify
2. Cuir isteach do Chatbot ID i socruithe na haipe
3. Taispeánann an widget comhrá go huathoibríoch ar do storáil
4. Bainistigh sannadh widget in aghaidh gach leathanaigh, nó cumasaigh é i ngach áit

Tacaíonn an aip freisin le Giuirléidí Foirme agus FAQ mar Bhloic Aipe san Eagarthóir Téama.

Malartach: Ionsú Láimhe

1. Téigh chuig Online Store → Themes → Edit Code
2. Oscail theme.liquid
3. Cuir an cód roimh </body>
4. Sábháil

Webflow

1. Téigh chuig Project Settings → Custom Code
2. Cuir é sa Footer Code
3. Foilsigh an suíomh

Next.js / React

Bain úsáid as an Script component:

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

Cuir é i bhur príomh-App.vue nó i bhur leagan amach:

<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

Idirghníomhaigh leis an widget go cláraitheach:

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

Tástáil

Preview Mode

Sula gcuirfear isteach beo:

1. Bain úsáid as an ghné Preview i bhur dashboard
2. Déan tástáil ar shcéalanna éagsúla
3. Deimhnigh go bhfuil na freagraí cruinn

Local Development

Le haghaidh tástála áitiúil, bain úsáid as URLs localhost:

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

Réiteach Fadhbanna

Ní Léirítear an Widget

1. Seiceáil consól an brabhsálaí le haghaidh earráidí
2. Déan a chinntiú go bhfuil an chatbot ID ceart
3. Cinntigh go bhfuil an chatbot gníomhach (níl sé faoi mhíchumas)
4. Seiceáil an bhfuil ad blockers ag cur isteach

Coinbhleachtaí Stíle

Má tá CSS do shuíomh ag teacht i gcoinne:

• Úsáideann an Widget shadow DOM chun ailtireacht a leithlisiú
• Seiceáil luachanna z-index
• Cinntigh nach bhfuil aon !important ag déanamh overrides

Feidhmíocht

Tá an widget deartha le tionchar íosta:

• Lazy loaded
• < 50KB total size
• Non-blocking
• Cached aggressively

Céimeanna Ar Aghaidh

• Breiseán WordPress →
• Comhtháthú Shopify →
• Bainistíocht CC →