Для кав'ярні, клініки, студії чи торгової точки сторінка за посиланням у профілі має передусім допомогти відвідувачам знайти вас. Додати карту на сторінку Digily Link можна трьома способами. Вибір залежить від вашого плану й від того, що саме потрібно: показати карту або дати кнопку для запуску навігації.
Варіант 1. Кнопка маршруту, що відкриває застосунок карт
Цей спосіб працює на всіх планах, зокрема Free, і саме він потрібен більшості відвідувачів. На телефоні зазвичай ніхто не масштабує карту пальцями. Люди натискають "Прокласти маршрут" і очікують, що навігація одразу запуститься.
- Відкрийте Google Maps, знайдіть свою компанію, натисніть "Поділитися" та скопіюйте посилання.
- На панелі керування створіть коротке посилання, указавши цю адресу як цільову, і ввімкніть функцію "автоматично відкривати застосунок на мобільному пристрої". Digily Link розпізнає посилання Google Maps і Waze, тому на телефоні зі встановленим застосунком коротке посилання відразу відкриє навігацію. У посібнику про глибинні посилання пояснено, чому це важливо.
- Додайте на сторінку блок посилання, вставте коротке посилання й назвіть кнопку "Прокласти маршрут".
Оскільки кнопка веде на коротке посилання, натискання враховуються у статистиці. Якщо ви переїдете, цільову адресу можна буде замінити.
Варіант 2. Вбудована карта через блок iframe
Блок iframe доступний на планах Starter і Pro та показує карту безпосередньо на сторінці.
- Знайдіть потрібне місце в Google Maps, відкрийте меню "Поділитися" й перейдіть на вкладку "Вбудувати карту".
- Скопіюйте HTML-код, який показує Google. Вам потрібна лише адреса всередині src="…", що починається з https://www.google.com/maps/embed. Якщо так буде простіше знайти адресу, вставте весь фрагмент у Парсер URL.
- Додайте на сторінку блок iframe, вставте цю адресу як URL і встановіть висоту близько 300 пікселів.
Одразу під картою розмістіть кнопку маршруту з варіанта 1. Карта покаже, де ви перебуваєте, а кнопка допоможе туди дістатися.
Варіант 3. Власний HTML для адаптивної карти
Блок власного HTML доступний на плані Pro й дає повний контроль, зокрема дає змогу зберігати пропорції карти на екрані будь-якого розміру. Вставте в блок наведений нижче код і замініть YOUR_EMBED_URL адресою з вкладки "Вбудувати карту".
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px"><iframe src="YOUR_EMBED_URL" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe></div>
Значення padding-bottom визначає форму блока. 56,25% дає прямокутник зі співвідношенням сторін 16:9, 75% робить карту ближчою до формату 4:3, а 100% створює квадрат. Атрибут loading="lazy" не дає карті сповільнювати сторінку, доки відвідувач до неї не прокрутить. Якщо ви вставляєте код з іншого джерела, спочатку впорядкуйте його за допомогою HTML мінімізатора, щоб випадковий перенос рядка не порушив роботу блока.
Який варіант вибрати
| Що вам потрібно | Що використати | План |
|---|---|---|
| Запустити навігацію одним натисканням | Кнопка маршруту з відкриттям застосунку | Free і вище |
| Показати карту на сторінці | Блок iframe | Starter і Pro |
| Налаштувати форму й оформлення карти | Блок власного HTML | Pro |
| Показати кілька адрес | Окремий заголовок і кнопка маршруту для кожної точки або власна карта Google My Maps, вбудована способом 2 чи 3 | Залежить від використаних блоків |
Поради для локального бізнесу
- У блоці абзацу над картою вкажіть поштовий індекс для тих, хто воліє самостійно ввести його у своєму застосунку.
- Додайте блок годин роботи, доступний на безкоштовному плані, щоб відвідувач розумів, чи варто вирушати до вас зараз.
- Залиште на сторінці лише одну карту. Дві вбудовані карти вдвічі збільшують час завантаження, майже не додаючи користі.
- Надрукуйте QR-код сторінки для вітрини та листівок. Приклад структури сторінки закладу наведено в матеріалі про посилання в біо для малого бізнесу.
- Перевірте кнопку маршруту у вбудованому браузері Instagram на iPhone і телефоні Android. Перевірка перенаправлення URL покаже, як коротке посилання працює на комп'ютері.
Тимчасові точки, ярмарки та події
Якщо торгова точка щовихідних змінює місце, щоразу створювати нову карту не потрібно. Нехай кнопка маршруту веде на коротке посилання, а в п'ятницю змінюйте його цільову адресу на місце роботи цими вихідними. Адреса сторінки, QR-код на банері й посилання в профілі залишаться незмінними. На планах Starter і Pro для короткого посилання також можна налаштувати розклад, щоб опівночі суботня адреса автоматично змінилася на недільну й нікому не довелося про це пам'ятати. Додайте блок абзацу з датами та поштовим індексом для тих, хто планує поїздку заздалегідь.
Apple Maps і Waze
Функція відкриття застосунку розпізнає адреси Google Maps і Waze. Для користувачів iPhone, які віддають перевагу Apple Maps, звичайне посилання на maps.apple.com із зазначеною адресою відкриє Apple Maps на iPhone, а на інших пристроях вебкарту. Власні посилання Apple працюють саме так без додаткових налаштувань. Дві кнопки, "Google Maps" і "Apple Maps", охоплюють майже всі телефони в Україні, а статистика натискань покаже, яким сервісом насправді користуються ваші відвідувачі.
Поширені запитання
Чи потрібен ключ Google Maps API?
Ні. Фрагмент із функції "Вбудувати карту" та посилання для поширення можна використовувати безкоштовно й без ключа. Ключ API потрібен лише розробникам, які створюють власний картографічний застосунок.
Як показати на карті кілька позначок?
Створіть власну карту в Google My Maps з усіма потрібними адресами, відкрийте до неї загальний доступ і використайте адресу для вбудовування в блоці iframe або власного HTML.
Чи сповільнює вбудована карта завантаження сторінки?
Трохи, тому наведений вище код використовує відкладене завантаження. Якщо завдання сторінки полягає в тому, щоб привести людей за потрібною адресою, кнопка маршруту важливіша за зображення карти.
Чи можна додати карту на безкоштовному плані?
Кнопку маршруту можна. Для блока iframe потрібен Starter, а для блока власного HTML потрібен Pro. На сторінці планів зазначено, що входить до кожного з них.
Що робити, якщо компанія переїде?
Змініть цільову адресу короткого посилання, на яке веде кнопка маршруту, і замініть адресу вбудованої карти. У друкованих матеріалах нічого змінювати не доведеться.
Остаточна перевірка
- Кнопка маршруту відкриває застосунок карт на телефоні та сторінку карти на комп'ютері.
- На вбудованій карті показано правильну позначку, а на телефоні карта займає доступну ширину сторінки.
- На сторінці вказані поштовий індекс і години роботи.
- На сторінці є лише одна карта.
- Ви перевірили сторінку у вбудованому браузері Instagram, а не лише у звичайному браузері.
