Как встроить флипбук на сайт Wix

Wix позволяет легко создавать полированные сайты без написания кода, но добавление интерактивного контента, такого как флипбук, поначалу может показаться непростой задачей. Хорошая новость: встраивание флипбука FlipLink на сайт Wix занимает всего несколько минут — опыт в программировании не нужен.

В этом руководстве вы узнаете, как получить код встраивания из FlipLink, добавить его в редактор Wix и настроить размеры так, чтобы флипбук отлично выглядел на любом экране.

Зачем встраивать флипбук на сайт Wix?

Статичные PDF-файлы, скрытые за ссылками для скачивания, не привлекают посетителей. Встроенный флипбук позволяет людям листать контент прямо на странице с реалистичной 3D-анимацией перелистывания. Это означает:

• Более высокую вовлечённость — посетители взаимодействуют с вашим контентом вместо того, чтобы переходить в PDF-просмотрщик
• Больше времени на странице — интерактивные элементы удерживают людей
• Профессиональную подачу — каталоги, портфолио, журналы и брошюры выглядят гораздо более полированными как флипбуки
• Без загрузок — всё загружается прямо в браузере

Будь то каталог товаров, корпоративный отчёт или цифровой журнал, встраивание всегда лучше, чем просто ссылка.

Что понадобится

Прежде чем начать, убедитесь, что у вас есть:

1. Аккаунт FlipLink с хотя бы одним опубликованным флипбуком (зарегистрируйтесь здесь, если ещё не создали)
2. Доступ к Редактору Wix для вашего сайта
3. Код встраивания или ссылка для общего доступа на ваш флипбук из FlipLink

Это всё. Дополнительные платные плагины или сторонние приложения Wix не нужны.

Шаг 1: Получите код встраивания из FlipLink

Сначала скопируйте код встраивания для флипбука, который хотите отобразить.

1. Войдите в панель управления FlipLink на go.fliplink.me
2. Откройте флипбук, который хотите встроить
3. Нажмите кнопку Поделиться на панели инструментов
4. Выберите вкладку Встроить
5. Скопируйте предоставленный iframe-код

Код встраивания выглядит примерно так:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

FlipLink предоставляет готовый iframe-сниппет, поэтому создавать что-либо вручную не нужно. Подробнее об опциях встраивания читайте на странице функции Распространение и общий доступ.

Шаг 2: Добавьте элемент HTML-встраивания в Wix

Теперь перейдите в редактор сайта Wix.

1. Откройте Редактор Wix для своего сайта
2. Перейдите на страницу, где должен появиться флипбук
3. Нажмите кнопку Добавить (+) на левой панели инструментов
4. Выберите Встроить код из меню
5. Выберите Встроить HTML
6. На холсте появится серый HTML-виджет — перетащите его в нужное место на странице

В этом виджете и будет располагаться ваш флипбук.

Шаг 3: Вставьте код встраивания

1. Нажмите на только что добавленный HTML-виджет
2. Выберите Ввести код
3. Убедитесь, что режим установлен на HTML (а не URL)
4. Вставьте iframe-код, скопированный из FlipLink
5. Нажмите Обновить или Применить

Флипбук должен отрендериться внутри виджета. Вы увидите интерактивный просмотрщик прямо в предпросмотре редактора Wix.

Шаг 4: Измените размер и расположите флипбук

Размеры iframe по умолчанию могут не идеально соответствовать вашему макету. Вот несколько советов по правильной настройке размеров:

Задайте оптимальную высоту

Высота 500–700 пикселей хорошо подходит для большинства флипбуков. Если контент ориентирован горизонтально (например, разворот каталога), увеличьте высоту до 650–700 пикселей. Для портретных документов обычно достаточно 500–600 пикселей.

Задайте полную ширину

Чтобы флипбук занимал всю область контента, установите ширину виджета, соответствующую колонке контента вашей страницы. В редакторе Wix перетащите края HTML-виджета, чтобы он заполнил доступное пространство, или используйте параметр Растянуть, если ваш шаблон Wix поддерживает его.

Адаптивность

Wix обрабатывает адаптивное поведение иначе, чем традиционный HTML. Несколько моментов, которые стоит учесть:

• HTML-виджет встраивания не изменяет размер автоматически на мобильных устройствах в классическом редакторе Wix — возможно, потребуется отдельно настроить мобильную версию
• В мобильном редакторе Wix нажмите на HTML-виджет и измените его размер для меньших экранов
• Установите ширину iframe равной 100% в коде встраивания, чтобы он заполнял любой контейнер, предоставленный Wix
• Рассмотрите уменьшение высоты до 400–500 пикселей на мобильных устройствах, чтобы флипбук не занимал весь экран

Если вы используете Wix Studio (ранее Editor X), у вас больше контроля над адаптивными точками останова, и виджет можно настроить на плавное масштабирование.

Шаг 5: Настройте белый список доменов

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

1. Перейдите в панель управления FlipLink
2. Откройте настройки флипбука
3. Перейдите в раздел Белый список доменов
4. Добавьте домен вашего сайта Wix (например, www.yourbusiness.com или yourusername.wixsite.com)
5. Сохраните изменения

Без белого списка посетители могут увидеть сообщение о блокировке вместо флипбука. Если вы используете собственный домен, подключённый к Wix, добавьте в белый список именно его, а не адрес .wixsite.com по умолчанию.

Решение распространённых проблем

Флипбук не отображается в редакторе

• Убедитесь, что выбран режим HTML, а не Адрес веб-сайта в виджете встраивания
• Убедитесь, что флипбук опубликован (не в статусе черновика) в FlipLink
• Проверьте, что URL в атрибуте src iframe корректен и открывается в обычной вкладке браузера

Флипбук загружается, но выглядит обрезанным

• Увеличьте высоту HTML-виджета встраивания в редакторе Wix
• Убедитесь, что атрибут width iframe установлен на 100%
• Проверьте, не обрезает ли виджет какой-либо родительский контейнер в вашем макете Wix

Флипбук показывает пустой белый блок

• Возможно, для вашего флипбука включён белый список доменов — добавьте домен Wix в разрешённый список
• Очистите кэш браузера и перезагрузите страницу
• Попробуйте открыть URL флипбука напрямую в новой вкладке, чтобы убедиться, что он загружается

Встраивание выглядит иначе на мобильных устройствах

• Переключитесь в мобильный редактор Wix и отдельно настройте размер виджета
• Уменьшите высоту iframe на мобильных устройствах, чтобы избежать избыточной прокрутки
• Проверьте на реальном мобильном устройстве, так как предпросмотр Wix для мобильных иногда отличается от реального поведения

Альтернатива: ссылка вместо встраивания

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

1. Скопируйте ссылку для общего доступа из FlipLink (не код встраивания)
2. Добавьте кнопку или текстовую ссылку на своей странице Wix
3. Укажите ссылку на URL вашего флипбука с открытием в новой вкладке

Этот подход хорошо работает для:

• Email-кампаний, где вы направляете трафик на отдельную страницу флипбука
• Навигационных меню, где нужна прямая ссылка на каталог или журнал
• Лендингов, где предпочтительна чистая секция-герой с CTA-кнопкой

Также можно создать отдельную страницу на сайте Wix, содержащую только встроенный флипбук, а затем добавить ссылку на неё из навигации или другого контента.

Советы для лучшего опыта с флипбуком на Wix

• Размещайте флипбук ниже первого экрана, если выше есть другой важный контент — крупные встраивания могут сдвигать ключевую информацию вниз
• Добавьте контекст выше встраивания с коротким заголовком и описанием, чтобы посетители понимали, что перед ними
• Используйте заглушку загрузки — добавьте краткую текстовую заметку «Загрузка флипбука...» над виджетом для медленных соединений
• Оптимизируйте флипбук — сжимайте PDF перед загрузкой в FlipLink для более быстрой загрузки
• Тестируйте на нескольких устройствах перед публикацией — проверьте на десктопе, планшете и телефоне, чтобы всё выглядело правильно

Полезные руководства

Если вы встраиваете флипбуки на других платформах, эти руководства разбирают процесс для каждой из них:

• Как встроить PDF на любой сайт
• Как встроить флипбук в WordPress
• Как встроить флипбук с помощью iframe

Начните встраивать флипбук уже сегодня

Разместить флипбук FlipLink на сайте Wix просто: скопируйте код встраивания, вставьте его в HTML-виджет, настройте размеры и опубликуйте. Весь процесс занимает менее пяти минут.

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