Установка виджета на сайт
Виджет OpenSpeedTest добавляет на любую страницу вашего сайта кнопку проверки скорости интернета. Это две строки HTML, подключённые асинхронно, — они не замедляют загрузку сайта.
Шаг 1. Создайте проект
- Откройте личный кабинет → «Виджет» (/profile/widget/).
- Нажмите «Новый проект».
- Укажите домен сайта, на котором будет виджет (обязательно).
- Нажмите «Создать» — система выдаст API-ключ виджета.
Виджет привязан к указанному домену: на других доменах он работать не будет. Это защищает ваш ключ от использования на сторонних сайтах.
Шаг 2. Настройте внешний вид (по желанию)
Нажмите «Открыть конструктор». Доступны:
- макет: вертикальный, горизонтальный, компактный;
- тема: светлая, тёмная, системная;
- фон: сплошной, прозрачный, стекло;
- скругление углов, стиль кнопок, шрифт;
- скрыть пинг и скрыть провайдера.
На тарифе White-label PRO дополнительно доступны свои акцентные цвета, цвет фона и текста, логотип, ссылки на политику конфиденциальности и условия, а также скрытие брендинга OpenSpeedTest.
Шаг 3. Получите код
В конструкторе нажмите «Копировать код» — вы получите такой фрагмент:
html<div id="openspeedtest-widget" data-api-key="ВАШ_КЛЮЧ"></div>
<script src="https://openspeedtest.ru/widget_v2.js" async defer></script>
Шаг 4. Вставьте на сайт
Поместите код в нужное место страницы. Виджет сам загрузит список серверов, проведёт тест и покажет результат с публичной ссылкой.
Атрибуты контейнера
Внешний вид можно задать и вручную через атрибуты data-*:
| Атрибут | Значения | По умолчанию |
|---|---|---|
data-api-key | ваш ключ виджета | — (обязателен) |
data-theme | light, dark, auto | light |
data-layout | modern, horizontal, compact | modern |
data-bg-type | solid, transparent, glass | solid |
data-shadows | none, soft, hard | soft |
data-btn-style | pill, round, square | pill |
data-border-radius | любое значение CSS | 24px |
data-font | семейство шрифтов | системный |
data-color-accent | цвет (HEX) | #007AFF |
data-color-bg | цвет (HEX) | #ffffff |
data-color-text | цвет (HEX) | #1c1c1e |
data-hide-ping | true | false |
data-hide-isp | true | false |
Пример:
html<div id="openspeedtest-widget"
data-api-key="ВАШ_КЛЮЧ"
data-theme="dark"
data-layout="compact"
data-hide-ping="true"></div>
<script src="https://openspeedtest.ru/widget_v2.js" async defer></script>
Бесплатный и PRO. На бесплатном тарифе виджет показывает брендинг OpenSpeedTest и рекламный блок после теста; на PRO-тарифе надписи убираются, а логотип, цвета и ссылки берутся из настроек в кабинете.
Техническая деталь
Виджет обращается к публичному API OpenSpeedTest: получает список серверов и отправляет результат теста с подписью. Запросы виджета не ограничиваются квотой (не получают ответ 429), чтобы ограничения не ломали работу сайтов клиентов, но учитываются в статистике. Скрипт и тестовый воркер встроены в widget_v2.js; внешних зависимостей нет.