Как получить и проверить код установки

Код установки связывает созданный виджет Mapfolio со страницей вашего сайта.

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

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

1. Откройте раздел «Виджеты».
2. Найдите нужный виджет.
3. Нажмите на его карточку.
4. Прокрутите редактор вниз.
5. Найдите блок «6. Код для установки».

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

Код появляется после первого сохранения виджета.

Если новый виджет ещё не сохранён, в блоке будет показано сообщение:

«Сначала сохраните виджет. После сохранения здесь появится готовый код для установки».

В этом случае:

1. заполните основные настройки виджета;
2. нажмите общую кнопку «Сохранить»;
3. дождитесь сообщения об успешном сохранении;
4. снова найдите блок «6. Код для установки».

После сохранения Mapfolio присвоит виджету уникальный идентификатор и подставит его в код.

Для встроенного виджета код состоит из двух строк.

Первая строка создаёт на странице место, в котором появится карта. Вторая строка загружает программу Mapfolio, необходимую для работы виджета.

В первой строке находится часть:

data-mapfolio-widget="..."

Внутри кавычек записан уникальный идентификатор виджета. По нему Mapfolio понимает, какую карту, точки, настройки и дизайн нужно показать.

Идентификаторы разных виджетов не совпадают.

Вторая строка начинается с <script> и содержит адрес:

https://lk.mapfolio.ru/js/mapfolio-widget.js

Эта строка загружает всё необходимое для работы виджета.

Если удалить её, на странице останется пустое место или виджет не запустится.

1. Откройте нужный виджет.
2. Найдите блок «6. Код для установки».
3. Убедитесь, что внутри показаны две строки кода.
4. Нажмите кнопку со значком двух листов справа от кода.
5. Значок на короткое время станет зелёным.
6. Это означает, что код скопирован в буфер обмена.
7. Откройте редактор сайта.
8. Вставьте код в подходящий HTML-блок.

Для вставки можно использовать:

• сочетание клавиш Ctrl + V на Windows;
• сочетание клавиш Command + V на macOS;
• команду «Вставить» в меню редактора.

Перед вставкой на сайт убедитесь, что код скопирован полностью.

В нём должны находиться:

1. строка, начинающаяся с <div;
2. настоящий идентификатор после data-mapfolio-widget=;
3. класс mapfolio-app;
4. строка, начинающаяся с <script;
5. адрес файла mapfolio-widget.js;
6. закрывающая часть </script>.

Если вы сомневаетесь, временно вставьте код в простой текстовый редактор.

Например, на Windows можно использовать Блокнот:

1. откройте Блокнот;
2. нажмите Ctrl + V;
3. убедитесь, что появились обе строки;
4. сравните их с кодом в Mapfolio;
5. ничего не исправляйте вручную;
6. снова скопируйте код непосредственно из Mapfolio перед установкой.

Перед копированием проверьте название открытого виджета и его содержимое в блоке «5. Предпросмотр».

Убедитесь, что:

• открыто правильное название виджета;
• в предпросмотре показаны нужные точки;
• выбран правильный дизайн;
• настройки мобильных и десктопных устройств сохранены;
• виджет включён.

Только после этого копируйте код.

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

Не удаляйте и не заменяйте:

• уникальный идентификатор;
• название data-mapfolio-widget;
• класс mapfolio-app;
• адрес mapfolio-widget.js;
• атрибут defer;
• кавычки;
• угловые скобки < и >;
• закрывающие части </div> и </script>.

Код нужно вставить в то место страницы, где должна отображаться карта.

Обычно для этого используется элемент с одним из названий:

• HTML-блок;
• Произвольный HTML;
• HTML-код;
• Вставка кода;
• Custom HTML.

Точное название зависит от конструктора сайта или системы управления.

1. Вставьте обе строки в HTML-блок.
2. Сохраните изменения в редакторе сайта.
3. Опубликуйте или обновите страницу.
4. Откройте опубликованную страницу в новой вкладке.
5. Дождитесь загрузки карты.
6. Проверьте маркеры.
7. Откройте список точек.
8. Нажмите на одну из карточек.
9. Проверьте поиск и фильтры, если они включены.
10. Откройте страницу на телефоне.
11. Проверьте блок-превью или мобильную карту.

Код работает правильно, если:

• на странице появилась карта или блок-превью;
• карта полностью загрузилась;
• видны опубликованные точки;
• список открывается;
• маркеры реагируют на нажатие;
• карточки точек открываются;
• фотографии и видео отображаются;
• мобильная версия не выходит за границы экрана.

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

Проверьте:

• внешний вид на широком экране;
• отображение на узком экране;
• открытие полноэкранной карты;
• работу кнопки закрытия;
• переход между картой и списком;
• читаемость текста на блоке-превью;
• удобство карточек точек.

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

Можно без повторной установки изменить:

• опубликованные точки;
• названия и описания;
• фотографии и видео;
• поля и фильтры;
• размеры виджета;
• блок-превью;
• цвета и маркеры;
• тень и скругление.

После сохранения Mapfolio передаст обновлённые данные по уже установленному коду.

Это означает, что код вставлен в обычный текстовый элемент.

Чтобы исправить проблему:

1. удалите текст с кодом;
2. добавьте на страницу HTML-блок;
3. заново скопируйте код из Mapfolio;
4. вставьте его в HTML-блок;
5. сохраните и опубликуйте страницу.

Проверьте следующие причины:

• скопированы не обе строки;
• код вставлен не в HTML-блок;
• страница не опубликована;
• в коде удалён или изменён символ;
• удалена строка <script>;
• конструктор сайта запрещает JavaScript в выбранном блоке;
• виджет выключен;
• используется код другого виджета.

Если код изменялся вручную, проще удалить его и получить новую точную копию в Mapfolio.

Если интерфейс виджета появился, но карта сообщает «Не удалось загрузить карту», код установки, скорее всего, уже запускается.

В этом случае нужно проверить:

• подключён ли к виджету API-ключ Яндекс Карт;
• правильно ли введён API-ключ;
• добавлен ли домен сайта в ограничения ключа;
• опубликован ли виджет;
• работает ли интернет-соединение.

Если код будет устанавливать другой человек, передайте ему:

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

Не нужно передавать пароль от Mapfolio или API-ключ Яндекс Карт.

• Открыт правильный виджет.
• Виджет сохранён.
• В блоке «6. Код для установки» показан готовый код.
• В коде находится настоящий уникальный идентификатор.
• Скопированы обе строки.
• Первая строка содержит data-mapfolio-widget.
• Вторая строка содержит mapfolio-widget.js.
• Код не изменялся вручную.
• Для вставки выбран HTML-блок.
• После установки страница опубликована.
• Виджет проверен на компьютере.
• Виджет проверен на телефоне.
• Если карта не загрузилась, проверены API-ключ и ограничения по домену.