Подключение стилей и скриптов

Для работы с Intro.js необходимо подключить два основных ресурса: CSS для стилизации элементов подсказок и JS для функциональности библиотеки. Без корректного подключения этих файлов библиотека не сможет корректно отображать подсказки и выполнять навигацию по шагам.

Подключение через CDN

Наиболее простой способ интеграции — использовать CDN. В <head> HTML-документа подключаются стили:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css">

Для работы скрипта подключение происходит перед закрывающим тегом </body>:

<script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>

Важно: порядок подключения имеет значение. CSS должен быть подключен до любых пользовательских стилей, чтобы не возникало конфликтов. JS должен загружаться после элементов DOM, к которым будут применяться подсказки, чтобы библиотека имела доступ к нужным элементам.

Подключение локальных файлов

Если требуется хранить библиотеку на сервере, необходимо скачать файлы с официального репозитория. После чего подключение осуществляется аналогично CDN:

<link rel="stylesheet" href="/libs/introjs/introjs.min.css">
<script src="/libs/introjs/intro.min.js"></script>

Рекомендуется использовать minified версии (.min.css и .min.js) для уменьшения времени загрузки страницы и повышения производительности.

Подключение с пакетным менеджером

Для проектов на Node.js или с использованием сборщиков типа Webpack, Vite, Parcel можно установить библиотеку через npm или yarn:

npm install intro.js

или

yarn add intro.js

После установки подключение в JavaScript выполняется через импорт:

import introJs from 'intro.js';
import 'intro.js/introjs.css';

Если проект использует TypeScript, библиотека поставляется с типами, что позволяет использовать автокомплит и проверку типов при работе с методами Intro.js.

Асинхронная загрузка и defer

Для ускорения загрузки страницы скрипт можно подключать с атрибутом defer:

<script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js" defer></script>

Это позволяет браузеру сначала обработать HTML и CSS, а затем выполнить библиотеку, избегая блокировки рендеринга страницы.

Совмещение с другими стилями

Intro.js добавляет собственные классы к элементам (introjs-tooltip, introjs-helperLayer), поэтому важно проверять совместимость с существующими CSS-фреймворками. Если используется Bootstrap, Tailwind или Material UI, следует убедиться, что пользовательские стили не переопределяют базовую визуализацию подсказок.

Версионирование

При подключении через CDN рекомендуется указывать конкретную версию, чтобы избежать неожиданного поведения при обновлениях:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js@7.0.1/minified/introjs.min.css">
<script src="https://cdn.jsdelivr.net/npm/intro.js@7.0.1/minified/intro.min.js"></script>

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

Проверка подключения

После подключения стилей и скрипта убедиться, что библиотека корректно загружена, можно с помощью консоли:

console.log(introJs); // Должен выводить функцию IntroJs

Если в консоли выводится undefined, значит, подключение выполнено некорректно: либо неверен путь, либо скрипт загружается до DOM-элементов.

Итоговые рекомендации

  • Подключать CSS в <head> и JS перед </body> или с defer.
  • Использовать minified версии для оптимизации.
  • Для сборщиков и модульной структуры — использовать import.
  • Проверять совместимость с существующими стилями и версионировать библиотеку при CDN-подключении.
  • Проверять загрузку через консоль для уверенности в работоспособности.

Эти шаги гарантируют корректное отображение подсказок и стабильную работу всех функций Intro.js.

Оглавление