Настройка переключателя языков на Bubble .io может упростить пользователям переключение языков. Эта функция особенно ценна для приложений с глобальной аудиторией, позволяя пользователям взаимодействовать с платформой на предпочитаемом ими языке. Bubble .io, популярная платформа для разработки без написания кода, предлагает встроенные возможности локализации, позволяющие разработчикам создавать многоязычные приложения без глубоких знаний в области программирования.
Чтобы реализовать переключатель языков в Bubble.io, разработчики обычно сначала определяют поддерживаемые языки в настройках приложения. Затем они создают раскрывающийся список или кнопку, с помощью которой пользователи могут переключать язык. В этой статье мы рассмотрим настройку переключателя языков в Bubble.io с помощью одного из сайтов сервисов автоматического перевода.
Почему переключатель языка так важен на сайте Bubble.io?
Добавление переключателя языка на сайт не случайно. Вот почему его стоит установить на сайте Bubble .
- Облегчает использование для пользователей из других стран: переключатель языка позволяет иностранным пользователям просматривать веб-сайт на своем родном языке. Например, испаноязычный пользователь, посещающий интернет-магазин, может переключиться на испанский язык, что упростит понимание информации о товарах и завершение покупки. Исследования CSA Research показывают, что 76% онлайн-покупателей предпочитают покупать товары, когда информация доступна на их языке, что подчеркивает важность этой функции для удобства и доступности для пользователей.
- Оптимизация сайта в результатах поиска других стран: благодаря переключателю языков ваш Bubble может занять более высокие позиции в результатах поиска на иностранных языках. Например, французская версия вашего сайта с большей вероятностью будет отображаться во французском поиске Google. Это улучшение видимости может значительно увеличить международный трафик.
- Повышение конверсии продаж: Предложение контента на нескольких языках может увеличить продажи. Онлайн-платформа для курсов, позволяющая пользователям переключать языки, может привлечь более широкую аудиторию и увеличить количество записавшихся. Этот подход эффективен, потому что потребители с большей вероятностью совершат покупку на сайтах, предоставляющих информацию на их родном языке, что напрямую влияет на коэффициент конверсии.
- Улучшает вовлеченность и удержание пользователей: функция переключения языка может удерживать пользователей на вашем сайте дольше. Например, пользователи, взаимодействующие на предпочитаемом ими языке в приложении для социальных сетей, как правило, дольше остаются вовлеченными. Это повышение вовлеченности имеет важное значение, поскольку пользователи обычно проводят вдвое больше времени на сайтах на своем родном языке, чем на сайтах на втором языке, что приводит к лучшему удержанию пользователей.
Как настроить переключатель языка в Bubble.io
Теперь, когда мы понимаем важность переключения языков на многоязычных сайтах Bubble.io, давайте обсудим, как это реализовать. Сервисы перевода веб-сайтов обычно предлагают эту функцию, которую можно настроить под нужды пользователя.
Однако не все сервисы перевода предлагают настраиваемые и удобные переключатели языков. Поэтому выбор сервиса автоматического перевода, совместимого с различными платформами и предоставляющего гибкие функции переключения языков, очень важен.
Linguise один из сервисов автоматического перевода, отвечающий этим критериям . Linguise предлагает легко настраиваемую и простую в использовании функцию переключения языков, которая интегрируется с популярными CMS и конструкторами сайтов, такими как Bubble .
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 минут до часа. После завершения вы увидите зелёные индикаторы рядом со списком 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 и настройте выбор языка для улучшения пользовательского опыта.
