Клиентская интеграция
Виджет это один небольшой пакет, @caputchin/widget, который регистрирует пользовательские элементы <caputchin-widget> и <caputchin-game>. Есть два способа поместить его на твою страницу. Выбирай по тому, есть ли у твоего сайта шаг сборки.
Тег скрипта (CDN)
Нет шага сборки, чистая HTML или серверно отрендеренная страница? Загрузи его прямо с CDN jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/@caputchin/widget@3/dist/widget.js"></script>@3 закрепляет текущую мажорную версию, так что ты получаешь исправления и новые игры без внезапного ломающего изменения. Помести эту одну строку в свой <head> (или прямо перед </body>), и элементы зарегистрированы для всей страницы.
npm (ESM)
Есть бандлер (Vite, webpack, Next.js и так далее)? Установи пакет и импортируй его один раз при старте:
npm install @caputchin/widgetimport "@caputchin/widget";Импорт ничего не выставляет для вызова; он выполняется ради своего побочного эффекта, регистрации пользовательских элементов. Помести его в точку входа приложения, чтобы он отработал до того, как отрендерится любой <caputchin-widget>.
Какой из них?
- Нет шага сборки (чистый HTML, серверно отрендеренный шаблон): бери тег скрипта. Это вся интеграция в одной строке.
- Собранное приложение (React, Vue и прочее): бери импорт npm. Он версионируется с твоим lockfile и избегает внешнего запроса, блокирующего рендеринг.
Так или иначе элемент и всё, что ниже по потоку (вставленный токен, твоя серверная проверка), идентичны. Меняется только то, как прибывает пакет.
См. также
- Примеры фронтенд-интеграции для элемента в каждом фреймворке.
- Добавь виджет на свой сайт для полного прохождения.