Добавление виджета на сайт Flexby

Добавьте на сайт Flexbe интерактивную карту с вашими объектами, фотографиями и фильтрами. Посетители смогут изучать предложения, выбирать точки на карте и открывать подробные карточки прямо на странице сайта.

В этой инструкции мы установим виджет способом «Встроенный блок», настроим его ширину и высоту, а затем проверим отображение на компьютере и телефоне. Для подключения понадобится готовый код из личного кабинета MapFolio — писать его самостоятельно не нужно.

Откройте личный кабинет MapFolio и перейдите в раздел «Виджеты». Нажмите на карточку со знаком «+», чтобы перейти к созданию нового виджета.

Если подходящий виджет уже создан, откройте его настройки и перейдите к копированию кода установки.

На странице создания выберите способ установки «Встроенный блок». При таком размещении карта занимает выбранное место на странице и отображается вместе с остальным содержимым сайта.

Укажите понятное название, например «Карта объектов на главной», или оставьте предложенное. Название помогает отличать виджеты в личном кабинете.

Нажмите «Подтвердить выбор», чтобы перейти к дальнейшей настройке.

Откройте раздел «Код для установки» и нажмите кнопку копирования справа от кода.

Скопируйте код целиком. В нём уже указан ваш виджет и подключён необходимый скрипт. Изменять идентификатор или другие части кода не требуется.

Перейдите в редактор Flexbe и откройте страницу, на которой должна находиться карта. Выберите место между существующими блоками и нажмите кнопку добавления новой секции.

В библиотеке откройте раздел «Пустые» и выберите блок «Колонки», показанный на скриншоте.

В этот блок мы добавим HTML-элемент с кодом MapFolio. Настройки блока позволят управлять шириной карты и её расположением относительно других элементов страницы.

Наведите курсор на добавленный блок и откройте «Настройка структуры» на его панели управления.

В разделе настройки колонок выберите вариант с одной колонкой.

Откройте настройки самой колонки. Для этого наведите курсор на её область и нажмите соответствующую кнопку на панели управления.

В настройках фона выберите «Без фона». Виджет использует собственное оформление, поэтому дополнительная заливка колонки для установки не нужна.

Внутри подготовленной колонки нажмите «+», чтобы добавить новый элемент.

В открывшемся списке выберите HTML-элемент. Если он не виден сразу, воспользуйтесь поиском.

HTML-элемент позволяет разместить сторонний виджет в определённом месте страницы. Подробнее об этом способе подключения можно прочитать в справке Flexbe.

Откройте редактор кода добавленного HTML-элемента. Если во вкладках HTML и CSS / LESS уже есть демонстрационный код, очистите его.

Выполняйте этот шаг внутри нового элемента, который вы создали для MapFolio.

Перейдите на вкладку HTML и вставьте весь код, скопированный из личного кабинета MapFolio.

Нажмите «Сохранить» в редакторе кода, затем закройте панель. Дополнительные стили для обычной установки виджета не требуются.

После сохранения кода в области HTML-элемента может появиться интерфейс MapFolio: список объектов, карта и элементы управления.

Если список объектов загрузился, а вместо карты отображается ошибка, проверьте выбранный API-ключ Яндекс Карт и его настройки. Причина может быть связана с ключом, ограничениями доступа или загрузкой сервиса карт.

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

В первую очередь проверьте, что в разрешённых доменах указан адрес вашего сайта. Для проверки внутри редактора или предпросмотра может потребоваться дополнительно разрешить соответствующий домен.

Настройки изменяются в кабинете разработчика Яндекс Карт. Подробнее — в инструкции по ограничениям API-ключа.

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

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

• Карта загружается и показывает ваши объекты.
• Нажатие на точку открывает нужную карточку.
• Фотографии и описание отображаются корректно.
• Поиск и фильтры работают, если они включены.
• Виджет помещается в блок и не перекрывает соседние элементы.

Если для карты нужно больше пространства, откройте настройки структуры блока в Flexbe.

В параметре «Растянуть контент» выберите «По экрану». После этого содержимое блока сможет занимать доступную ширину страницы.

В поле «Отступ по бокам» задайте расстояние от краёв страницы до виджета.

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

Сохраните изменения и проверьте результат на сайте. Ширину задаёт блок Flexbe, поэтому для этого изменения не нужно заново копировать код MapFolio.

За внешний вид самой карты и её интерфейса отвечают настройки MapFolio. Вернитесь в личный кабинет, откройте установленный виджет и перейдите во вкладки «Параметры» или «Дизайн».

Здесь можно скорректировать доступные настройки отображения и подобрать оформление под ваш сайт.

В настройках для десктопных устройств найдите поле «Высота».

В качестве начального значения можно использовать 70vh, а затем оценить результат на странице. Это примерно 70% высоты окна браузера: карта остаётся достаточно крупной, а посетитель видит часть окружающего содержимого.

Значения от 65vh до 70vh можно взять за ориентир. Окончательную высоту подберите под вашу страницу, учитывая шапку сайта, соседние блоки и количество информации в карточках.

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

Обратите внимание на боковые отступы, размер области карты и доступность кнопок. Если необходимо, скорректируйте настройки мобильного отображения в MapFolio и параметры блока в Flexbe.

После изменения параметров или дизайна нажмите «Сохранить» в MapFolio. Затем обновите страницу вашего сайта, чтобы проверить результат.

Для изменения настроек существующего виджета повторно вставлять код в Flexbe не требуется. Заменить код нужно, если вы устанавливаете другой виджет.