Como usar UpSell e OneClickBuy em minha página de vendas

Depois de seguir os passos de criar um produto ou serviço e adicioná-lo ao checkout como upsell, está quase tudo resolvido.

O que vamos fazer agora é redirecionar toda compra de seu checkout para sua página de pós-venda ou upsell. Para isso, vá até a aba Integrações do seu checkout:

O que irá acontecer é que, sempre que um cliente realizar uma compra, ele será redirecionado para essa nova tela.

Configurando sua página de vendas

Agora, em sua página de vendas, adicione um script de upsell e a tag de vendas. Vamos lá:

1.Primeiro, copie o código abaixo e cole logo depois da tag </head> de sua página:

<script src="https://public.pay.nova.money/components/upsell.min.js"></script>

Em seguida, coloque este código onde quer posicionar o botão de compra:

<nova-pay-upsell 
	button-label="COMPRE AGORA" 
	success-url="http://www.suapagina.com/success.html" 
	error-url="http://www.suapagina.com/success.html">
</nova-pay-upsell>

Pronto! É só isso. Sua página está pronta para o pós venda.

💡 Sua venda só irá funcionar usuários redirecionados do checkout. Caso acesse diretamente, a venda não ocorrerá.

‍

Configurações do botão de compra

Claro que você percebeu alguns atributos no botão de compra. Vamos falar sobre cada um deles:

• send-meta-fbp: Define se o parâmetro fbp da API de conversão do Meta deve ser enviado. Padrão é true.
• send-meta-fbc:  Define se o parâmetro fbc da API de conversão do Meta deve ser enviado. Padrão é true.
• button-label: É o conteúdo do botão de compra. Escreva o que quiser.
• success-url: Página de sucesso da compra da oferta de upsell
• error-url: Página de destino no caso de erro

Como ficam as UTMs?

As utms do pedido anterior serão repetidas nesta venda. Para saber mais como funcionam as UTMs veja este artigo:

Como usar UTM tags em minhas vendas

Personalizando o Botão de Compra

Você pode deixar o botão de vendas com a cara da sua página. Para isso, você precisa de conhecimentos de CSS (linguagem de estilo em cascata) para definir cores, tamanhos e efeitos. Você pode utilizar classes CSS para personalizar completamente a aparência do botão, deixando-o alinhado com a identidade visual do seu site.

Veja um exemplo que você pode copiar e colar para usar em sua página:

<style>
	nova-pay-upsell button{
		padding:12px 24px;
		font-size: 22px;
		font-weight: 700;
		fill: #000000;
		color: #000000;
		background-color: #FDCB5E;
		border-radius: 4px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
	}
</style>

Informações adicionais

O tracking de conversões do meta e do google seguirão o modelo implantado na página em questão. Caso a página utilize o mesmo pixel meta ou gtag, enviamos os dados de identificação da sessão e clique, porém, eventos de compra serão registrados apenas no client-side. Para mais informações, veja como trabalhamos com tracking do meta neste artigo:

‍