2. Página de personalização e Código Embed

Nesta etapa, será explicado como você poderá personalizar seu Widget de Acessibilidade e como gerar seu código embed para utilizar o Widget de Acessibilidade em qualquer sistema.

Passo 1: Seção Personalizar MLab Widget

Para começar, acesse a página de personalização do Widget de Acessibilidade no portal da Madri: Customização do Widget de Acessibilidade — Madri Lab.

No topo, você verá o título e o selo Preview em tempo real, que indica que as alterações podem ser visualizadas antes de salvar.

Passo 1.1: Inserir a License Key

No painel Configurações, cole sua License Key no campo indicado (a chave recebida por e-mail).

Atenção: Sem a chave, você pode testar o preview, mas não conseguirá salvar as personalizações. Vale lembrar que apenas as licenças Pro permitem salvar as predefinições.

Passo 1.2: Ajustar cores e aparência

Ainda em Configurações, defina:

Cor principal — cor do botão e dos destaques do widget;
Cor das caixas — fundo do painel do widget;
Cor do texto — textos dentro do widget;
Remover marca — oculta a marca MLab (recurso PRO);
Estilo do botão — redondo ou quadrado.

Passo 1.3: Escolher ferramentas visíveis

No campo Desabilitar ações, selecione as ferramentas que não devem aparecer no widget:

Mostrar todos — exibe todas as ferramentas;
Itens individuais — marque para ocultar apenas o que não quiser.
Clique nos itens para marcar ou desmarcar.

Passo 1.4: Visualizar no preview

Clique em Aplicar no preview.

À direita, o Preview (simulado) mostrará como o widget ficará com as cores, o botão e as ferramentas escolhidos.
Ajuste o que precisar e clique em Aplicar no preview novamente, até ficar como deseja.

Passo 1.5: Salvar as configurações (PRO)

Com a License Key PRO preenchida, clique em Salvar settings. Isso grava as cores, o estilo e as ferramentas no servidor. O widget no seu site passará a usar essas configurações sem a necessidade de trocar o código embed.

Plano gratuito: permite testar no preview, mas a customização completa exige o plano PRO.

Passo 2: Ler como instalar (opcional)

Role até a seção Como instalar o Widget MLab. Esta parte resume:

Como gerar o código embed;
A diferença entre site comum, WordPress e LMS Moodle;
Onde colar o código no HTML do site.

Passo 3: Copiar o código embed

Na seção Código para Incorporar, o sistema gera automaticamente o código com sua License Key.

Confira se a chave está correta no código exibido;
Clique em Copiar código;
Cole no seu site (após </footer> e antes de </body> ou antes de </header> ).

Já usa o widget? Basta clicar em Salvar settings — não é preciso colar o código de novo.

Passo 4: Conferir no site

Após colar o código (primeira instalação) ou salvar as configurações (para quem já usa o widget), acesse o seu site e abra o widget para confirmar as cores, o botão e as ferramentas.

Resumo rápido: Key → Personalizar → Aplicar no preview → Salvar settings (PRO) → Copiar código (se for instalar pela primeira vez).

Documentação