Встраивание на сайт и безопасность
Встраивайте интерактивные карты на Webflow, WordPress, Shopify, Next.js или на свои сайты. Защищайте данные белым списком разрешенных доменов.
Методы установки: скрипт или iframe
Layerpin предоставляет вам два метода установки для публикации интерактивной карты на любом веб-сайте, CMS или веб-приложении. Оба метода поддерживают плавное реагирование, мультисенсорное масштабирование и динамическое изменение размера контейнера:
Один самоинициализирующийся тег сценария. Он автоматически измеряет ширину контейнера, управляет динамической высотой области просмотра и предотвращает совокупные изменения макета без необходимости использования специального CSS.
<script src="https://layerpin.com/embed.v1.js?map=emb_YOUR_MAP_ID&width=100%25&height=640px&minHeight=320px&border=none"></script>Стандартный фрагмент iframe в песочнице. Идеально подходит для строгих сред CMS, сторонних песочниц и платформ, ограничивающих внешние теги JavaScript.
<iframe
src="https://layerpin.com/embed/emb_YOUR_MAP_ID"
title={t("Interactive map")}
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
allow="fullscreen"
allowfullscreen
style="display:block;width:100%;height:640px;min-height:320px;border:0;"
></iframe>Прямая защита URL-адресов
Посещение URL-адреса для встраивания непосредственно в адресную строку браузера заблокировано. Layerpin требует проверенного родительского источника для безопасной визуализации карты в авторизованном контейнере внедрения.
Предустановки высоты и адаптивный макет
Ширина встраивания всегда растягивается, чтобы заполнить 100 % содержащего его блока. Вы можете выбрать одну из четырех предустановленных настроек высоты или указать собственные размеры:
Подходит для столбцов боковой панели, виджетов с подробными сведениями о продуктах и компактных вставок в блогах.
Сбалансированное значение по умолчанию для полноразмерных целевых страниц, руководств и списков каталогов.
Предназначен для многоэтажных архитектурных чертежей, экскурсий по кампусам и схем высокой плотности.
Заполняет всю область просмотра браузера на мобильных устройствах и настольных компьютерах, что идеально подходит для специальных приложений Map Explorer.
Режимы загрузки и элементы управления просмотрщиком
Настройте способ загрузки встроенной карты и какие элементы управления будут доступны посетителям:
Ленивый (по умолчанию): Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. Жаждущий: Загружается сразу при первоначальном анализе HTML для главных разделов.
Включает кнопку полноэкранного развертывания внутри средства просмотра. Посетители могут развернуть карту на весь монитор для более детального изучения, не покидая ваш сайт.
Переключите значок атрибуции платформы во встроенном средстве просмотра. Платные планы могут скрывать брендинг, создавая цельную визуальную презентацию с полной белой маркировкой.
Передайте параметр языкового запроса (например, ?lang=ja) в iframe источник to pre-select the locale on regional pages. Learn more in the Многоязычное руководство.
Разрешенные источники происхождения и белый список доменов
Белый список доменов гарантирует, что ваши интерактивные карты можно будет встраивать только на одобренные вами веб-сайты. Неавторизованные домены, пытающиеся использовать iframe для вашей карты, получат уведомление об отказе в доступе.
Правила безопасности происхождения
- Требуется протокол HTTPS: Embed origins require secure connections. Enter domains with or without protocol (e.g.,
https://mycompany.comormycompany.com). - Никаких путей, запросов или хэшей: Do not include subpaths or parameters (e.g., use
https://store.example.com, nothttps://store.example.com/map?view=1). - Сопоставление поддоменов с подстановочными знаками (Премиум): Add
https://*.mycompany.comto authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule. - Строгая реферальная политика: Iframes must include
Referrerpolicy="строгое происхождение-когда-перекрестное происхождение"so the browser sends the parent origin header to our authorization validator.
Предварительные условия для включения внедрения
Карта должна быть опубликовано и укажите хотя бы один действительный источник, прежде чем можно будет включить встраивание веб-сайта.
Пробные карты представляют собой частные черновики и не могут быть вставлены публично, пока не будет выбран активный план карты.
Встроить отзыв и ротацию идентификатора
Если код внедрения случайно попал в общедоступный репозиторий кода или была завершена передача внешнего агентства, вы можете мгновенно повернуть токен:
В строке состояния в правой части страницы «Встроить конфигурацию» нажмите Восстановить идентификатор. Layerpin instantly creates a brand new unique embed token (e.g., emb_...).
Предварительный просмотр на нескольких устройствах
Протестируйте встроенный опыт непосредственно на панели управления Layerpin перед публикацией кода на рабочем веб-сайте:
Имитирует стандартные настольные мониторы и широкоэкранные окна просмотра.
Тестирует макеты iPad и планшетов с адаптивными панелями пользовательского интерфейса.
Проверяет сенсорную навигацию, всплывающие листы и масштабирование пальцами на телефонах.
Бесплатные предварительные просмотры информационной панели
Показы карт, созданные на вкладке «Предварительный просмотр» панели управления, не учитываются в вашей ежемесячной квоте просмотра карты. Вы можете свободно проверять изменения макета и тестировать фильтры категорий.
Конструкторы веб-сайтов и руководства по CMS
Интерактивные карты Layerpin изначально работают со всеми основными конструкторами веб-сайтов. Выберите свою платформу ниже, чтобы получить индивидуальные рекомендации по настройке:
Embed responsive interactive maps into WordPress using Gutenberg Custom HTML blocks, Classic Editor, Elementor, or Divi HTML widgets.
Embed interactive maps in Webflow Designer using the Custom Code Embed element with full support for fluid responsive containers.
Embed full-width or fixed-dimension interactive maps in Wix Studio and Wix Editor using the HTML Embed element.
Install responsive interactive maps into Squarespace 7.1 and Fluid Engine sections using Code blocks.
Add interactive maps directly into Framer canvases using the native Embed component with fluid responsiveness.
Insert responsive interactive maps into Ghost CMS publications, member pages, and posts using HTML cards.
Подробное руководство
Нужны пошаговые снимки экрана для Webflow, WordPress, Wix, Squarespace или Framer?
Ограничения происхождения и емкость плана
Разрешенная емкость источника и поддержка подстановочных знаков определяются вашим активным планом подписки:
| План | Разрешенные источники | Домены с подстановочными знаками (*.) | Включенные ежемесячные просмотры | Опубликованные карты |
|---|---|---|---|---|
| Trial | Private only | Не поддерживается | Draft testing only | 0 (Draft only) |
| Basic | 10 origins | Не поддерживается | 5,000 views | 3 maps |
| Pro | 25 origins | Не поддерживается | 25,000 views | 15 maps |
| Premium | 50 origins | Поддерживается | 100,000 views | 50 maps |