Configurar um alternador de idioma no site Bubble.io pode facilitar a troca de idiomas para os usuários. Esse recurso é especialmente valioso para aplicativos com público global, permitindo que os usuários interajam com a plataforma em seu idioma preferido. website can make it easier for users to switch languages. This feature is particularly valuable for applications with a global audience, allowing users to interact with the platform in their preferred language. Bubble.io, uma plataforma popular de desenvolvimento sem código, oferece capacidades de localização integradas que permitem que os desenvolvedores criem aplicativos multilíngues sem conhecimento de codificação extenso.
Para implementar um alternador de idioma no Bubble.io, os desenvolvedores geralmente começam definindo os idiomas que desejam suportar nas configurações do aplicativo. Eles então criam um elemento suspenso ou botão com o qual os usuários podem interagir para alterar o idioma. Neste artigo, discutiremos a configuração de um alternador de idioma no Bubble.io com um dos sites de serviço de tradução automática.
Por que um seletor de idioma é importante no site Bubble.io?
Adicionar um seletor de idioma em um site não é sem motivo. Aqui estão os motivos pelos quais você precisa configurar um em um site Bubble.
- Facilita o acesso para usuários de outros países: Um seletor de idiomas permite que usuários internacionais visualizem o site em seu idioma nativo. Por exemplo, um usuário espanhol que visita uma loja online pode mudar para o espanhol, facilitando a compreensão dos detalhes do produto e a conclusão das compras. Estudos da CSA Research mostram que 76% dos compradores online preferem comprar produtos quando as informações estão disponíveis em seu idioma, destacando a importância desse recurso para o conforto e a acessibilidade do usuário.
- Otimizar o site nos resultados de pesquisa de outros países: Com um alternador de idioma, seu site Bubble.io pode ter uma classificação melhor em pesquisas em idiomas estrangeiros. Por exemplo, uma versão em francês do seu site tem mais probabilidade de aparecer nas pesquisas do Google em francês. Essa visibilidade aprimorada pode aumentar significativamente o tráfego internacional.
- Aumente a conversão de vendas: Oferecer conteúdo em vários idiomas pode impulsionar as vendas. Uma plataforma de cursos online que permite aos usuários alternar entre idiomas pode atrair um público mais amplo e aumentar as inscrições. Essa abordagem é eficaz porque os consumidores têm maior probabilidade de comprar em sites que fornecem informações em seu idioma nativo, impactando diretamente suas taxas de conversão.
- Melhora o envolvimento e a retenção dos usuários: Um seletor de idiomas pode manter os usuários no seu site por mais tempo. Por exemplo, usuários que interagem no idioma de sua preferência em um aplicativo de rede social tendem a permanecer engajados por mais tempo. Esse aumento do envolvimento é significativo, pois os usuários geralmente passam o dobro do tempo em sites no idioma nativo do que naqueles em um segundo idioma, o que leva a uma melhor retenção de usuários.
Como configurar um seletor de idioma no Bubble.io
Agora que entendemos a importância de alternar idiomas em sites multilíngues Bubble.io, vamos discutir como implementá-lo. Os serviços de tradução de sites geralmente oferecem esse recurso, que pode ser personalizado de acordo com as necessidades do usuário.
No entanto, nem todos os serviços de tradução oferecem seletores de idioma personalizáveis e fáceis de usar. Portanto, escolher um serviço de tradução automática compatível com diversos frameworks e que ofereça recursos flexíveis de troca de idioma é muito importante.
Um serviço de tradução automática que atende a esses critérios é Linguise. Linguise a tradução automática oferece uma funcionalidade de troca de idioma altamente personalizável e fácil de usar que se integra a CMS e construtores de sites populares como Bubble.io.
Linguise fornece integração perfeita com o Bubble, permitindo que os desenvolvedores incorporem facilmente a troca de idioma em seus aplicativos multilíngues. Ao aproveitar os recursos avançados e a interface amigável do Linguise, você pode simplificar a configuração e manutenção de seletores de idioma no seu site Bubble .
Aqui estão as etapas para instalar Linguise em um site Bubble.io e configurar o seletor de idioma.
Passo 1: Registre uma conta Linguise
Comece criando uma conta Linguise gratuita e adicionando o domínio do seu site. Você pode utilizar o teste gratuito de 30 dias antes de escolher um plano de assinatura.
Em seguida, você precisará registrar seu domínio para autorizar a tradução. Copie seu nome de domínio, incluindo “https://,” e selecione “outro” como a plataforma.
Em seguida, selecione seus idiomas de origem e destino.
Etapa 2: Adicionar DNS automaticamente usando Entri
Após registrar seu site no painel Linguise , você terá duas opções de instalação.
Para adicionar automaticamente o registro DNS, clique em “Conecte seu DNS automaticamente.” Este recurso, chamado Entri, simplifica o processo de instalação gerenciando os registros DNS para você. Alternativamente, você pode copiar manualmente os registros DNS para o seu provedor de domínio.
Clicar no botão solicita ao Entri que analise o URL do seu site registrado e examine seus registros DNS públicos, identificando o provedor e os registros DNS necessários.
Em seguida, clique em “Autorizar com [seu provedor de domínio]” (por exemplo, Cloudflare). Esta ação redireciona você para a página de login do seu provedor de domínio, onde você pode fazer login e prosseguir.
Após o login, o Entri adicionará automaticamente os registros DNS apropriados—um DNS por idioma e um DNS TXT para a chave de validação—ao seu domínio.
Após a autorização, a Entri notificará você de que todas as configurações de DNS foram configuradas com sucesso. O recurso de tradução deve estar disponível assim que todos os registros de DNS se propagarem no seu domínio, o que normalmente leva de 20 a 30 minutos.
Para instalação manual, você pode seguir os passos fornecidos abaixo.
Passo 3: Copiar registros DNS
Para instalação manual, você será redirecionado para uma tela exibindo os registros DNS necessários para configurar suas páginas multilíngues, como fr.domain.com ou es.domain.com.
Copie esses elementos para a configuração DNS do seu Bubble.io.
Em seguida, acesse seu gerenciador de domínios e navegue até a área de configuração de DNS. Siga as instruções para copiar:
- Um registro TXT para verificação de domínio
- Um ou vários registros CNAME para os idiomas
Aqui estão exemplos para cada tipo de registro (TXT e CNAME).
Depois de adicionar todos os seus registros, sua configuração deve ficar assim.
Passo 4: Verificar DNS
Depois de adicionar todos os seus registros ao DNS do seu domínio, clique no botão “Verificar configuração de DNS” para verificar a propagação do DNS.
A validação DNS geralmente leva cerca de 30 minutos a 1 hora. Uma vez concluído, você deve ver indicadores verdes ao lado da lista DNS no painel Linguise . Você está quase pronto para traduzir seu site Bubble.io; tudo o que resta é vincular ao seletor de idioma com bandeiras de países.
Etapa 5: Ativar e seletor de idioma
O alternador de idioma é um popup de bandeira que permite aos usuários selecionar seu idioma preferido. Para implementá-lo, copie o código fornecido no final do processo de registro do domínio ou nas configurações do domínio para o cabeçalho das páginas do seu site Bubble.io. O alternador de idioma de bandeira aparecerá automaticamente em seu site público.
Em seguida, vá para o painel do seu site Bubble . Clique em ‘Configurações’ no menu lateral esquerdo e selecione “SEO / metatags.”
Role para baixo até “Script/meta tags no cabeçalho” em “Configurações Avançadas.” Cole o script Linguise que você copiou anteriormente, depois clique em ‘Salvar’ e publique seu site.
Etapa 5: Configurar a exibição principal
Para começar a configurar o seletor de idiomas, navegue até a “Configurações” > “Exibição de bandeiras de idioma” seção no Linguise painel. Nesta página, você pode ajustar várias configurações
- Estilo do ícone de bandeira: Escolha entre três opções: exibição lado a lado, menu suspenso ou pop-up.
- Posição: Selecione onde o seletor de idioma aparecerá no seu site. Várias opções de posição estão disponíveis; certifique-se de que seja facilmente acessível aos visitantes.
Você pode combinar a exibição de bandeiras e nomes de idiomas, bandeiras e abreviações de idiomas, ou apenas nomes de idiomas. Usar tanto bandeiras quanto nomes de idiomas é recomendado para facilitar o reconhecimento pelo usuário.
Passo 6: Defina o design da bandeira
Após configurar a exibição principal, personalize ainda mais o design das bandeiras que serão exibidas.
- Nome do idioma de exibição: Você pode optar por mostrar o nome do idioma com base no nome do país ou no próprio nome do idioma. Por exemplo, você pode exibir “French” ou “Français.”
- Tipo de bandeira de inglês: Esta opção é útil para idiomas com múltiplas variações, como inglês americano ou britânico (e também se aplica a espanhol, taiwanês, alemão e português).
- Estilo da bandeira: Escolha o formato do ícone da bandeira, redondo ou retangular.
Passo 7: Personalize cor e tamanho
Depois de configurar o design da bandeira, você pode personalizar ainda mais a cor e o tamanho das bandeiras. Aqui estão as configurações que você pode ajustar:
- Raio da borda da bandeira: Personalize o raio em píxeis para o estilo de bandeira retangular.
- Cor do nome da língua: Escolha a cor do texto padrão para exibir o nome da língua.
- Cor da língua no popup: Defina a cor do texto do título da língua na área de popup ou dropdown.
- Tamanho da bandeira: Ajuste o tamanho dos ícones da bandeira.
- Cor do nome do idioma ao passar o mouse: Defina a cor do texto que aparece quando o usuário passa o mouse sobre o nome do idioma.
- Cor do hover da língua no popup: Defina a cor do texto que aparece quando o usuário passa o mouse sobre o título da língua na área do popup ou dropdown.
Passo 8: Definindo a sombra da caixa da bandeira
Por fim, você pode ajustar as configurações de sombra da caixa de bandeiras. A primeira opção permite aplicar um efeito de sombra a cada ícone de bandeira exibido no seu site. A opção seguinte controla o efeito de sombra quando os usuários passam o mouse sobre as bandeiras de idioma.
Depois de fazer todos os ajustes desejados, clique no botão Salvar para aplicar as alterações de personalização. Em seguida, visite seu site Bubble para verificar se a configuração foi aplicada com sucesso. É assim que o seletor de idioma aparecerá.
Após a configuração, você pode ver como o seletor de idioma funciona em seu site multilíngue Bubble .
Em seguida, você pode traduzir o site para outros idiomas, como espanhol.
Melhores práticas para otimizar o alternador de idioma no Bubble.io
Depois de configurar com êxito o seletor de idioma em um site multilíngue Bubble , é importante considerar dicas para otimizar o seletor de idioma tanto para o seu site quanto para os visitantes.
Utilize um logotipo de bandeira de idioma facilmente identificável
Ao implementar um alternador de idioma no seu site Bubble.io, usar bandeiras ou ícones de idioma facilmente reconhecíveis é crucial. Esses elementos visuais ajudam os usuários a identificar e selecionar rapidamente seu idioma preferido. Por exemplo, um ícone de globo é universalmente compreendido para representar opções de idioma. Alternativamente, você pode usar bandeiras de países, mas esteja ciente de que isso às vezes pode ser problemático, pois os idiomas nem sempre estão vinculados a um único país.
Exemplo: O site da Amazon usa um pequeno ícone de globo ao lado do idioma atualmente selecionado (por exemplo, “EN”) na barra de navegação superior. Essa abordagem simples, mas eficaz, permite que os usuários localizem rapidamente as opções de idioma, independentemente da configuração de idioma atual.
Incorpore nomes de idiomas ao lado das bandeiras
Embora as bandeiras possam ser úteis, não devem ser usadas sozinhas. Incluir o nome do idioma em seu alfabeto nativo ao lado da bandeira ou ícone proporciona clareza e evita possíveis confusões. Isso é particularmente importante para idiomas falados em vários países ou regiões.
Exemplo: O seletor de idiomas no site do Airbnb exibe o nome do idioma e a bandeira do país. Por exemplo, mostra “English (US)” com a bandeira dos EUA e “Français” com a bandeira da França. Essa combinação garante que os usuários possam identificar com precisão a opção de idioma de sua preferência.
Posicione o botão de alternância de idioma com cuidado
A posição do seu seletor de idiomas é fundamental para a acessibilidade do usuário. Locais comuns incluem o canto superior direito do cabeçalho, no rodapé ou dentro do menu de navegação principal. O segredo é torná-lo facilmente descobrível sem sobrecarregar a área de conteúdo principal.
Exemplo: No site tiffany.com, o seletor de idioma está no canto inferior direito da página, sempre visível e acessível. Essa posição consistente garante que os usuários possam encontrar e usar rapidamente as opções de idioma, independentemente de onde estejam no site.
Desenhe o seletor de idioma para ser responsivo
Certifique-se de que o seu seletor de idiomas funciona bem em todos os dispositivos, de computadores desktop a smartphones. Em ecrãs mais pequenos, poderá ter de adaptar o design – por exemplo, utilizando um menu suspenso em vez de uma lista horizontal de opções.
Exemplo: O seletor de idiomas do site da UNESCO se adapta perfeitamente a todos os dispositivos. No desktop, ele aparece como uma lista horizontal no cabeçalho. No mobile, ele se transforma em um menu suspenso compacto, garantindo usabilidade sem comprometer o layout mobile.
Garanta que o seletor de idiomas seja consistente em todas as páginas
Mantenha o mesmo design, funcionalidade e posição do seu seletor de idioma em todas as páginas do seu site Bubble.io. Essa consistência ajuda os usuários a navegar pelo seu site de forma mais eficiente, pois sabem exatamente onde encontrar as opções de idioma, independentemente da página atual.
Exemplo: O site mantém o seletor de idiomas de forma consistente no rodapé em todas as páginas, da página inicial às páginas de produtos e ao processo de checkout. Essa consistência garante que os usuários possam alternar idiomas facilmente a qualquer momento durante sua navegação ou experiência de compra.
Configure um seletor de idioma no site multilíngue Bubble usando Linguise!
Agora, você já entende como selecionar o idioma para o site multilíngue Bubble.io. A leitura do seletor de idioma pode fornecer vários benefícios e levar a uma otimização com base nos pontos mencionados anteriormente.
Otimizar o seletor de idioma de forma eficaz pode melhorar significativamente a experiência do usuário. Cadastre-se para uma Linguise conta, integre-a com o seu site Bubble.io, e personalize o seletor de idioma para melhorar a experiência do usuário.
