> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Монетизуйте ваш сайт з Mellowtel
> Додайте один тег скрипта, щоб дозволити відвідувачам підтримувати вас, погоджуючись ділитися невикористаною пропускною здатністю.
Mellowtel дозволяє вашим відвідувачам погодитися ділитися невикористаною пропускною здатністю в обмін на підтримку вас. Ви додаєте невеликий віджет на ваш сайт, відвідувачі обирають встановити супутнє розширення, і ви заробляєте на основі запитів, які обробляє їхній браузер.
**Орієнтовний час:** 5-10 хвилин. **Вам знадобиться:** [акаунт Mellowtel](https://www.mellowtel.com/mellowtel-auth/) та доступ до HTML вашого сайту (або еквівалент у фреймворку).
## Як це працює
Тег скрипта відображає кнопку, іконку або банер на вашому сайті.
Вони переходять до встановлення супутнього розширення Mellowtel.
Ваш `invite_id` пов'язує цього відвідувача з вашим акаунтом, тому запити, оброблені їхнім браузером, приписуються вам.
## Перед початком
* Акаунт Mellowtel. [Зареєструйтеся тут](https://www.mellowtel.com/mellowtel-auth/), якщо у вас його немає.
* Ваш `invite_id`, який можна знайти на вашій [панелі керування](https://www.mellowtel.com/mellowtel-auth/) після створення посилання підтримки.
* Доступ до HTML вашого сайту або можливість додати тег `
```
```jsx Next.js (App Router) theme={null}
import Script from 'next/script'
export default function Layout({ children }) {
return (
{children}
)
}
```
```jsx React (Vite / CRA) theme={null}
import { useEffect } from 'react'
export function MellowtelWidget() {
useEffect(() => {
const s = document.createElement('script')
s.src = 'https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID'
s.async = true
document.body.appendChild(s)
return () => { s.remove() }
}, [])
return null
}
```
```html WordPress theme={null}
```
```html Webflow / Shopify theme={null}
```
## Варіанти конфігурації
Керуйте виглядом віджета через параметри запиту в URL скрипта.
| Параметр | Обов’язковий | Значення | Опис |
| ----------- | ------------ | ------------------------------------------------------ | ------------------------------------------------- |
| `invite_id` | Так | Ваш ID з панелі керування | Приписує заробіток до вашого акаунта. |
| `type` | Так | `button`, `icon`, `banner` | Стиль віджета, що відображається на вашому сайті. |
| `position` | Так | `bottom-right`, `bottom-left`, `top-right`, `top-left` | Де віджет розташовується на сторінці. |
Попередньо перегляньте всі комбінації в реальному часі перед публікацією: [відкрийте попередній перегляд віджета](https://cdn.mellow.tel/preview?position=bottom-right\&type=button\&invite_id=ijxf49s9h2f). Замініть параметри `type` та `position` в URL, щоб побачити кожен варіант.
## Перевірте, чи працює
Відкрийте сторінку у новій вкладці браузера (або в режимі інкогніто, щоб обійти кеш).
Ви повинні побачити кнопку, іконку або банер у вибраній вами позиції. Якщо його немає, перевірте консоль браузера на наявність заблокованих запитів.
Натискання на віджет повинно перенаправити вас на сторінку встановлення розширення з вашим `invite_id`.
Як тільки відвідувач встановить і погодиться, їхня активність з'явиться на вашій панелі керування Mellowtel.
## Вирішення проблем
* Переконайтеся, що тег скрипта знаходиться всередині `` і ваш `invite_id` заповнений.
* Відкрийте DevTools і перевірте вкладку Мережа на наявність запиту до `cdn.mellow.tel/widget.js`. Якщо він заблокований, можливо, причиною є блокувальник реклами або фільтр контенту.
* Перевірте вашу політику безпеки контенту. Можливо, вам потрібно дозволити `https://cdn.mellow.tel` у `script-src`.
Параметр `invite_id` порожній або все ще містить буквальний заповнювач `INVITE_ID`. Скопіюйте реальне значення з вашої панелі керування і вставте його в URL.
Найчастіше правило CSP або CDN видаляє скрипт. Перевірте заголовки відповідей на вашому продакшен-хості та додайте до білого списку `cdn.mellow.tel`.
Видаліть тег `