> ## 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`.
Удалите тег `