Керівництво з швидкого старту віджета монетизації сайту 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.

Я бачу попередження 'відсутній invite_id'

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

Це працює локально, але не в продакшені

Найчастіше правило CSP або CDN видаляє скрипт. Перевірте заголовки відповідей на вашому продакшен-хості та додайте до білого списку cdn.mellow.tel.

Як видалити віджет?

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

Повідомте ваших відвідувачів

Ми рекомендуємо додати коротку примітку до вашої політики конфіденційності, щоб відвідувачі розуміли, що означає погодження. Щось на зразок:

Цей сайт співпрацює з Mellowtel. Якщо ви вирішите встановити їхнє розширення, ваш браузер може ділитися невикористаною пропускною здатністю для підтримки цього сайту. Встановлення є необов’язковим, і ви можете відмовитися в будь-який час.

Дивіться Конфіденційність та Погодження / Відмова для повних деталей, на які ви можете посилатися.

Потрібна допомога?

Звертайтеся на info@mellowtel.com або приєднуйтесь до нас на Discord.

​Як це працює

​Перед початком

​Встановлення віджета

​Варіанти конфігурації

​Перевірте, чи працює

​Вирішення проблем

​Повідомте ваших відвідувачів

​Потрібна допомога?

Як це працює

Перед початком

Встановлення віджета

Варіанти конфігурації

Перевірте, чи працює

Вирішення проблем

Повідомте ваших відвідувачів

Потрібна допомога?