Как встроить 3D-флипбук в Notion вместо плоского PDF

Вы добавили PDF на страницу Notion, а получили серую ленту прокрутки. Посетитель видит либо ссылку на скачивание с миниатюрой, либо вертикальную полосу плоских страниц, на которой никто не задерживается. При этом Notion покажет в том же блоке живой просмотрщик, если дать ему адрес, который узнаёт его механизм встраивания. Флипбук i3Dify — PDF, превращённый в книгу, которую листают прямо в браузере, — как раз из таких.

Блок PDF в Notion — это лента, а не книга

Если загрузить PDF прямо в Notion, получится одно из двух. Блок файла: ссылка на скачивание с маленькой миниатюрой, по которой большинство посетителей так и не кликнет. Или встроенный просмотр, где страницы идут плоской вертикальной лентой, как в превью облачного диска. Для внутренней инструкции этого достаточно.

Но на странице, которую вы отправляете за пределы команды, — портфолио, лукбуке, меню, свадебном мудборде — именно этот блок люди пролистывают не глядя. Флипбук ведёт себя как предмет. Кликните по правой четверти просмотрщика, и лист изгибается вдоль корешка, пока переворачивается, а соседние страницы уже загружены, так что на телефоне перелистывание не подвисает. Левая четверть возвращает назад, клавиши со стрелками делают то же самое. Потяните в любом месте, и книга повернётся, а когда отпустите, вернётся на место. Hotspot — кликабельная область на странице — открывает свою ссылку в новой вкладке, а на панели внизу есть кнопки масштаба для мелкого шрифта.

Notion встраивает голую ссылку, а не iframe

Сначала соберите книгу. Загрузите PDF — страницы извлекаются прямо в браузере, — задайте цвет обложки и панель ссылок, затем опубликуйте. Окно «Поделиться» выдаст ссылку на просмотрщик и код iframe. Notion нужна только ссылка: iframe его механизм встраивания напишет сам.

На странице наберите /embed на новой строке, выберите Embed, вставьте ссылку и нажмите Embed link. Можно и проще: вставить ссылку прямо в строку и выбрать Create embed. Блок появится низким, поэтому потяните нижний край до 600–800 пикселей, а по ширине просмотрщик займёт всю колонку. Бесплатный тариф даёт 3 проекта и 50 МБ, и на каждом бесплатном просмотрщике в углу стоит плашка i3Dify. Pro стоит 3 $ в месяц и убирает её.

Приватный проект ломает встраивание, приватная страница Notion — нет

Два уровня приватности никак не связаны между собой, и на этом многие спотыкаются. Настройки доступа Notion решают, кто видит страницу. Видимость проекта решает, загрузится ли просмотрщик вообще: приватный проект отвечает на публичную ссылку страницей Not Found, и блок остаётся пустым. Перед вставкой переключите проект в режим «По ссылке» или «Публичный». «По ссылке» скрывает проект от поисковиков, но открывает его каждому, у кого есть адрес.

Для работы, которую вы сдаёте клиенту, поставьте на проект с доступом по ссылке ещё и пароль, а сам пароль передайте отдельно. Ограничение стоит назвать прямо: пароль защищает страницу проекта, но не прямые ссылки на изображения, так что это замок на двери, а не сейф. Настройки для каждого проекта описаны в разделе о доступе и распространении.

Слабые места — приложение Notion и экспорт в PDF

Прежде чем строить страницу вокруг встроенного флипбука, полезно знать два сценария, где он работает хуже. Мобильное приложение Notion ограничивает взаимодействие с iframe сильнее, чем браузер: просмотрщик у пользователей приложения открывается, но жесты ощущаются скованнее. Тот, кто откроет вашу общую страницу в мобильном браузере, получит всё целиком.

С экспортом то же самое. Экспорт в HTML сохраняет iframe, экспорт в PDF заменяет его ссылкой. Если страницу будут архивировать или пересылать файлом, вставьте ссылку на просмотрщик обычным текстом рядом с блоком, и книга переживёт дорогу.

Тот же проект встраивается в WordPress, Webflow, Framer, Carrd и Squarespace — там вставляют уже iframe, а не голую ссылку. Один проект, одна ссылка, и посетитель видит книгу прямо на странице, а не ссылку на скачивание, по которой никто не кликает.

Превратите свой PDF в 3D-флипбук.