"Tornamos as pessoas mais independentes no mundo digital.

"

Documentação

Central de Acessibilidade
Guia de Instalação

Versão 4.2

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Guias de instalação para plataformas
Este guia vai te auxiliar na instalação da Central de Acessibilidade(CA) nas principais
plataformas de forma simples e rápida.

Pré-Requisitos:
Suportamos, no máximo, até as duas versões mais recentes dos navegadores:
● Windows: Chrome, Firefox, Edge
● Linux: Chrome, Firefox
● MacOS: Chrome, Firefox, Safari
● Android: Chrome
● IOS: Safari, Firefox, Chrome

Instalações

Localize o manual de instalação apropriado para o seu site, independentemente de ser

personalizado, baseado em um CMS popular ou construído em uma plataforma de
desenvolvimento de sites.

1. Código embutido
2. Google Tag Manager
3. WIX
4. Wordpress

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Código embutido

Para instalar a CA diretamente no seu site, primeiro escolha o modelo de instalação:

● Rápida e básica: Instale a CA com nossas configurações e design padrão, tudo

pronto para fornecer a melhor experiência ao cliente.
● Personalizada e avançada: Personalize a interface do CA de acordo com as
diretrizes e cores da sua marca.

Instalação Rápida e Básica

Passo 1:

Copie o código de instalação abaixo.

<script>(function(){ var s = document.createElement('script'); var h =

document.querySelector('head') || document.body; s.charset="UTF-8"; s.src =
'https://cdn.assistive.com.br/plugin/AssistiveWebPlugin.js'; s.async = true; s.onload
= function(){ assistive.init({});}; h.appendChild(s); })(); </script>

Passo 2:

Faça login na sua ferramenta de construção de sites e cole o código diretamente antes do
fechamento da tag body do seu HTML.

Muito bem! Você instalou a Central de Acessibilidade da Assistive, tornando seu site
acessível a muito mais pessoas! 👏

Instalação Personalizada e Avançada

Customize o código fornecido para instalação rápida de acordo com as configurações

presentes na Tabela "Parâmetros de Configuração" ou entre em contato com o suporte
através do email suporte@assistive.com.br e informe as configurações desejadas.

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Tabela 1 - Parâmetros de Configuração

Parâmetro Valores Valor Padrão Device

Formato do Botão
Circular Circular Desktop e
btnShape circle Mobile

Quadrado
square
btnShape:'circle'
Arredondado
rounded

Ícone
Avatar Avatar Desktop e
icon default Mobile

Engrenagem
gear
icon:'default'
Texto
font

Configuração
config

Posicionamento Esquerda ou Direita Direita Desktop e

Horizontal hPosition = {left | right} hPosition:'right' Mobile

hPosition Deslocamento em pixels 15 (Desktop)

hOffset hOffset = {integer} 10 (Mobile)
hOffset:15

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
 Parâmetro Valores Valor Padrão Device

Posicionamento Topo ou Rodapé Rodapé Desktop e

Vertical vPosition = {top | bottom | center} vPosition='bottom' Mobile

vPosition Deslocamento em pixels 15 (Desktop)

vOffset vOffset = {integer} 10 (Mobile)
vOffset:15

Tamanho do Botão Pequeno (44px), Médio (56px), Desktop: Médio Desktop e

Grande (68px) btnSize='medium' Mobile
btnSize
btnSize = {small | medium | large} Mobile: Pequeno
btnSize:'small'

Cor do botão Valor em Hexadecimal sem o Desktop e

caracter “#” (146FF8) Mobile
btnColor
color = {string hex} btnColor:'146FF8'

Cor da Janela Valor em Hexadecimal sem o Desktop e

caracter “#”. (146FF8) Mobile
bodyColor
bodyColor = {string hex} bodyColor:'146FF8'

Se você precisar modificar apenas alguns parâmetros, informe qual parâmetro deseja
alterar ao passá-lo para a função assistive.init().

Exemplo: No código a seguir estamos alterando o ícone (icon) e no mobile a cor do botão
(color) e da janela (bodyColor).

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
 <script>
(function(){ var s = document.createElement('script');
var h = document.querySelector('head') || document.body; s.charset="UTF-8";
s.src = 'https://cdn.assistive.com.br/plugin/AssistiveWebPlugin.js';
s.async = true; s.onload = function(){ assistive.init(
{
icon: 'default',
mobile: {
btnColor: '146FF8',
bodyColor: '146FF8'
}
});};
h.appendChild(s); })();
</script>

Observação:
As configurações do Mobile herdam as configurações do Desktop. Portanto, você só
precisa especificar os parâmetros que deseja modificar no Mobile. No exemplo
anterior, a configuração do ícone aplicada no bloco principal será automaticamente
aplicada ao Mobile, a menos que você queira alterá-la especificamente no Mobile, nesse
caso, basta adicionar o parâmetro 'ícone' dentro do bloco Mobile.

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Veja o exemplo a seguir:

<script>
(function(){ var s = document.createElement('script');
var h = document.querySelector('head') || document.body;
s.charset="UTF-8"; s.src =
'https://cdn.assistive.com.br/plugin/AssistiveWebPlugin.js';
s.async = true; s.onload = function(){ assistive.init(
{
icon: 'default',
mobile: {
icon: 'gear',
btnColor: '146FF8',
bodyColor: '146FF8'
}
});};
h.appendChild(s); })();
</script>

Exemplo de configuração de ícone sobrescrevendo o ícone do desktop.

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Google Tag Manager

Para fazer a instalação da Central de Acessibilidade da Assistive através do Google Tag

Manager siga as instruções a seguir.

Passo 1:
Acesse sua conta do Google Tag Manager através do seguinte link:
https://tagmanager.google.com, utilizando os dados da sua conta Google.

Passo 2:
No menu lateral, clique em "Tags" e, depois, clique no botão "Nova".

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Passo 3:
Renomeie a tag para "Assistive - Tag" e clique na primeira opção "Configuração da tag".

Passo 4:

Clique no ícone de menu ( ), na barra superior, e, depois, em "HTML personalizado".

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Passo 5:
Cole o código disponibilizado no início desse documento dentro da sessão "HTML".

Passo 6:
Na mesma tela, clique agora na segunda opção "Acionamento".

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Passo 7:
Clique na opção "All Pages" e, então, você será redirecionado para a tela anterior.

Passo 8:
Então clique no botão "Salvar" para salvar suas configurações.

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Passo 9:
Depois de salvar suas configurações, você será direcionado para a página principal, então
clique no botão "Enviar" para acessar a tela de publicação.

Passo 10:
Preencha o campo "Nome da versão" e clique no botão "Publicar".

Muito bem! Você instalou a Central de Acessibilidade da Assistive, tornando seu site
acessível a muito mais pessoas! 👏
Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
WIX

Torne seu site Wix acessível através da instalação da Central de Acessibilidade da

Assistive.

Passo 1:
Faça login no painel administrativo do seu site Wix.

Passo 2:
Acesse a opção "Configurações" no menu lateral do painel de controle do seu site.

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Passo 3:
Na parte inferior da página de Configurações, clique na opção "Código personalizado".

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Passo 4:
Clique no link "Adicionar código" na seção "Corpo - Fim" e o modal "Adicionar código
personalizado" será apresentado.

Passo 5:
Preencha os campos no modal "Adicionar código personalizado":
● "Cole o trecho do código aqui": Insira o código disponibilizado no início desse
documento.
● "Nome": Dê um nome ao seu código para facilitar a identificação.
● "Adicionar código às páginas", selecione "Todas as páginas" e "Carregue o
código em cada nova página", para que todas as páginas se tornem acessíveis.
● "Adicionar código em": Escolha a opção "Body - fim".

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Passo 6:
Clique no botão "OK" para finalizar.

Muito bem! Você instalou a Central de Acessibilidade da Assistive, tornando seu site
acessível a muito mais pessoas! 👏

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Wordpress

Torne seu site WordPress acessível através da instalação da Central de Acessibilidade da

Assistive.

Passo 1:
Faça login no painel administrativo do seu site Wordpress.

Passo 2:
No painel do WordPress, localize a opção de adicionar um html customizado. O local em
que essa opção estará disponível pode variar de acordo com o tema instalado. Alguns
lugares comuns são:
● No menu "Apresentação" e, em seguida, "Widgets";
● No menu "Apresentação" e, em seguida, "Editor de Tema";
● No menu "Plugin" e, em seguida, "Editor";
● Direto no menu lateral, em Customizar JS ou HTML.

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Passo 3:
Na parte central da página, role até o final e clique no botão "+" e, depois, no botão
"Pesquisar tudo" para incluir um HTML customizado.

Passo 4:
Procure pela opção "HTML personalizado" e clique para adicionar um bloco.

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.
Passo 5:
No bloco em branco que aparece na tela, cole o código disponibilizado no início desse
documento e, então, clique no ícone de seta para baixo até que o bloco seja o último
elemento da tela.

Passo 6:
Clique no botão "Atualizar" no canto superior direito da tela para salvar suas alterações.

Muito bem! Você instalou a Central de Acessibilidade da Assistive, tornando seu site
acessível a muito mais pessoas! 👏

Notas Proprietárias:
Estas informações não deverão ser publicadas total ou parcialmente, ou divulgá-las a terceiros, sem a prévia autorização por escrito da
ASSISTIVE. Os nomes dos produtos e serviços da ASSISTIVE, citados neste documento, são marcas registradas e comerciais de uso
exclusivo da mesma.