Criar botão de direcionamento na tela de login

Alguns clientes podem precisar adicionar um botão na tela de login para direcionar usuários a um site ou serviço específico da empresa. A seguir, apresentamos o passo a passo para criar e configurar esse botão, de forma que ele mantenha o mesmo estilo visual dos demais elementos da tela de login.

Passo 1: Acessar a Área de Configuração de Plugins

1. No menu da plataforma, acesse Outras Configurações > Integrações > Instalar Plugin.

2. Localize o campo Código JavaScript, onde será inserido o script do botão.

Passo 2: Preparar o Código do Botão

Antes de colar o código no campo da plataforma:

• Substitua o link do destino pelo endereço para onde o usuário será direcionado.

• Ajuste o nome do botão conforme desejado.

Observação: O código abaixo foi desenvolvido para copiar automaticamente o estilo da tela de login, garantindo que o novo botão fique visualmente consistente com os demais elementos.

<script>
/**
 * Plugin – Botão NOVO na tela de login (Engage)
 * - Herda o estilo do botão "Entrar"
 * - Fica sempre abaixo do formulário visual
 * - Compatível com SPA / React
 */

(function () {
    'use strict';

    const TARGET_URL = "COLOQUE O LINK DE DESTINO AQUI ENTRE ASPAS";
    const BUTTON_ID = "btn-NEW-login";
    const BUTTON_TEXT = "COLOQUE O TEXTO DO BOTÃO";

    function isLoginPage() {
        const hash = window.location.hash || '';
        const pathname = window.location.pathname || '';
        return hash.includes('/login') || pathname.includes('/login');
    }

    function buttonExists() {
        return !!document.getElementById(BUTTON_ID);
    }

    function getLoginButton() {
        const selectors = [
            'button[type="submit"]',
            '[class*="Login"] button',
            '[class*="login"] button'
        ];

        for (const selector of selectors) {
            const btn = document.querySelector(selector);
            if (btn) return btn;
        }
        return null;
    }

    function createButton(referenceButton) {
        if (buttonExists() || !referenceButton) return null;

        const btn = document.createElement('button');
        btn.id = BUTTON_ID;
        btn.type = 'button';
        btn.innerText = BUTTON_TEXT;

        // Clona classes e estilos do botão "Entrar"
        btn.className = referenceButton.className;

        // Ajustes mínimos
        btn.style.marginTop = '12px';
        btn.style.width = '100%';

        btn.onclick = function (e) {
            e.preventDefault();
            e.stopPropagation();
            window.open(TARGET_URL, '_blank', 'noopener,noreferrer');
        };

        return btn;
    }

    function tryAddButton() {
        if (!isLoginPage() || buttonExists()) return;

        const loginButton = getLoginButton();
        if (!loginButton || !loginButton.parentNode) return;

        const btn = createButton(loginButton);
        if (!btn) return;

        // Insere logo abaixo do botão "Entrar"
        loginButton.parentNode.insertBefore(btn, loginButton.nextSibling);
    }

    function init() {
        const observer = new MutationObserver(() => {
            if (isLoginPage() && !buttonExists()) {
                tryAddButton();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });

        window.addEventListener('hashchange', () => {
            setTimeout(tryAddButton, 300);
        });

        setTimeout(tryAddButton, 500);
        setTimeout(tryAddButton, 1000);
        setTimeout(tryAddButton, 2000);
    }

    init();
})();
</script>

Passo 3: Salvar e Testar

1. Salve a configuração do plugin.

2. Acesse a tela de login da plataforma para verificar se o botão aparece corretamente abaixo do formulário e se direciona para o link configurado. 

3. Em alguns caso é preciso precionar as teclas Ctrl + Shift + R para atualizar a pagina e limpar o cache