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. 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 a experiência 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 alternar 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, o que destaca 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 matrículas. Essa abordagem é eficaz porque os consumidores são mais propensos a comprar em sites que fornecem informações em seu idioma nativo, impactando diretamente suas taxas de conversão.
- Melhora o engajamento e a retenção de usuários: Um seletor de idiomas pode manter os usuários em seu site por mais tempo. Por exemplo, usuários que interagem em seu idioma preferido em um aplicativo de rede social tendem a permanecer engajados por mais tempo. Esse aumento no engajamento é significativo, pois os usuários normalmente passam o dobro do tempo em sites em seu idioma nativo do que em sites 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 diversas plataformas e que ofereça recursos flexíveis de troca de idioma é fundamental.
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 e adicionando o domínio do seu site. Você pode aproveitar o período de 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 o nome do seu domínio, incluindo “https://”, e selecione “outra” como plataforma.
Em seguida, selecione os idiomas de origem e de destino.
Etapa 2: Adicionar DNS automaticamente usando o Entri
Após registrar seu site no painel de controle Linguise , você terá duas opções de instalação.
Para adicionar registros DNS automaticamente, clique em “Conectar seu DNS automaticamente”. Esse recurso, chamado Entri, simplifica o processo de instalação gerenciando os registros DNS para você. Como alternativa, você pode copiar manualmente os registros DNS para o seu provedor de domínio.
Ao clicar no botão, o Entri analisa o URL do seu site registrado e examina 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). Essa ação o redirecionará para a página de login do seu provedor de domínio, onde você poderá fazer login e prosseguir.
Após o login, o Entri adicionará automaticamente os registros DNS apropriados ao seu domínio — um DNS por idioma e um DNS TXT para a chave de validação.
Após a autorização, a Entri irá notificá-lo(a) de que todas as configurações de DNS foram configuradas com sucesso. O recurso de tradução estará disponível assim que todas as entradas de DNS forem propagadas em seu domínio, o que normalmente leva de 20 a 30 minutos.
Para instalação manual, siga os passos indicados abaixo.
Passo 3: Copiar registros DNS
Para a instalação manual, você será redirecionado para uma tela que exibe 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 o gerenciador de domínio 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 deverá ficar assim.
Passo 4: Verificar DNS
Após 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 site Bubble. Clique ‘Configurações’ no menu lateral esquerdo e selecione “SEO / metatags.”
Role a página para baixo até “Script/meta tags no cabeçalho” em “Configurações avançadas”. Cole o Linguise que você copiou anteriormente, clique em “Salvar” e publique seu site.
Etapa 5: Configurar o visor principal
Para começar a configurar o seletor de idiomas, acesse a “Configurações” > “Exibição de indicadores de idioma” no Linguise . Nesta página, você pode ajustar diversas configurações.
- Estilo do ícone da bandeira: Escolha entre três opções: exibição lado a lado, menu suspenso ou janela pop-up.
- Posição: Selecione onde o seletor de idiomas aparecerá no seu site. Várias opções de posicionamento 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. Recomenda-se o uso de bandeiras e nomes de idiomas para facilitar o reconhecimento por parte do usuário.
Passo 6: Defina o design da bandeira
Após configurar a tela principal, personalize ainda mais o design das bandeiras que serão exibidas.
- Exibir o nome do idioma: Você pode optar por exibir o nome do idioma com base no nome do país ou no próprio nome do idioma. Por exemplo, você pode exibir “Francês” ou “Français”.
- Tipo de bandeira em inglês: Esta opção é útil para idiomas com múltiplas variações, como o inglês americano ou britânico (e também se aplica ao 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
Após configurar o design da bandeira, você pode personalizar ainda mais a cor e o tamanho. Aqui estão as configurações que você pode ajustar:
- Raio da borda da bandeira: Personalize o raio em pixels 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 texto ao passar o cursor sobre o nome do idioma: Defina a cor do texto que aparece quando o usuário passa o cursor 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 das bandeiras. A primeira opção permite aplicar um efeito de sombra a cada ícone de bandeira exibido em seu site. A próxima opção controla o efeito de sombra quando os usuários passam o mouse sobre as bandeiras dos idiomas.
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 o 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 selecionado (por exemplo, “EN”) na barra de navegação superior. Essa abordagem simples, porém eficaz, permite que os usuários localizem rapidamente as opções de idioma, independentemente da configuração de idioma atual.
Inclua os nomes dos idiomas junto com as bandeiras
Embora as bandeiras possam ser úteis, não devem ser usadas sozinhas. Incluir o nome do idioma em seu alfabeto nativo junto com a 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 “Inglês (EUA)” com a bandeira dos EUA e “Francês” 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 troca de idioma com cuidado
A localização do seletor de idiomas é crucial para a acessibilidade do usuário. Locais comuns incluem o canto superior direito do cabeçalho, o rodapé ou o menu de navegação principal. O importante é torná-lo facilmente visível sem sobrecarregar a área de conteúdo principal.
Exemplo: No site tiffany.com, o seletor de idiomas está localizado no canto inferior direito da página, sempre visível e acessível. Essa localização consistente garante que os usuários possam encontrar e usar as opções de idioma rapidamente, independentemente de onde estejam no site.
Desenhe o seletor de idioma para ser responsivo
Certifique-se de que seu seletor de idiomas funcione bem em todos os dispositivos, desde computadores desktop até smartphones. Em telas menores, talvez seja necessário adaptar o design — por exemplo, usando 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 diferentes dispositivos. No computador, ele aparece como uma lista horizontal no cabeçalho. Em dispositivos móveis, transforma-se em um menu suspenso compacto, garantindo a usabilidade sem comprometer o layout.
Certifique-se de que o seletor de idioma 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 consistente no rodapé de todas as páginas, desde a página inicial até as páginas de produtos e o processo de finalização da compra. Essa consistência garante que os usuários possam alternar facilmente entre os idiomas a qualquer momento durante a navegação ou a 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.
