Para usar o Template no formato Widget é muito fácil,  é preciso apenas inserir um script no código HTML do seu site e em 3 passos vamos te ensinar como fazer isso.

1 Copie o script e cole dentro da tag <head>  do HTML da sua página:

<script type="text/javascript"> 
    (function () { EdzLs = []; Eduzz = function (t, a, c) { EdzLs.push({ type: t, args: a, caller: c }); 
    if (window.edz) window.edz(); }; var s = document.createElement("script"); s.type = "text/javascript"; 
    s.async = true; s.defer = true; window.edzArgs = { id: 33788 }; 
    s.src = "https://c.eduzz.com/widget/main.js"; 
    window.edzScript = s; var x = document.getElementsByTagName("script")[0]; 
    if (!x) x = document.getElementsByTagName("body")[0].firstChild(); 
    x.parentNode.insertBefore(s, x); })();
</script>

O número que está em vermelho deve ser substituído pelo id do seu checkout.
Exemplo do seu id: https://sun.eduzz.com/49435

  • Para usar em variações na mesma página, basta replicar o código e alterar o id da variação desejada: Exemplo de uma variação : https://sun.eduzz.com/49436

2 Para que seu checkout possua um botão de compra padrão, também oferecemos um código CSS. Esse código dará o formato, as cores e o estilo do botão. Para realizar essa customização, você deve copiar o código abaixo e colar dentro da tag <head> do seu HTML:

<style>
        .eduzzbutton {
        color: #fff;
        background-color: #00b356;
        padding: 15px 30px;
        font-weight: 500;
        font-size: 1.2rem;
        border-radius: 4px;
        margin: 0 auto;
        display: inline-block;
        border: 0;
        min-height: 60px;
        font-family: ‘Arial’;
        overflow: hidden;
        position: relative;
        transition: all 0.3s ease-in-out;
        }
        .eduzzbutton:before {
        content: “”;
        display: block;
        position: absolute;
        width: 0;
        height: 90px;
        top: 0px;
        left: 0;
        margin: auto;
        background: #fff;
        opacity: 0.1;
        transition: all 0.5s ease-in-out;
        }

        .eduzzbutton:hover{
            background-color: #00b155c0 !important;
            cursor:pointer;
        }
        .eduzzbutton:active, .eduzzbutton:focus, .eduzzbutton:hover {
        
        outline: none;
        box-shadow: none;
        }
        .eduzzbutton:active:before, .eduzzbutton:focus:before, .eduzzbutton:hover:before {
        width: 100%;
        }
        .eduzzbutton.affirmative {
        color: #fff;
        }
        </style>

3 Copie o código abaixo, que será responsável por criar o botão de compra e se comunicará com os códigos acima. Após copiar, cole dentro da tag <body> do seu HTML:

<button type="button" class="eduzzbutton" onclick = "Eduzz('Widget', null, this);" > Comprar agora!</button>

Abaixo está o botão criado usando os códigos dos passos 2 e 3. Ele possui um layout padrão que foi definido através dos códigos acima. Se desejar alterar cores, tamanhos ou fontes, é necessário criar e referenciar um arquivo CSS que substituirá as configurações do passo 2.

 

Atenção: não é possível utilizar este recurso nos seguintes cenários:

  • Se seu conteúdo for “Ticketzz”;
  • Se seu conteúdo for um “Infoproduto” que entrega PINs.

 

Esperamos ter lhe ajudado! Se ainda tiver dúvidas, basta acessar a “Central de Ajuda”.