Руководство по быстрому старту виджета монетизации сайта Mellowtel

Mellowtel позволяет вашим посетителям соглашаться делиться неиспользуемой пропускной способностью в обмен на поддержку вас. Вы добавляете небольшой виджет на ваш сайт, посетители выбирают установить сопутствующее расширение, и вы зарабатываете на основе запросов, которые обрабатывает их браузер.

Оценочное время: 5-10 минут. Вам понадобится: аккаунт Mellowtel и доступ к HTML вашего сайта (или эквивалент в вашем фреймворке).

Как это работает

Вы встраиваете виджет

Тег скрипта отображает кнопку, иконку или баннер на вашем сайте.

Посетитель нажимает на него

Они переходят к установке сопутствующего расширения Mellowtel.

Вы получаете кредит

Ваш invite_id связывает этого посетителя с вашим аккаунтом, поэтому запросы, обрабатываемые их браузером, приписываются вам.

Перед началом

Аккаунт Mellowtel. Зарегистрируйтесь здесь, если у вас его нет.
Ваш invite_id, который можно найти на вашей панели управления после создания ссылки поддержки.
Доступ к HTML вашего сайта или возможность добавить тег <script> через ваш фреймворк или CMS.

Установка виджета

Вставьте это на ваш сайт, заменив INVITE_ID на значение из вашей панели управления. Рекомендуется размещать его непосредственно перед </body>, чтобы он не блокировал рендеринг страницы.

<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

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
}

<!-- Добавьте в footer.php вашей темы непосредственно перед </body>, -->
<!-- или используйте плагин "Header & Footer Scripts" и вставьте в поле футера. -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

<!-- Webflow: Настройки проекта > Пользовательский код > Код в футере -->
<!-- Shopify: Онлайн-магазин > Темы > Редактировать код > theme.liquid (перед </body>) -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

Параметры конфигурации

Управляйте внешним видом виджета через параметры запроса в URL скрипта.

Параметр	Обязательный	Значения	Описание
`invite_id`	Да	Ваш ID из панели управления	Приписывает заработок вашему аккаунту.
`type`	Да	`button`, `icon`, `banner`	Стиль виджета, отображаемый на вашем сайте.
`position`	Да	`bottom-right`, `bottom-left`, `top-right`, `top-left`	Где виджет располагается на странице.

Предварительно просмотрите каждую комбинацию вживую перед отправкой: откройте предпросмотр виджета. Меняйте параметры type и position в URL, чтобы увидеть каждый вариант.

Проверьте, что всё работает

Загрузите ваш сайт

Откройте страницу в новой вкладке браузера (или в режиме инкогнито, чтобы обойти кэш).

Подтвердите, что виджет отображается

Вы должны увидеть кнопку, иконку или баннер в выбранной вами позиции. Если его нет, проверьте консоль браузера на наличие заблокированных запросов.

Пройдите через весь процесс

Нажатие на виджет должно перенаправить вас на страницу установки расширения с вашим invite_id.

Проверьте вашу панель управления

Как только посетитель установит и согласится, их активность отобразится на вашей панели управления Mellowtel.

Устранение неполадок

Виджет не отображается

Убедитесь, что тег скрипта находится внутри <body> и ваш invite_id заполнен.
Откройте DevTools и проверьте вкладку Сеть на наличие запроса к cdn.mellow.tel/widget.js. Если он заблокирован, вероятной причиной является блокировщик рекламы или фильтр контента.
Проверьте вашу политику безопасности контента. Возможно, вам нужно разрешить https://cdn.mellow.tel в script-src.

Я вижу предупреждение 'missing invite_id'

Параметр invite_id пуст или все еще содержит буквальный INVITE_ID. Скопируйте реальное значение из вашей панели управления и вставьте его в URL.

Работает локально, но не в продакшене

Чаще всего правило CSP или CDN удаляет скрипт. Проверьте заголовки ответов на вашем продакшн-хосте и добавьте в белый список cdn.mellow.tel.

Как удалить виджет?

Удалите тег <script> (или компонент фреймворка, оборачивающий его). Больше ничего удалять не нужно.

Раскройте информацию вашим посетителям

Мы рекомендуем добавить короткое примечание в вашу политику конфиденциальности, чтобы посетители понимали, что означает согласие. Например:

Этот сайт сотрудничает с Mellowtel. Если вы решите установить их расширение, ваш браузер может делиться неиспользуемой пропускной способностью для поддержки этого сайта. Установка является необязательной, и вы можете отказаться в любое время.

Смотрите Конфиденциальность и Согласие / Отказ для получения полной информации, на которую вы можете сослаться.

Нужна помощь?

Свяжитесь с нами по адресу info@mellowtel.com или присоединяйтесь к нам на Discord.

Начать

Концепции

Настольные приложения

Плагины браузера

Веб-сайт

Элементы Mellowtel

Мобильное приложение

Монетизируйте ваш сайт с Mellowtel

Как это работает

Перед началом

Установка виджета

Параметры конфигурации

Проверьте, что всё работает

Устранение неполадок

Раскройте информацию вашим посетителям

Нужна помощь?

​Как это работает

​Перед началом

​Установка виджета

​Параметры конфигурации

​Проверьте, что всё работает

​Устранение неполадок

​Раскройте информацию вашим посетителям

​Нужна помощь?

Как это работает

Перед началом

Установка виджета

Параметры конфигурации

Проверьте, что всё работает

Устранение неполадок

Раскройте информацию вашим посетителям

Нужна помощь?