Blog de Email Marketing

Templates

Como inserir um botão de pagamento do PagSeguro em Email Marketing

Pedro Padron Por Pedro Padron em 07.07.2015

O painel de controle do PagSeguro tem uma área para gerar botões de compra personalizados, porém, como o objetivo é fornecer ao vendedor um link para ele inserir em seu site, o código HTML do botão criado é adaptado apenas para este fim, não podendo ser usado para email marketing por utilizar tags que muitos programas de email não suportam.

O código original fornecido pelo PagSeguro é um formulário que contém dois campos input, mas alguns programas de email bloqueiam o funcionamento de formulários em mensagens para proteger os usuários de possíveis fraudes. O Outlook, por exemplo, desconfigura até a aparência dos campos input, transformando-os nos caracteres [ ].

A boa notícia é que é possível usar esse mesmo código original para gerar um novo, que não depende de formulário e é perfeitamente funcional em todos os programas de email. Acompanhe o passo-a-passo e veja como gerar um botão de compra do PagSeguro para inserir no seu email marketing.

Criando o Botão de Pagamento

Acesse o painel do PagSeguro e escolha a opção Botões de Pagamento:

pagseguro-2

Preencha os dados de seu produto e clique em Gerar Botão:

pagseguro-1

Veja que, no exemplo acima, deixamos marcada a opção A quantidade de itens do carrinho não poderá ser alterada. Essa opção é importante pois determina qual tela do PagSeguro será visualizada: a do Pagamento ou do Carrinho de Compras.

Tela de Pagamento

pagseguro-7

Para direcionar o cliente à tela de Pagamento, deixe marcada a opção A quantidade de itens do carrinho não poderá ser alterada. Ao clicar em Gerar Botão, será exibido um código parecido com o nosso exemplo acima. Basta usar os dados que destacamos na imagem abaixo para gerar um link normal em seu email usando a tag <a>.

pagseguro-3

Para montar esse link, usamos a URL definida como action do formulário e adicionamos a ela o parâmetro code com o código gerado pelo PagSeguro:

Tela do Carrinho de Compras

pagseguro-6

Ao deixar desmarcada a opção A quantidade de itens do carrinho não poderá ser alterada, o cliente será direcionado para a tela do Carrinho de Compras. Assim como no exemplo anterior, é preciso gerar um link usando os dados que destacamos na imagem abaixo:

pagseguro-5

Note que, neste exemplo, a URL de destino e o nome do parâmetro que leva o código do produto são diferentes. Como a URL já possui um parâmetro de nome action com o valor add, ao adicionar o parâmetro itemCode precisamos inserir o caractere &:

Imagem do Botão

Nos dois exemplos acima, criamos um link de pagamento simples, sem o botão do PagSeguro. Para usar o botão, basta inserir uma tag <img> dentro do link criado usando o mesmo atributo src do botão gerado pelo PagSeguro:

Resultado:



Obs.: Este link é só um exemplo, nós não vendemos bolos. =)

  • Evandro De Souza

    Cara muito bom, funcionou perfeitamente! Obrigado por compartilhar!

Assine Nossa Newsletter


Por favor informe um endereço de email válido.

Acompanhe Nossas Publicações