نصب ویجت روی سایت شما

نصب روی وب‌سایت (HTML)

ساده‌ترین و سریع‌ترین روش. کد زیر را کپی کن و قبل از بسته شدن تگ </body> قرار بده.

<script src="https://myshahoo.ir/widget.js?key=YOUR_API_KEY" async></script>

نمونه‌ی کامل HTML

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>سایت من</title>
</head>
<body>

    <h1>به سایت من خوش آمدید</h1>
    <p>محتوای سایت...</p>

    <!-- ویجت شاهو -->
    <script src="https://myshahoo.ir/widget.js?key=YOUR_API_KEY" async></script>

</body>
</html>

نصب روی WordPress

روش ساده: با استفاده از پلاگین "Insert Headers and Footers".

1. پلاگین Insert Headers and Footers رو نصب و فعال کن
2. از منوی تنظیمات، برو به Settings ← Insert Headers and Footers
3. در بخش Scripts in Footer کد زیر رو قرار بده:

<script src="https://myshahoo.ir/widget.js?key=YOUR_API_KEY" async></script>

4. ذخیره کن
5. سایت رو رفرش کن و ویجت رو ببین

روش پیشرفته — ویرایش دستی `functions.php`

اگر ترجیح می‌دی مستقیم کد بزنی:

function shahoo_add_widget() {
    echo '<script src="https://myshahoo.ir/widget.js?key=YOUR_API_KEY" async></script>';
}
add_action('wp_footer', 'shahoo_add_widget');

نصب روی Shopify

1. از داشبورد Shopify برو به Online Store ← Themes
2. روی Edit code کلیک کن
3. فایل theme.liquid رو باز کن
4. کد زیر رو قبل از </body> اضافه کن:

<script src="https://myshahoo.ir/widget.js?key=YOUR_API_KEY" async></script>

نصب روی React

برای React، یک کامپوننت کوچک بساز که اسکریپت رو در useEffect لود کنه.

import { useEffect } from 'react';

function ShahooWidget() {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://myshahoo.ir/widget.js?key=YOUR_API_KEY';
        script.async = true;
        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
    }, []);

    return null;
}

export default ShahooWidget;

و در App.jsx:

import ShahooWidget from './components/ShahooWidget';

function App() {
    return (
        <>
            <Header />
            <Main />
            <ShahooWidget />
            <Footer />
        </>
    );
}

نصب روی Next.js

برای Next.js (App Router)، از next/script استفاده کن:

import Script from 'next/script';

export default function RootLayout({ children }) {
    return (
        <html lang="fa" dir="rtl">
            <body>
                {children}

                <Script
                    src="https://myshahoo.ir/widget.js?key=YOUR_API_KEY"
                    strategy="lazyOnload"
                />
            </body>
        </html>
    );
}

نصب روی Vue / Nuxt

در فایل App.vue یا لایوت اصلی:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
    const script = document.createElement('script');
    script.src = 'https://myshahoo.ir/widget.js?key=YOUR_API_KEY';
    script.async = true;
    document.body.appendChild(script);
});
</script>

<template>
    <slot />
</template>

نصب با Google Tag Manager

اگر از GTM استفاده می‌کنی:

1. یک Tag جدید از نوع Custom HTML بساز
2. کد زیر رو در اون قرار بده:

<script src="https://myshahoo.ir/widget.js?key=YOUR_API_KEY" async></script>

3. Trigger: All Pages
4. ذخیره و Publish کن

شخصی‌سازی ظاهر ویجت

بعد از نصب، از پنل شاهو می‌تونی ظاهر ویجت رو تنظیم کنی:

• رنگ‌ها — رنگ اصلی و دوم دکمه
• آیکون — انتخاب از بین چند آیکون
• موقعیت — پایین-راست، پایین-چپ، بالا-راست، بالا-چپ
• اندازه — قطر دکمه (px)
• فاصله از لبه‌ها — افقی و عمودی
• عنوان و زیرعنوان — متن هدر پنجره چت
• پیام خوش‌آمد — پیام اولیه
• Placeholder — متن داخل ورودی

تأیید نصب صحیح

بعد از نصب، این موارد رو چک کن:

اگر ویجت ظاهر نشد

مشکل	راه‌حل
دکمه‌ی چت نمایش داده نمی‌شه	مطمئن شو کلید API درست کپی شده و اشتباه تایپی نداره
در کنسول مرورگر خطا می‌بینی	مطمئن شو کد قبل از </body> هست
در سایت HTTPS خطا می‌ده	مطمئن شو آدرس اسکریپت با https:// شروع می‌شه
ویجت نمایش داده می‌شه ولی پیام نمی‌رسه	اتصال اینترنت و فیلترشکن رو چک کن
سایت با React/Vue کار می‌کنه و ظاهر نمی‌شه	از روش مخصوص فریم‌ورک خودت استفاده کن (بالا توضیح داده شده)

اگر مشکل حل نشد، با پشتیبانی تماس بگیر یا راهنمای رفع مشکلات رو ببین.

قدم‌های بعدی