Налаштування перемикача мов на Bubble .io може спростити користувачам перемикання мов. Ця функція особливо цінна для додатків з глобальною аудиторією, дозволяючи користувачам взаємодіяти з платформою на бажаній мові. Bubble .io, популярна платформа для розробки без коду, пропонує вбудовані можливості локалізації, які дозволяють розробникам створювати багатомовні додатки без значних знань програмування.
Щоб реалізувати перемикач мов у Bubble.io, розробники зазвичай починають з визначення мов, які вони хочуть підтримувати, у налаштуваннях програми. Потім вони створюють випадаючий список або кнопку, з якою користувачі можуть взаємодіяти, щоб змінити мову. У цій статті ми обговоримо налаштування перемикача мов у Bubble.io за допомогою одного з веб-сайтів сервісів автоматичного перекладу.
Чому перемикач мов важливий на вебсайті Bubble.io?
Додавання перемикача мов на вебсайт не безпідставне. Ось чому вам потрібно встановити його на вебсайті Bubble .
- Полегшує роботу для користувачів з інших країн: перемикач мов дозволяє іноземним користувачам переглядати веб-сайт своєю рідною мовою. Наприклад, іспанський користувач, який відвідує інтернет-магазин, може перейти на іспанську мову, що полегшить розуміння деталей продукту та завершення покупок. Дослідження CSA Research показують, що 76% онлайн-покупців вважають за краще купувати продукти, коли інформація доступна їхньою мовою, що підкреслює важливість цієї функції для зручності та доступності користувача.
- Оптимізація веб-сайту в результатах пошуку інших країн: Завдяки перемикачу мов ваш Bubble .io може покращити свої позиції в результатах пошуку іноземними мовами. Наприклад, французька версія вашого сайту з більшою ймовірністю з’явиться у французькому пошуку Google. Ця покращена видимість може значно збільшити міжнародний трафік.
- Збільшення конверсії продажів: пропонування вмісту кількома мовами може збільшити продажі. Платформа онлайн-курсів, що дозволяє користувачам перемикати мови, може залучити ширшу аудиторію та збільшити кількість записаних. Цей підхід є ефективним, оскільки споживачі з більшою ймовірністю купуватимуть на веб-сайтах, які надають інформацію їх рідною мовою, що безпосередньо впливає на ваші коефіцієнти конверсії.
- Покращує залучення та утримання користувачів: перемикач мов може довше утримувати користувачів на вашому сайті. Наприклад, користувачі, які спілкуються улюбленою мовою в програмі соціальної мережі, зазвичай залишаються залученими довше. Це збільшення залучення є значним, оскільки користувачі зазвичай проводять вдвічі більше часу на сайтах рідною мовою, ніж на сайтах другою мовою, що сприяє кращому утриманню користувачів.
Як налаштувати перемикач мов на Bubble.io
Тепер, коли ми розуміємо важливість перемикання мов на багатомовних веб-сайтах Bubble.io, давайте обговоримо, як це реалізувати. Сервіси перекладу веб-сайтів зазвичай пропонують цю функцію, яку можна налаштувати відповідно до потреб користувача.
Однак не всі служби перекладу пропонують настроювані та зручні перемикачі мов. Тому дуже важливо вибрати службу автоматичного перекладу, сумісну з різними фреймворками та надавати гнучкі функції перемикання мов.
Одним із сервісів автоматичного перекладу, який відповідає цим критеріям, є Linguise . Linguise пропонує дуже настроювану та просту у використанні функцію перемикання мов, яка інтегрується з популярними CMS та конструкторами веб-сайтів, такими як Bubble .io.
Linguise забезпечує безперебійну інтеграцію з Bubble, дозволяючи розробникам легко впроваджувати перемикання мов у свої багатомовні програми. Використовуючи розширені функції та зручний інтерфейс Linguise, ви можете спростити налаштування та підтримку перемикачів мов на вашому веб-сайті Bubble .
Ось кроки для встановлення Linguise на вебсайт Bubble та налаштування перемикача мов.
Крок 1. Зареєструйте обліковий запис Linguise
Почніть із створення безкоштовного облікового запису Linguise та додавання домену свого веб-сайту. Ви можете скористатися 30-денною безкоштовною пробною версією, перш ніж вибрати план підписки.
Потім вам потрібно буде зареєструвати свій домен, щоб авторизувати переклад. Скопіюйте своє доменне ім’я, включно з “https://”, і виберіть “інше” як платформу.
Далі виберіть вихідну та цільову мови.
Крок 2. Автоматично додайте DNS за допомогою Entri
Після реєстрації веб-сайту на інформаційній панелі Linguise у вас буде два варіанти встановлення.
Для автоматичного додавання запису DNS натисніть «Підключити DNS автоматично». Ця функція під назвою Entri спрощує процес встановлення, керуючи записами DNS замість вас. Крім того, ви можете вручну скопіювати записи DNS до свого постачальника домену.
Натискання кнопки спонукає Entri проаналізувати URL-адресу вашого зареєстрованого веб-сайту та перевірити ваші публічні записи DNS, визначивши необхідного постачальника та записи DNS.
Далі клацніть «Авторизувати в [ваш постачальник домену]» (наприклад, Cloudflare). Ця дія переспрямовує вас на сторінку входу вашого постачальника домену, де ви можете ввійти та продовжити.
Після входу Entri автоматично додасть відповідні записи DNS — один DNS для кожної мови та один TXT DNS для ключа перевірки — до вашого домену.
Після авторизації Entri повідомить, що всі налаштування DNS успішно налаштовані. Функцію перекладу можна буде використовувати, коли всі записи DNS поширяться у вашому домені, зазвичай це займає від 20 до 30 хвилин.
Для встановлення вручну виконайте наведені нижче дії.
Крок 3. Скопіюйте записи DNS
У разі інсталяції вручну ви будете перенаправлені на екран із записами DNS, необхідними для налаштування ваших багатомовних сторінок, наприклад fr.domain.com або es.domain.com.
Скопіюйте ці елементи до конфігурації DNS Bubble.io.
Потім увійдіть у свій менеджер домену та перейдіть до області налаштування DNS. Для копіювання дотримуйтесь інструкцій:
- Один запис TXT для підтвердження домену
- Один або кілька записів CNAME для мов
Ось приклади для кожного типу запису (TXT і CNAME).
Після додавання всіх записів ваша конфігурація має виглядати так.
Крок 4. Перевірте DNS
Після додавання всіх записів до DNS вашого домену натисніть кнопку «Перевірити конфігурацію DNS», щоб перевірити поширення DNS.
Перевірка DNS зазвичай займає від 30 хвилин до 1 години. Після завершення ви повинні побачити зелені індикатори поруч зі списком DNS на панелі інструментів Linguise . Ви майже готові перекласти свій веб-сайт Bubble.io; залишилося лише додати посилання на перемикач мов із прапорцями країн.
Крок 5. Увімкніть і перемикайте мову
Перемикач мов – це спливаюче вікно з прапорцями, яке дозволяє користувачам вибирати потрібну мову. Щоб його реалізувати, скопіюйте код, наданий в кінці процесу реєстрації домену або в налаштуваннях домену, до заголовка сторінок вашого сайту Bubble.io. Після цього перемикач мов з прапорцями автоматично з’явиться на вашому загальнодоступному вебсайті.
Далі перейдіть до панелі вашого Bubble . Натисніть «Налаштування» в меню ліворуч і виберіть «SEO / метатеги».
Прокрутіть униз до пункту «Сценарій/метатеги в заголовку» в розділі «Додаткові налаштування». Вставте Linguise який ви скопіювали раніше, потім натисніть «Зберегти» та опублікуйте свій сайт.
Крок 5: Налаштуйте головний дисплей
Щоб почати налаштування перемикача мов, перейдіть до «Налаштування» > «Відображення прапорців мови» на Linguise . На цій сторінці ви можете налаштувати кілька параметрів
- Стиль піктограми прапорця: виберіть із трьох варіантів: паралельне відображення, спадне меню або спливаюче вікно.
- Позиція: виберіть, де на вашому сайті з’явиться перемикач мов. Доступні різні варіанти позиції; забезпечити легкий доступ для відвідувачів.
Ви можете комбінувати відображення прапорів і назв мов, прапорів і скорочень мов або просто назв мов. Для легшого розпізнавання користувача рекомендується використовувати і прапори, і назви мов.
Крок 6: Встановіть дизайн прапора
Після налаштування головного дисплея додатково налаштуйте дизайн прапорів, які відображатимуться.
- Назва мови відображення: Ви можете вибрати відображення назви мови на основі назви країни або самої назви мови. Наприклад, ви можете відобразити «French» або «Français».
- Тип англійського прапора: цей параметр корисний для мов із кількома варіаціями, наприклад американської чи британської англійської (а також стосується іспанської, тайванської, німецької та португальської).
- Стиль прапора: виберіть форму піктограми прапора, круглу або прямокутну.
Крок 7: Налаштуйте колір і розмір
Після налаштування дизайну прапора ви можете додатково налаштувати колір і розмір прапорів. Ось параметри, які ви можете змінити:
- Радіус межі прапора: налаштуйте радіус у пікселях для стилю прямокутного прапора.
- Колір назви мови: виберіть колір тексту за умовчанням для відображення назви мови.
- Колір мови спливаючого вікна: установіть колір тексту назви мови у спливаючому вікні чи спадному меню.
- Розмір прапора: налаштуйте розмір значків прапора.
- Колір наведення курсора на назву мови: установіть колір тексту, який з’являється, коли користувач наводить курсор на назву мови.
- Колір мови спливаючого вікна при наведенні: установіть колір тексту, який з’являється, коли користувач наводить курсор на назву мови у спливаючому вікні чи спадному меню.
Крок 8: Встановлення тіні прапорця
Нарешті, ви можете налаштувати параметри тіні прапорця. Перший варіант дозволяє застосувати ефект тіні до кожної піктограми прапорця, що відображається на вашому веб-сайті. Наступний параметр керує ефектом тіні, коли користувачі наводять курсор миші на прапорці мови.
Після внесення всіх потрібних налаштувань натисніть кнопку «Зберегти», щоб застосувати зміни налаштування. Потім відвідайте веб-сайт Bubble , щоб перевірити, чи було успішно застосовано конфігурацію. Ось так виглядатиме перемикач мов.
Після налаштування ви можете побачити, як працює перемикач мов на вашому багатомовному веб-сайті Bubble .
Потім ви можете перекласти веб-сайт іншими мовами, наприклад іспанською.
Найкращі практики для оптимізації перемикача мов на Bubble.io
Після успішного налаштування перемикача мов на багатомовному веб-сайті Bubble важливо врахувати поради щодо оптимізації перемикача мов як для вашого сайту, так і для відвідувачів.
Використовуйте легко впізнаваний логотип з прапором мови
Під час впровадження перемикача мов на вашому веб-сайті Bubble.io використання легко впізнаваних мовних прапорців або значків є надзвичайно важливим. Ці візуальні підказки допомагають користувачам швидко ідентифікувати та вибрати бажану мову. Наприклад, значок глобуса загальноприймається як символ мовних опцій. Крім того, ви можете використовувати прапорці країн, але майте на увазі, що це іноді може бути проблематичним, оскільки мови не завжди пов’язані з однією країною.
Приклад: на веб-сайті Amazon на верхній панелі навігації поряд із поточною вибраною мовою (наприклад, «EN») використовується маленький значок із зображенням глобуса. Цей простий, але ефективний підхід дозволяє користувачам швидко знаходити параметри мови незалежно від поточних налаштувань мови.
Додайте назви мов поруч із прапорцями
Хоча прапори можуть бути корисними, їх не слід використовувати окремо. Включення назви мови рідною писемністю поряд із прапорцем або піктограмою забезпечує ясність і запобігає можливій плутанині. Це особливо важливо для мов, якими розмовляють у кількох країнах або регіонах.
Приклад: перемикач мов на веб-сайті Airbnb відображає назву мови та прапор країни. Наприклад, він показує «English (US)» із прапором США та «Français» із прапором Франції. Ця комбінація гарантує, що користувачі можуть точно визначити бажану мову.
Продумано розмістіть кнопку перемикання мов
Розташування перемикача мов має вирішальне значення для доступності користувача. Типовими місцями є верхній правий кут заголовка, нижній колонтитул або головне навігаційне меню. Головне, щоб його було легко знайти, не захаращуючи основну область вмісту.
Приклад: на веб-сайті tiffany.com перемикач мов знаходиться в нижньому правому куті сторінки, завжди видимий і доступний. Таке узгоджене розміщення гарантує, що користувачі можуть швидко знаходити та використовувати мовні параметри незалежно від того, де вони знаходяться на сайті.
Розробіть перемикач мов таким, щоб він був чуйним
Переконайтеся, що ваш перемикач мов добре працює на всіх пристроях, від настільних комп’ютерів до смартфонів. На менших екранах вам може знадобитися адаптувати дизайн – наприклад, використовувати спадне меню замість горизонтального списку параметрів.
Приклад: перемикач мов на веб-сайті ЮНЕСКО прекрасно адаптується до різних пристроїв. На робочому столі він відображається як горизонтальний список у заголовку. На мобільних пристроях воно перетворюється на компактне спадне меню, забезпечуючи зручність використання без шкоди для мобільного макета.
Переконайтеся, що перемикач мов узгоджений на сторінках
Зберігайте однаковий дизайн, функціональність та розташування перемикача мов на всіх сторінках вашого веб-сайту Bubble.io. Така узгодженість допомагає користувачам ефективніше орієнтуватися на вашому сайті, оскільки вони точно знають, де знайти мовні опції незалежно від поточної сторінки.
Приклад: веб-сайт постійно підтримує перемикач мов у нижньому колонтитулі на всіх сторінках, від домашньої сторінки до сторінок продуктів і процесу оформлення замовлення. Ця узгодженість гарантує, що користувачі можуть легко перемикати мови в будь-який час під час перегляду веб-сторінок або здійснення покупок.
Налаштуйте перемикач мов на багатомовному веб-сайті Bubble за допомогою Linguise!
Тепер ви вже розумієте, як вибрати мову для багатомовного веб-сайту Bubble.io. Ознайомлення з селектором мов може надати різні переваги та додатково призвести до оптимізації на основі вищезазначених пунктів.
Ефективна оптимізація селектора мов може значно покращити взаємодію з користувачем. Зареєструйте обліковий Linguise , інтегруйте його зі своїм Bubble .io та налаштуйте селектор мов для покращення взаємодії з користувачем.
