Код встраивания

Код встраивания — это фрагмент HTML, обычно тег [iframe](/glossary/iframe), который вставляется в исходный код веб-страницы для отображения внешнего контента прямо на ней. В цифровом издательстве коды встраивания загружают просмотрщик флипбука или документа непосредственно на хост-странице, позволяя читателям взаимодействовать с публикацией, не покидая сайт. Контент загружается с серверов издательской платформы, поэтому хостинг файлов на целевом сайте не требуется. При обновлении исходной публикации все встроенные экземпляры автоматически отражают изменения.

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

FlipLink генерирует готовый к использованию код встраивания для каждого опубликованного флипбука или документа. В панели [распространения](/features/sharing-and-distribution) вы копируете фрагмент [iframe](/glossary/iframe) и вставляете его на любой сайт, блог или CMS, принимающий HTML. Встраивание по умолчанию [адаптивное](/glossary/responsive-embed), подстраиваясь под ширину контейнера на десктопных и мобильных экранах. FlipLink также предлагает [встраиваемое кликабельное изображение](/features/clickable-image-embed) — статическую миниатюру со ссылкой на полный флипбук, полезную для email-рассылок или платформ, ограничивающих iframe. Вы можете контролировать, где отображается ваш контент, с помощью [белого списка доменов](/glossary/domain-whitelisting), ограничивающего встраивание одобренными сайтами.

Код встраивания состоит из нескольких ключевых элементов: - **Тег iframe**: Основной элемент, создающий окно для внешнего контента. Содержит атрибут `src`, указывающий на URL публикации, а также атрибуты `width` и `height` для задания размеров. - **Адаптивная обёртка**: Окружающий `div` с процентным размером обеспечивает масштабирование iframe в соответствии с макетом страницы. Код FlipLink включает эту обёртку по умолчанию, поэтому писать собственный CSS не нужно. - **Атрибуты allow**: Современные браузеры требуют явных атрибутов `allow` для таких функций, как полноэкранный режим. Код FlipLink включает их, чтобы все интерактивные функции работали сразу. - **Резервный контент**: Текстовая ссылка внутри тега iframe служит резервным вариантом для редких браузеров или почтовых клиентов, не поддерживающих iframe. Встраивание загружается асинхронно, не блокируя рендеринг хост-страницы. Влияние на производительность минимально, поскольку просмотрщик флипбука инициализируется только когда iframe становится видимым в области просмотра.

**Что такое код встраивания?** Код встраивания — это HTML-фрагмент, который вы вставляете на свой сайт для отображения контента, размещённого на другой платформе. Для флипбуков он обычно создаёт iframe, загружающий интерактивный просмотрщик публикации прямо на вашу страницу. **Можно ли встроить флипбук на любой сайт?** Да, при условии, что сайт позволяет вставлять пользовательский HTML. Это касается WordPress, Shopify, Squarespace, Wix (через блоки HTML-встраивания) и любого сайта с поддержкой HTML. Некоторые почтовые клиенты не поддерживают iframe — для них используйте встраиваемое кликабельное изображение FlipLink. **Обновляется ли код встраивания автоматически при изменении публикации?** Да. Поскольку код указывает на URL публикации на серверах FlipLink, любые изменения — замена PDF, изменение настроек или обновление CTA-кнопок — мгновенно отражаются во всех встроенных экземплярах без необходимости изменять код на вашем сайте.

1. Опубликуйте флипбук или документ в FlipLink 2. Откройте панель распространения и скопируйте код встраивания 3. В CMS или редакторе вашего сайта добавьте пользовательский HTML-блок 4. Вставьте код встраивания в HTML-блок 5. Просмотрите страницу, чтобы убедиться, что флипбук корректно отображается на десктопе и мобильных устройствах 6. Если вы хотите ограничить, где может быть встроен флипбук, настройте [белый список доменов](/glossary/domain-whitelisting) в параметрах публикации 7. Протестируйте интерактивные функции (перелистывание страниц, CTA-кнопки, [захват лидов](/glossary/lead-capture)) во встроенной версии, чтобы убедиться, что они работают как ожидается