Para usar o Template no formato Wigdet é 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;
                s.src = 'https://sun.eduzz.com/widget/main.js';
                var x = document.getElementsByTagName('script')[0];
                if (!x) x = document.getElementsByTagName('body')[0].firstChild();
                x.parentNode.insertBefore(s, x);
            })();
        </script>

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', { id: 49435 }, 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.

 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 do botão (passo 3) e alterar o id da variação desejada: Exemplo de uma variação : https://sun.eduzz.com/49436

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.

 

Está com dúvidas sobre a personalização do seu Checkout Sun?

VEJA COMO PERSONALIZAR AQUI!

 

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