Configurar un selector de idiomas en el de Bubble facilita a los usuarios cambiar de idioma. Esta función es especialmente útil para aplicaciones con audiencia global, ya que permite a los usuarios interactuar con la plataforma en su idioma preferido. Bubble , una popular plataforma de desarrollo sin código, ofrece funciones de localización integradas que permiten a los desarrolladores crear aplicaciones multilingües sin necesidad de conocimientos avanzados de programación.
Para implementar un selector de idiomas en Bubble, los desarrolladores suelen empezar por definir los idiomas compatibles en la configuración de la aplicación. Después, crean un menú desplegable o un botón con el que los usuarios pueden interactuar para cambiar el idioma. En este artículo, explicaremos cómo configurar un selector de idiomas en Bubblecon uno de los sitios web de servicios de traducción automática.
¿Por qué es importante un selector de idiomas en el sitio web Bubble?
Añadir un selector de idiomas a un sitio web no es casualidad. Aquí te explicamos por qué necesitas configurarlo en un sitio web Bubble .
- Facilita la experiencia a usuarios de otros países: Un selector de idiomas permite a los usuarios internacionales ver el sitio web en su idioma nativo. Por ejemplo, un usuario español que visite una tienda en línea puede cambiar al español, lo que facilita la comprensión de los detalles del producto y la finalización de las compras. Estudios de CSA Research demuestran que el 76 % de los compradores en línea prefieren comprar productos cuando la información está disponible en su idioma, lo que destaca la importancia de esta función para la comodidad y la accesibilidad del usuario.
- Optimización del sitio web en los resultados de búsqueda de otros países: Con un selector de idiomas, su Bubble puede posicionarse mejor en búsquedas en otros idiomas. Por ejemplo, una versión en francés de su sitio tiene más probabilidades de aparecer en las búsquedas de Google en francés. Esta mejor visibilidad puede aumentar significativamente el tráfico internacional.
- Aumentar la conversión de ventas: Ofrecer contenido en varios idiomas puede impulsar las ventas. Una plataforma de cursos en línea que permite a los usuarios cambiar de idioma puede atraer a un público más amplio y aumentar las inscripciones. Este enfoque es eficaz porque los consumidores son más propensos a comprar en sitios web que ofrecen información en su idioma nativo, lo que impacta directamente en las tasas de conversión.
- Mejora la interacción y la retención de usuarios: Un selector de idiomas puede mantener a los usuarios en su sitio web durante más tiempo. Por ejemplo, los usuarios que interactúan en su idioma preferido en una red social tienden a permanecer más tiempo conectados. Este aumento de la interacción es significativo, ya que los usuarios suelen pasar el doble de tiempo en sitios web en su lengua materna que en los que hablan un segundo idioma, lo que se traduce en una mayor retención de usuarios.
Cómo configurar un selector de idiomas en Bubble
Ahora que comprendemos la importancia de cambiar de idioma en los sitios web multilingües Bubble, veamos cómo implementarlo. Los servicios de traducción de sitios web suelen ofrecer esta función, que se puede adaptar a las necesidades del usuario.
Sin embargo, no todos los servicios de traducción ofrecen selectores de idioma personalizables e intuitivos. Por lo tanto, es fundamental elegir un servicio de traducción automática compatible con diversos frameworks y que ofrezca funciones flexibles de cambio de idioma.
Un servicio de traducción automática que cumple con estos criterios es Linguise . Linguise función de traducción automática ofrece un cambio de idioma altamente personalizable y fácil de usar, que se integra con CMS y creadores web populares como Bubble .
Linguise se integra perfectamente con Bubble, lo que permite a los desarrolladores incorporar fácilmente el cambio de idioma en sus aplicaciones multilingües. Al aprovechar las funciones avanzadas y la interfaz intuitiva de Linguise, puede simplificar la configuración y el mantenimiento de los selectores de idioma en su sitio web Bubble .
Estos son los pasos para instalar Linguise en un Bubble .io y configurar el selector de idioma.
Paso 1: registrar una cuenta Linguise
Empieza creando una cuenta Linguise y añadiendo el dominio de tu sitio web. Puedes aprovechar la prueba gratuita de 30 días antes de elegir un plan de suscripción.
Luego, deberá registrar su dominio para autorizar la traducción. Copie el nombre de su dominio, incluyendo "https://", y seleccione "otra" como plataforma.
A continuación, seleccione el idioma de origen y el de destino.
Paso 2: Agregar DNS automáticamente usando Entri
Después de registrar su sitio web en el panel Linguise , tendrá dos opciones de instalación.
Para añadir automáticamente los registros DNS, haga clic en "Conectar su DNS automáticamente". Esta función, llamada Entri, simplifica el proceso de instalación al gestionar los registros DNS. También puede copiar manualmente los registros DNS a su proveedor de dominio.
Al hacer clic en el botón, Entri analizará la URL de su sitio web registrado y examinará sus registros DNS públicos, identificando el proveedor y los registros DNS necesarios.
A continuación, haz clic en "Autorizar con [tu proveedor de dominio]" (p. ej., Cloudflare). Esto te redirigirá a la página de inicio de sesión de tu proveedor de dominio, donde podrás iniciar sesión y continuar.
Una vez que haya iniciado sesión, Entri agregará automáticamente los registros DNS apropiados (un DNS por idioma y un DNS TXT para la clave de validación) a su dominio.
Tras la autorización, Entri le notificará que todos los ajustes de DNS se han configurado correctamente. La función de traducción debería estar disponible una vez que todas las entradas DNS se propaguen en su dominio, lo que suele tardar entre 20 y 30 minutos.
Para la instalación manual, puede seguir los pasos que se indican a continuación.
Paso 3: Copiar registros DNS
Para la instalación manual, será redirigido a una pantalla que muestra los registros DNS necesarios para configurar sus páginas multilingües, como fr.domain.com o es.domain.com.
Copie estos elementos en su configuración de DNS Bubble.io.
A continuación, acceda a su administrador de dominios y navegue hasta el área de configuración de DNS. Siga las instrucciones para copiar:
- Un registro TXT para la verificación del dominio
- Uno o varios registros CNAME para los idiomas.
A continuación se muestran ejemplos para cada tipo de registro (TXT y CNAME).
Una vez que haya agregado todos sus registros, su configuración debería verse así.
Paso 4: Verificar DNS
Después de agregar todos sus registros al DNS de su dominio, haga clic en el botón “Verificar configuración de DNS” para verificar la propagación del DNS.
La validación de DNS suele tardar entre 30 minutos y una hora. Una vez completada, deberías ver indicadores verdes junto a la lista de DNS en el panel Linguise . Ya casi estás listo para traducir tu sitio web Bubble; solo falta enlazar al selector de idiomas con las banderas de los países.
Paso 5: Habilitar el selector de idioma
El selector de idioma es una ventana emergente con una bandera que permite a los usuarios seleccionar su idioma preferido. Para implementarlo, copie el código proporcionado al final del proceso de registro del dominio o en la configuración del dominio en el encabezado de las páginas de su sitio Bubble. El selector de idioma aparecerá automáticamente en su sitio web público.
A continuación, ve al panel de tu Bubble . Haz clic en "Configuración" en el menú lateral izquierdo y selecciona "SEO / Metaetiquetas".
Desplázate hacia abajo hasta "Script/metaetiquetas en el encabezado" en "Configuración avanzada". Pega el Linguise que copiaste anteriormente, haz clic en "Guardar" y publica tu sitio.
Paso 5: Configurar la pantalla principal
Para empezar a configurar el selector de idiomas, ve a la "Configuración" > "Visualización de indicadores de idioma" en el Linguise . En esta página, puedes ajustar varias opciones.
- Estilo del ícono de bandera: elija entre tres opciones: visualización una al lado de la otra, menú desplegable o ventana emergente.
- Posición: Seleccione dónde aparecerá el selector de idiomas en su sitio. Hay varias opciones de ubicación disponibles; asegúrese de que sea fácilmente accesible para los visitantes.
Puede combinar la visualización de banderas y nombres de idiomas, banderas y abreviaturas de idiomas, o solo nombres de idiomas. Se recomienda usar tanto banderas como nombres de idiomas para facilitar el reconocimiento del usuario.
Paso 6: Establece el diseño de la bandera
Después de configurar la pantalla principal, personalice aún más el diseño de las banderas que se mostrarán.
- Nombre del idioma para mostrar: Puede elegir mostrar el nombre del idioma según el nombre del país o el nombre del idioma en sí. Por ejemplo, podría mostrar "Francés" o "Français".
- Tipo de bandera inglesa: esta opción es útil para idiomas con múltiples variaciones, como inglés estadounidense o británico (y también se aplica a español, taiwanés, alemán y portugués).
- Estilo de bandera: elige la forma del ícono de la bandera, ya sea redonda o rectangular.
Paso 7: Personaliza el color y el tamaño
Después de configurar el diseño de la bandera, puedes personalizar aún más el color y el tamaño. Puedes ajustar los siguientes ajustes:
- Radio del borde de la bandera: personaliza el radio en píxeles para el estilo de bandera rectangular.
- Color del nombre del idioma: elija el color de texto predeterminado para mostrar el nombre del idioma.
- Color del idioma de la ventana emergente: establece el color del texto del título del idioma en el área emergente o desplegable.
- Tamaño de la bandera: ajusta el tamaño de los iconos de la bandera.
- Color al pasar el cursor sobre el nombre del idioma: establece el color del texto que aparece cuando el usuario pasa el cursor sobre el nombre del idioma.
- Color al pasar el mouse sobre el idioma emergente: establece el color del texto que aparece cuando el usuario pasa el mouse sobre el título del idioma en el área emergente o desplegable.
Paso 8: Configuración de la sombra del cuadro de bandera
Finalmente, puedes ajustar la configuración de la sombra del cuadro de bandera. La primera opción te permite aplicar un efecto de sombra a cada icono de bandera que se muestra en tu sitio web. La siguiente opción controla el efecto de sombra cuando los usuarios pasan el ratón sobre las banderas de idioma.
Una vez realizados todos los ajustes necesarios, haga clic en el botón Guardar para aplicar los cambios de personalización. A continuación, visite el sitio web Bubble para verificar que la configuración se haya aplicado correctamente. Así es como se verá el selector de idiomas.
Después de la configuración, podrá ver cómo funciona el selector de idiomas en su sitio web multilingüe Bubble .
A continuación, puedes traducir el sitio web a otros idiomas como el español.
Mejores prácticas para optimizar el selector de idiomas en Bubble
Después de configurar exitosamente el selector de idioma en un sitio web multilingüe Bubble , es importante tener en cuenta algunos consejos para optimizar el selector de idioma tanto para su sitio como para sus visitantes.
Utilice un logotipo de bandera de idioma fácilmente identificable
Al implementar un selector de idiomas en su sitio web Bubble, es fundamental usar banderas o iconos de idioma fácilmente reconocibles. Estas indicaciones visuales ayudan a los usuarios a identificar y seleccionar rápidamente su idioma preferido. Por ejemplo, un icono de globo terráqueo se entiende universalmente como una opción de idioma. Como alternativa, puede usar banderas de países, pero tenga en cuenta que esto puede ser problemático, ya que los idiomas no siempre están vinculados a un solo país.
Ejemplo: El sitio web de Amazon utiliza un pequeño icono de globo terráqueo junto al idioma seleccionado (p. ej., "EN") en la barra de navegación superior. Este método, sencillo pero eficaz, permite a los usuarios encontrar rápidamente las opciones de idioma, independientemente de su configuración.
Incorporar nombres de idiomas junto con las banderas
Aunque las banderas pueden ser útiles, no deben usarse solas. Incluir el nombre del idioma en su escritura nativa junto a la bandera o el ícono proporciona claridad y evita posibles confusiones. Esto es especialmente importante para los idiomas que se hablan en varios países o regiones.
Ejemplo: El selector de idiomas del sitio web de Airbnb muestra el nombre del idioma y la bandera del país. Por ejemplo, muestra "English (US)" con la bandera de EE. UU. y "Français" con la bandera de Francia. Esta combinación garantiza que los usuarios puedan identificar con precisión su idioma preferido.
Coloque el botón de cambio de idioma con cuidado
La ubicación del selector de idioma es fundamental para la accesibilidad del usuario. Se suele ubicar en la esquina superior derecha del encabezado, en el pie de página o dentro del menú de navegación principal. La clave es que sea fácil de encontrar sin sobrecargar el área de contenido principal.
Ejemplo: En el sitio web tiffany.com, el selector de idioma se encuentra en la esquina inferior derecha de la página, siempre visible y accesible. Esta ubicación uniforme garantiza que los usuarios puedan encontrar y usar rápidamente las opciones de idioma desde cualquier lugar del sitio.
Diseñe el selector de idioma para que sea responsivo
Asegúrate de que tu selector de idiomas funcione correctamente en todos los dispositivos, desde ordenadores de escritorio hasta smartphones. En pantallas más pequeñas, podrías tener que adaptar el diseño; por ejemplo, usando un menú desplegable en lugar de una lista horizontal de opciones.
Ejemplo: El selector de idiomas del sitio web de la UNESCO se adapta perfectamente a diferentes dispositivos. En la versión de escritorio, aparece como una lista horizontal en el encabezado. En dispositivos móviles, se transforma en un menú desplegable compacto, lo que garantiza la usabilidad sin comprometer el diseño móvil.
Asegúrese de que el selector de idiomas sea coherente en todas las páginas
Mantén el mismo diseño, funcionalidad y ubicación del selector de idiomas en todas las páginas de tu sitio web Bubble. Esta consistencia ayuda a los usuarios a navegar por tu sitio de forma más eficiente, ya que saben exactamente dónde encontrar las opciones de idioma, independientemente de la página en la que se encuentren.
Ejemplo: El sitio web mantiene su selector de idiomas en el pie de página de forma consistente en todas las páginas, desde la página de inicio hasta las páginas de productos y el proceso de pago. Esta consistencia garantiza que los usuarios puedan cambiar de idioma fácilmente en cualquier momento durante su navegación o compra.
¡Configure un selector de idiomas en el sitio web multilingüe Bubble usando Linguise!
Ahora ya sabes cómo seleccionar el idioma para el sitio web multilingüe Bubble. Leer el selector de idioma puede ofrecerte varias ventajas y optimizarlo aún más según los puntos mencionados.
Optimizar eficazmente el selector de idiomas puede mejorar significativamente la experiencia del usuario. Crea una cuenta Linguise intégrala con tu Bubble y personaliza el selector de idiomas para mejorar la experiencia del usuario.
