--- type: how-to title: Клиентская интеграция summary: Как поместить виджет на свою страницу, через тег скрипта CDN или импорт npm, и какой способ когда подходит. --- Виджет это один небольшой пакет, `@caputchin/widget`, который регистрирует пользовательские элементы `` и ``. Есть два способа поместить его на твою страницу. Выбирай по тому, есть ли у твоего сайта шаг сборки. Эти два элемента не взаимозаменяемы, когда ключ требует игру. Если у ключа сайта включены игровые ворота (его настройка **Требовать игру для проверки**), галочный `` на нём не проходит и поднимает ошибку `gate-unavailable`; там работает только ``. Это сделано намеренно, потому что ворота соблюдаются на стороне Caputchin. Смотри [игровые ворота](/docs/site-keys/games). ## Тег скрипта (CDN) Нет шага сборки, чистая HTML или серверно отрендеренная страница? Загрузи его прямо с CDN jsDelivr: ```html ``` `@3` закрепляет текущую мажорную версию, так что ты получаешь исправления и новые игры без внезапного ломающего изменения. Помести эту одну строку в свой `` (или прямо перед ``), и элементы зарегистрированы для всей страницы. ## npm (ESM) Есть бандлер (Vite, webpack, Next.js и так далее)? Установи пакет и импортируй его один раз при старте: ```bash npm install @caputchin/widget ``` ```js import "@caputchin/widget"; ``` Импорт ничего не выставляет для вызова; он выполняется ради своего побочного эффекта, регистрации пользовательских элементов. Помести его в точку входа приложения, чтобы он отработал до того, как отрендерится любой ``. ## Какой из них? - **Нет шага сборки** (чистый HTML, серверно отрендеренный шаблон): бери **тег скрипта**. Это вся интеграция в одной строке. - **Собранное приложение** (React, Vue и прочее): бери **импорт npm**. Он версионируется с твоим lockfile и избегает внешнего запроса, блокирующего рендеринг. Так или иначе элемент и всё, что ниже по потоку (вставленный токен, твоя серверная проверка), идентичны. Меняется только то, как прибывает пакет. ## См. также - [Примеры фронтенд-интеграции](/docs/integration-guides/frontend-examples) для элемента в каждом фреймворке. - [Добавь виджет на свой сайт](/docs/getting-started/add-the-widget) для полного прохождения.