SDK & تركيب

كل طرق التركيب على موقعك — html، react، next، platforms جاهزة.

HTML / WordPress / Webflow / Shopify

الصق الـ snippet ده في الـ <head> أو قبل </body>. مع platforms زي Shopify، حطه في theme.liquid.

<!-- 300BOT widget — auto-detects your site -->
<script
  src="https://300bot.com/widget.js"
  defer
  data-position="right"
  data-accent="#A91D1D"
  data-label="اسأل"
></script>

React / Vite / CRA

استخدم component يحقن السكريبت — يتلوّد مرة واحدة وبس.

import { useEffect } from 'react';

export function Bot300() {
  useEffect(() => {
    const s = document.createElement('script');
    s.src = 'https://300bot.com/widget.js';
    s.defer = true;
    s.dataset.position = 'right';
    s.dataset.accent = '#A91D1D';
    document.body.appendChild(s);
    return () => { s.remove(); };
  }, []);
  return null;
}

Next.js (App Router)

حط الـ next/script في app/layout.tsx عشان يظهر في كل الـ routes.

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://300bot.com/widget.js"
          strategy="afterInteractive"
          data-accent="#A91D1D"
        />
      </body>
    </html>
  );
}

Public API: قراءة config البوت

endpoint عام يرجّع البيانات الظاهرة للعميل (الاسم، اللون، الـ welcome). بدون auth.

// Get the public config of any bot
const res = await fetch('https://300bot.com/api/cs/<slug>/config');
const cfg = await res.json();
// { slug, name, brandColor, welcomeMsg, whiteLabel, avatarEmoji }

Public API: حالة الـ service

health snapshot للـ uptime monitors و الـ status pages.

// Health check
const res = await fetch('https://300bot.com/api/system/status');
// { service, status: 'ok', providers, uptime, version }

محتاج تركيب على Platform مش هنا؟

Wix، Squarespace، Webflow، Wordpress (بدون plugin) — كله بيدعم لصق snippet HTML.

تواصل معانا