E aí, tudo bem?
Para aprender a como configurar o Checkout Widget em seus produtos basta se atentar ao passo a passo a seguir😉
Para usar o Template no formato Widget basta inserir um script no código HTML do seu site:
Copie o script abaixo 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";
window.edzScript = s;
var x = document.getElementsByTagName("script")[0];
if (!x) x = document.getElementsByTagName("body")[0].firstChild();
x.parentNode.insertBefore(s, x);
})();
</script>
Para o botão de compra padrão, insira o código CSS. Copie o código abaixo e coe 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>
Por fim, cole esse último código dentro da tag <body> do seu HTML:
<button type="button" class="eduzzbutton" onclick="Eduzz('Widget', { id: 123456 }, this);" >Comprar agora!</button>
O número que está em vermelho deve ser substituído pelo id do seu checkout.
Exemplo do seu id: https://sun.eduzz.com/654321
- 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/654322
O layout padrão é 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 "BLINKET";
- Se seu conteúdo for um "Infoproduto" que entrega PINs.
Ficamos muito felizes em te ajudar!😃
Ainda precisa de ajuda? Estamos prontos para te atender! 🙂
Caso ainda haja dúvidas, envie uma solicitação para nossa equipe de suporte pelo link do Formulário.
Neste link será pedido algumas informações para que sua identidade seja validada e será onde você poderá relatar o seu problema, para que assim sua dúvida seja encaminhada para a equipe de atendimento, garantindo que sua solicitação seja atendida. 😉