Листалка PDF для сайта: как встроить PDF в виде флипбука

Каталог, прайс или журнал в PDF можно выложить на сайт ссылкой на файл, а можно встроить листалкой: документ открывается прямо на странице и перелистывается как журнал. Разберём, чем листалка отличается от ссылки на PDF и встроенного просмотрщика браузера, какой код выбрать под ваш сайт и как менять файл, не трогая страницу.

Три способа показать PDF на сайте

Ссылка на файл

Посетитель уходит со страницы: файл открывается в новой вкладке или скачивается — как решит браузер. Счётчик сайта увидит клик, но не то, какие страницы открыли.

Встроенный просмотрщик браузера

PDF вставляют тегом iframe, embed или object. На компьютере его покажет просмотрщик браузера — у каждого браузера свой вид и своя панель. С телефонами сложнее. В руководстве Nutrient по встраиванию PDF про iframe сказано:

In practice, iframes consistently struggle on iOS Safari and Chrome on Android. The browser may show a blank space or trigger a download prompt instead of rendering inline.

То есть на телефоне вместо документа может оказаться пустое место или предложение скачать файл.

Листалка

Сервис заранее превращает страницы PDF в картинки, а на сайт встраивается плеер, который одинаково работает в разных браузерах и на телефоне. В BookFlip страницы подгружаются по мере листания, ссылки из PDF остаются кликабельными, по тексту работает поиск.

Листалка лишняя, если PDF скачивают, чтобы распечатать или заполнить: тогда хватит ссылки на файл. Кнопка «Скачать» есть и в плеере BookFlip — она отдаёт исходный PDF, и её можно скрыть в настройках.

	Ссылка на PDF	Просмотрщик браузера	Листалка BookFlip
Где открывается	В новой вкладке или скачивается	На странице, вид зависит от браузера	На странице, один плеер во всех браузерах
Телефон	Системный просмотрщик или загрузка	Может не показать документ	Свайп, зум щипком
Внешний вид	Как в браузере	Как в браузере	Цвета, фон, панели, свой логотип
Статистика	Клик по ссылке	Нет данных по страницам	Просмотры, среднее время, дочитывания, просмотры по страницам
Обновление	Перезалить файл	Перезалить файл	Новая версия в кабинете, код на сайте тот же

Четыре варианта кода

Код лежит на вкладке «Интеграция» флипбука, в блоке «Код вставки». У каждого варианта есть кнопка «Посмотреть демо» — она открывает тестовую страницу с вашим флипбуком, встроенным этим способом.

Скрипт

Рекомендованный вариант. Две строки: ссылка на флипбук с обложкой и подключение скрипта. Упрощённо код выглядит так, в кабинете адрес и обложка уже подставлены:

<a href="https://read.bookflip.ru/v/ID-флипбука" class="fv-embed"><img src="обложка" alt="Название"></a>
<script defer src="https://read.bookflip.ru/public/embed/js/embed.min.js"></script>

Скрипт заменяет ссылку плеером на всю ширину колонки и сам подбирает высоту по пропорциям страниц. Плеер подгружается, когда блок приближается к экрану. Если скрипт не загрузится, на странице останется обычная ссылка с обложкой.

Попап

На странице стоит обложка, по клику флипбук открывается во всплывающем окне поверх сайта. Удобно, когда на одной странице несколько документов — прайс, каталог, сертификаты. Стили обложки изолированы от стилей сайта, а скрипт находит и обложки, добавленные на страницу позже, например блоками конструктора.

Iframe

Одна строка: <iframe src="…" width="100%" height="800" allowfullscreen></iframe>. Высота фиксированная и не подстраивается под пропорции страниц — подберите значение height под свой макет. Этот вариант нужен, когда редактор сайта вырезает теги script.

Ссылка

Обложка-ссылка: по клику флипбук открывается на отдельной странице. Подходит для списка документов или раздела «Каталоги». Ниже на той же вкладке — «Прямая ссылка» для писем и мессенджеров и «QR-код» для печати.

Пятая вкладка, «ZIP-архив», — не для сайта, а для показа без интернета, с флешки или диска; она есть на тарифе Команда.

Куда вставлять код

Код — обычный HTML. В CMS и конструкторах его вставляют в блок для HTML-кода или в режим редактирования исходного кода страницы. Если после сохранения вместо плеера осталась только ссылка, редактор вырезал скрипт — возьмите iframe.

Один флипбук можно встроить на любое число сайтов и страниц, статистика у него будет общая. Если документов много, соберите их в полку — витрину с обложками; её встраивают так же: скриптом, iframe или ссылкой.

Замена файла без правки сайта

Код ссылается на флипбук, а не на конкретный PDF. Когда выходит новый каталог или меняются цены, откройте у флипбука вкладку «Файлы» и нажмите «Загрузить новую версию». С галочкой «Сразу активировать новую версию» посетители увидят новый файл после обработки, а код на сайте, прямая ссылка и QR-код останутся прежними. Без галочки версия загрузится неактивной, её включают позже кнопкой «Активировать». Той же кнопкой возвращают прошлую версию, если в новой нашлась ошибка.

Оглавление у каждой версии своё; в новую его переносят кнопкой «Копировать из версии» на вкладке «Оглавление».

Свой домен

По умолчанию флипбук открывается на домене BookFlip. На тарифах Бизнес и Команда можно подключить свой поддомен, например flip.вашсайт.ru, — флипбуки и полки будут открываться на нём с SSL-сертификатом. Подключение — в разделе «Брендинг», вкладка «Домен»:

Подтвердите базовый домен вашсайт.ru TXT-записью в DNS. Это делается один раз, дальше его поддомены подключаются без TXT.
Добавьте поддомен и создайте CNAME-запись, которую покажет кабинет. Для администратора сайта есть «Скачать инструкцию для сисадмина».
Выберите сертификат: Let's Encrypt выпустится и будет продлеваться автоматически, либо загрузите свой.
Сделайте домен основным — коды встраивания и ссылки в кабинете будут строиться на нём.

Корневой домен вашсайт.ru через CNAME не подключить, только поддомен. На корень поддомена можно вывести полку или отдельный флипбук, а у флипбука на вкладке «Общее» появится поле «Красивая ссылка» — адрес вида flip.вашсайт.ru/f/catalog. Коды, вставленные до подключения домена, продолжают работать.

Источники

Nutrient: How to embed a PDF viewer in a website — раздел про iframe, статья обновлена 6 июля 2026, проверено 24.09.2026

Листалка PDF для сайта — как встроить документ в виде флипбука