Configurar um seletor de idiomas no site Bubble.io pode facilitar a troca de idioma pelos usuários. Esse recurso é especialmente valioso para aplicações com público global, permitindo que os usuários interajam com a plataforma no idioma de sua preferência. Bubble.io, uma plataforma popular de desenvolvimento no-code, oferece recursos de localização integrados que permitem aos desenvolvedores criar aplicações multilíngues sem conhecimento extensivo de programação.
Para implementar um seletor de idiomas no Bubble.io, os desenvolvedores normalmente começam por definir os idiomas que pretendem suportar nas configurações da aplicação. Em seguida, criam um elemento de lista suspensa ou botão com o qual os utilizadores possam interagir para alterar o idioma. Neste artigo, vamos discutir a configuração de um seletor de idiomas no Bubble.io com um dos sites de serviços de tradução automática.
Por que um seletor de idiomas é importante no site Bubble.io?
Adicionar um seletor de idiomas a um site não é sem razão. Eis por que 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 seletor de idiomas, seu site Bubble.io pode ter um melhor posicionamento em pesquisas em idiomas estrangeiros. Por exemplo, uma versão em francês do seu site tem mais chances 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 envolvimento e a retenção dos usuários: Um seletor de idioma 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 no engajamento é 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 idiomas no Bubble.io
Agora que entendemos a importância de alternar idiomas em sites multilíngues no Bubble.io, vamos discutir como implementá-la. Os serviços de tradução de sites geralmente oferecem esse recurso, que pode ser adaptado às necessidades do usuário.
No entanto, nem todos os serviços de tradução oferecem seletores de idiomas 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 é o Linguise. A tradução automática do Linguise oferece um recurso de troca de idioma altamente personalizável e fácil de usar que se integra a CMS populares e construtores de sites como o Bubble.io.
Linguise oferece integração perfeita com o Bubble, permitindo que os desenvolvedores incorporem facilmente a troca de idiomas 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 a manutenção dos seletores de idioma em seu site Bubble .
Aqui estão os passos para instalar Linguise em um site Bubble.io e configurar o seletor de idiomas.
Passo 1: Registrar uma conta Linguise
Comece por criar uma conta Linguise gratuita e adicionar o domínio do seu site. Pode aproveitar o período de teste gratuito de 30 dias antes de escolher um plano de subscrição.
Em seguida, você precisará registrar seu domínio para autorizar a tradução. Copie o nome do seu domínio, incluindo “https://”, e selecione “outro” como plataforma.
Em seguida, selecione os idiomas de origem e de destino.
Passo 2: Adicionar DNS automaticamente usando Entri
Depois de registrar o seu site no painel do 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.
Clicar no botão solicita ao Entri que analise o URL do seu site registado e examine os seus registos DNS públicos, identificando o provedor e os registos DNS necessários.
Em seguida, clique em “Autorizar com [o seu provedor de domínio]” (por exemplo, Cloudflare). Esta ação redireciona-o para a página de início de sessão do seu provedor de domínio, onde pode iniciar sessão e prosseguir.
Após fazer 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 todas as entradas de DNS se propagarem no seu domínio, o que normalmente leva de 20 a 30 minutos.
Para instalação manual, você pode seguir as etapas fornecidas abaixo.
Etapa 3: Copiar registros DNS
Para 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 estes elementos para a sua configuração de DNS do Bubble.io.
Em seguida, aceda ao seu gestor de domínios e navegue até à área de configuração de DNS. Siga as instruções para copiar:
- Um registo TXT para verificação de domínios
- Um ou mais registos 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.
Etapa 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 de DNS geralmente leva cerca de 30 minutos a 1 hora. Após a conclusão, você deverá ver indicadores verdes ao lado da lista de DNS no painel do Linguise . Você está quase pronto para traduzir seu site Bubble.io; tudo o que resta é vincular ao seletor de idiomas com bandeiras de países.
Passo 5: Ativar o seletor de idiomas
O seletor de idiomas é um pop-up de bandeiras que permite aos usuários selecionar seu idioma preferido. Para implementá-lo, copie o código fornecido ao final do processo de registro de domínio ou nas configurações de domínio para o cabeçalho das páginas do seu site Bubble.io. O seletor de idiomas com bandeiras aparecerá automaticamente no seu site público.
Em seguida, acesse 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 Linguise script que você copiou anteriormente, depois clique em ‘Salvar’ e publique seu site.
Passo 5: Configurar a exibição principal
Para começar a configurar o seletor de idiomas, navegue até a “Configurações” > “Exibição das bandeiras de idioma” no painel do Linguise . Nesta página, você pode ajustar várias configurações
- Estilo do ícone da bandeira: Escolha entre três opções: exibição lado a lado, menu suspenso ou 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 usar tanto bandeiras quanto nomes de idiomas para facilitar o reconhecimento pelo usuário.
Etapa 6: Defina o design da bandeira
Depois de configurar a exibição principal, personalize ainda mais o design das bandeiras que serão exibidas.
- Exibir nome do idioma: 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 em 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 a forma do ícone da bandeira, redonda ou retangular.
Etapa 7: Personalize a cor e o 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 do idioma: Escolha a cor padrão do texto para exibir o nome do idioma.
- Cor do idioma no popup: Defina a cor do texto do título do idioma na área de popup ou dropdown.
- Tamanho da bandeira: Ajuste o tamanho dos ícones das bandeiras.
- 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 idioma ao passar o mouse no popup: Defina a cor do texto que aparece quando o usuário passa o mouse sobre o título do idioma na área do popup ou do menu suspenso.
Etapa 8: Definindo a sombra da caixa da bandeira
Por fim, você pode ajustar as configurações de sombra da caixa da bandeira. 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 idiomas aparecerá.
Após a configuração, pode ver como o seletor de idioma funciona no seu website multilingue Bubble .
Em seguida, você pode traduzir o site para outros idiomas, como o espanhol.
Melhores práticas para otimizar o seletor de idiomas no Bubble.io
Depois de configurar com sucesso o seletor de idiomas em um site multilíngue Bubble , é importante considerar dicas para otimizar o seletor de idiomas tanto para o seu site quanto para os visitantes.
Utilize um logotipo de bandeira de idioma facilmente identificável
Ao implementar um seletor de idiomas no seu site Bubble.io, é crucial usar bandeiras ou ícones de idiomas facilmente reconhecíveis. Esses sinais visuais ajudam os usuários a identificar e selecionar rapidamente seu idioma preferido. Por exemplo, um ícone de globo é universalmente entendido como representando opções de idioma. Como alternativa, 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.
Incorpore os nomes dos idiomas ao lado das bandeiras
Embora as bandeiras possam ser úteis, não devem ser usadas sozinhas. Incluir o nome do idioma no seu alfabeto nativo ao lado da bandeira ou ícone proporciona clareza e evita possíveis confusões. Isto é particularmente importante para idiomas falados em vários países ou regiões.
Exemplo: O seletor de idiomas no site da 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 francesa. 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 do seletor de idiomas com cuidado
A posição do seu seletor de idioma é fundamental para a acessibilidade do usuário. Os locais mais comuns incluem o canto superior direito do cabeçalho, no rodapé ou dentro do menu de navegação principal. O segredo é torná-lo facilmente localizável sem sobrecarregar a área de conteúdo principal.
Exemplo: No site tiffany.com, o seletor de idiomas está no canto inferior direito da página, sempre visível e acessível. Esse posicionamento consistente garante que os usuários possam encontrar e usar rapidamente as opções de idioma, independentemente de onde estejam no site.
Projete o seletor de idiomas para ser responsivo
Certifique-se de que o seu seletor de idioma funciona bem em todos os dispositivos, desde computadores de secretária a smartphones. Em ecrãs mais pequenos, poderá ter de adaptar o design – por exemplo, utilizando um menu pendente em vez de uma lista horizontal de opções.
Exemplo: O seletor de idiomas do site da UNESCO adapta-se perfeitamente a todos os dispositivos. No desktop, aparece como uma lista horizontal no cabeçalho. No mobile, transforma-se num menu suspenso compacto, garantindo usabilidade sem comprometer o layout móvel.
Garanta que o seletor de idioma seja consistente em todas as páginas
Mantenha o mesmo design, funcionalidade e posição do seu seletor de idiomas em todas as páginas do seu site Bubble.io. Essa consistência ajuda os usuários a navegar pelo seu site com mais eficiência, pois eles sabem exatamente onde encontrar as opções de idioma, independentemente da página em que estejam.
Exemplo: O site mantém seu seletor de idiomas de forma consistente no rodapé em todas as páginas, desde a página inicial até as páginas de produtos e o 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 idiomas no site multilíngue Bubble usando Linguise!
Agora, você já entende como selecionar o idioma para o site multilíngue do Bubble.io. A leitura do seletor de idiomas pode proporcionar diversos benefícios e ainda levar à otimização com base nos pontos mencionados anteriormente.
Otimizar o seletor de idiomas de forma eficaz pode melhorar significativamente a experiência do usuário. Cadastre-se em uma Linguise , integre-a ao seu site Bubble.io e personalize o seletor de idiomas para melhorar a experiência do usuário.
