Как устроен раздел «Виджеты»

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

Здесь можно:

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

Как открыть раздел «Виджеты»

  1. Войдите в личный кабинет Mapfolio.
  2. Найдите верхнее меню.
  3. Нажмите «Виджеты».
  4. Откроется страница со всеми созданными вами виджетами.

Новые виджеты располагаются в начале списка.

Раздел «Виджеты» в личном кабинете Mapfolio

Что отображается на главной странице раздела

На странице находятся:

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

Каждая карточка относится к отдельному виджету.

Если виджетов ещё нет

Если вы ещё не создали ни одного виджета, на странице появится сообщение:

«У вас пока нет виджетов. Создайте первый встроенный блок».

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

Раздел до создания первого виджета

Как устроена карточка виджета

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

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

Элемент карточки Что он означает
«Встроенный блок» Тип виджета
Значок вопроса Подсказка с описанием типа
Название под заголовком Внутреннее название виджета
Значок шестерёнки Переход к настройкам
«Отключён» Виджет временно не работает на сайтах
«Включен А/Б тест» Для виджета используется А/Б-тестирование
Приглушённый вид карточки Виджет отключён

Тип виджета

В верхней части карточки отображается тип виджета, например:

«Встроенный блок»

Рядом находится значок вопроса. Наведите на него указатель мыши или нажмите на него, чтобы увидеть краткое описание типа.

Для встроенного блока отображается подсказка:

«Виджет встраивается в выбранное место страницы».

Внутреннее название

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

Например:

  • «Карта магазинов»;
  • «Карта объектов на главной»;
  • «Виджет для страницы контактов»;
  • «Встроенный блок #1».

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

Основные элементы карточки виджета

Активные и отключённые виджеты

Активный виджет

Если виджет активен, на его карточке не показывается отдельная надпись о состоянии.

Активный виджет может загружаться на сайте, если:

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

Отключённый виджет

Если виджет отключён:

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

После повторного включения виджет снова начнёт работать с прежними настройками.

Как создать новый виджет

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

  1. Откройте раздел «Виджеты».
  2. Найдите карточку со знаком «+».
  3. Нажмите на неё.
  4. Откроется страница создания виджета.
  5. Выберите доступный способ установки.
  6. Укажите название.
  7. Перейдите к остальным настройкам.

Какие способы установки доступны

В начале создания находится раздел «1. Способ установки».

В нём могут отображаться следующие варианты:

  • «Встроенный блок» — доступен для выбора;
  • «Pop-up» — может отображаться с пометкой «В разработке».
Способ Как работает Доступность
Встроенный блок Карта располагается в выбранном месте страницы Доступен
Pop-up Карта открывается во всплывающем окне В разработке

Что находится внутри настроек виджета

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

Блок Для чего используется
1. Способ установки Выбор типа и внутреннего названия
2. API карты Выбор API-ключа Яндекс Карт
3. Параметры Настройка размеров и поведения виджета
4. Дизайн Настройка цветов, маркеров и элементов интерфейса
5. Предпросмотр Проверка внешнего вида виджета
6. Код для установки Получение кода для размещения на сайте
Редактор выбранного виджета

1. Способ установки

В первом блоке можно:

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

Поле называется:

«Название виджета (видно только в админ-панели виджетов)».

Название может содержать до 255 символов.

2. API карты

В этом блоке выбирается API-ключ, с которым будет загружаться Яндекс Карта.

Если ключ ещё не добавлен, в списке можно нажать «Добавить новое API» и перейти к настройкам ключа.

3. Параметры

Параметры определяют размеры и поведение встроенного блока на сайте.

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

4. Дизайн

В разделе дизайна настраивается внешний вид виджета.

Здесь можно работать с:

  • готовыми цветовыми схемами;
  • собственными цветами;
  • оформлением маркеров;
  • отображением отдельных элементов;
  • сохранёнными вариантами дизайна.

5. Предпросмотр

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

Перед публикацией проверьте:

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

6. Код для установки

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

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

Как открыть существующий виджет

  1. Откройте раздел «Виджеты».
  2. Найдите нужную карточку по типу и названию.
  3. Нажмите в любое место карточки.
  4. Откроется редактор.
  5. Измените необходимые настройки.
  6. Нажмите «Сохранить».

После сохранения изменения применятся к этому виджету.

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

Кнопки в нижней части редактора

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

  • «Сохранить» — сохраняет изменения;
  • «Отмена» — отменяет редактирование и возвращает назад.

Если попытаться выйти с несохранёнными изменениями, Mapfolio покажет окно:

«Выйти из виджета? Несохраненные изменения будут потеряны».

В нём доступны кнопки:

  • «Выйти» — покинуть страницу без сохранения;
  • «Остаться» — вернуться к редактированию.

Отключение и удаление виджета

В настройках существующего виджета доступны кнопки:

  • «Отключить» или «Включить»;
  • «Удалить».
Действие Что происходит Можно ли вернуть
Отключить Виджет перестаёт загружаться, но настройки сохраняются Да, кнопкой «Включить»
Включить Виджет снова становится доступен на сайтах Да
Удалить Виджет и его настройки удаляются Нет, потребуется создать новый

Как связаны виджеты и точки

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

Обычно порядок работы выглядит так:

  1. Вы создаёте и публикуете точки.
  2. Настраиваете основные поля и фильтры.
  3. Создаёте виджет.
  4. Выбираете для него API-ключ.
  5. Настраиваете параметры и дизайн.
  6. Проверяете результат.
  7. Устанавливаете код на сайт.

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

Коротко о разделе

Раздел «Виджеты» состоит из карточек ваших виджетов и кнопки добавления нового.

Запомните основные действия:

  • нажмите карточку, чтобы открыть настройки;
  • нажмите карточку с плюсом, чтобы создать виджет;
  • надпись «Отключён» означает, что виджет не работает на сайте;
  • внутреннее название видят только пользователи личного кабинета;
  • изменения нужно подтверждать кнопкой «Сохранить»;
  • для временной остановки используйте «Отключить», а не «Удалить».