Instalação da Rybená
Este guia mostra como instalar a Rybená em seu site. A instalação é simples e pode ser feita em poucos minutos.
Métodos de Instalação
Escolha o método de instalação que melhor se adapta ao seu projeto:
Instalação Básica
A forma mais simples de instalar a Rybená é adicionar o script diretamente no HTML do seu site.
1. Adicione o script ao head
Copie e cole o seguinte código entre as tags <head></head> em todas as páginas do seu site:
<script
type="text/javascript"
src="https://cdn.rybena.com.br/dom/master/latest/rybena.js"
></script>2. Teste a instalação
Após adicionar o script, recarregue a página. Você deverá ver os botões de acessibilidade da Rybená no canto da tela.
3. Pronto!
A Rybená está instalada e funcionando. Os usuários podem agora selecionar texto para tradução em LIBRAS ou voz, e acessar as ferramentas de acessibilidade visual.
Nota: Este método é ideal para sites estáticos simples ou quando você quer começar rapidamente sem configurações adicionais.
Instalação com Parâmetros
Você pode personalizar a Rybená adicionando parâmetros à URL do script. Isso permite configurar posição, tamanho, cores e muito mais.
1. Escolha os parâmetros desejados
Consulte a página de Configuração para ver todos os parâmetros disponíveis.
2. Adicione os parâmetros ao script
Adicione um ? após a URL do script e separe os parâmetros com &:
<script
type="text/javascript"
src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?positionPlayer=right&size=300&lang=ptBR"
></script>3. Exemplos comuns
Aqui estão algumas configurações populares:
Player à direita:
<script
type="text/javascript"
src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?positionPlayer=right"
></script>Player maior:
<script
type="text/javascript"
src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?size=350"
></script>Iniciar em inglês:
<script
type="text/javascript"
src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=enUS"
></script>Dica: Você pode combinar múltiplos parâmetros. Por exemplo: ?positionPlayer=right&size=300&lang=enUS
Instalação em Modo API
O modo API é ideal para integrações avançadas onde você quer controlar a Rybená programaticamente.
1. Adicione o script com modo API
Use o parâmetro mode=api para ativar o modo API:
<script
type="text/javascript"
src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api"
></script>2. O que o modo API faz
O modo API automatiza várias funcionalidades:
- Abre a Rybená em background
- Remove textos de apresentação
- Prepara o ambiente para controle via API
3. Use a API
Após a instalação, você pode controlar a Rybená via JavaScript:
// Obter instância da API
const rybena = RybenaApi.getInstance();
// Traduzir texto
rybena.translate("Olá, mundo!");
// Alterar idioma
rybena.setLanguage("enUS");
// Abrir player
rybena.openPlayer();Atenção: O modo API requer implementação adicional. Consulte a Documentação da API para mais detalhes.
Instalação em Iframes
Se você usa iframes em seu site, é importante adicionar o script Rybená também dentro do iframe para que o conteúdo seja traduzido corretamente.
Por que isso é necessário? Devido às políticas de segurança dos navegadores (Same-Origin Policy), scripts externos não podem acessar eventos de seleção dentro de iframes de origens diferentes.
<script
type="text/javascript"
src="https://cdn.rybena.com.br/dom/master/latest/rybena.js"
></script>
<iframe>
<script
type="text/javascript"
src="https://cdn.rybena.com.br/dom/master/latest/rybena.js"
></script>
</iframe>Conteúdo Não Selecionável
Se você tem elementos que não podem ser selecionados (como imagens ou elementos com CSS específico), você pode usar o atributo rybena-alt-text para fornecer texto para tradução:
{/* Imagem com texto alternativo */}
<img
src="logo.png"
alt="Logo da empresa"
rybena-alt-text="Logo da Rybená - Soluções de acessibilidade digital"
/>
{/* Div com conteúdo não selecionável */}
<div
style="user-select: none;"
rybena-alt-text="Este é um texto importante que deve ser traduzido"
>
Conteúdo não selecionável
</div>Verificação da Instalação
Após instalar a Rybená, verifique se tudo está funcionando corretamente:
1. Verifique os botões
Os botões de acessibilidade devem aparecer no canto da página (esquerda ou direita, dependendo da configuração).
2. Teste a tradução
Selecione qualquer texto da página e clique no botão de LIBRAS ou Voz para testar a tradução.
3. Verifique o console
Abra o console do navegador (F12) e verifique se não há erros relacionados ao Rybená.
4. Teste em diferentes navegadores
Teste a instalação em Chrome, Firefox, Safari e Edge para garantir compatibilidade.
Encontrou problemas? Consulte nossa seção de Suporte e Solução de Problemas para encontrar soluções rápidas ou entre em contato com nossa equipe.
Solução de Problemas Rápida
Próximos Passos
Agora que você instalou a Rybená, você pode:
- Configurar parâmetros para personalizar a aparência e comportamento
- Criar barras customizadas
- Desabilitar funcionalidades específicas
- Configurar políticas de segurança (CSP)
- Encontrar soluções para problemas
Configuração
Personalize posição, tamanho, cores e muito mais
Barra Customizada
Crie sua própria barra de acessibilidade
Desabilitar Funcionalidades
Configure quais funcionalidades devem ser desabilitadas
Configuração CSP
Configure políticas de segurança para a Rybená
Suporte
Encontre soluções para problemas comuns
Para Desenvolvedores
Introdução ao Rybená
Bem-vindo à documentação da Rybená! Este guia irá ajudá-lo a entender o que é a Rybená, como ela funciona e como integrá-la em seu site ou aplicação.
Configuração da Rybená
A Rybená oferece diversos parâmetros de configuração que permitem personalizar a aparência, posição e comportamento da solução. Todos os parâmetros são adicionados à URL do script `rybena.js`.