Popup informativo

Introducción

Con la integración de esta funcionalidad en cualquier plataforma a la media te permitirá notificar y mostrarle a tus clientes que pueden obtener tus productos a través de Atrato Pago e incrementar tus ventas. Esta integración es muy sencilla y requiere de poco tiempo, al finalizar tendras un label y un popup informativo que podras mostrar en la descripción de tu producto.

Label informativo

Lo primero que tienes que hacer es identificar la pantalla en donde quieres desplegar el detalle de tu producto, así mismo tienes que identificar el archivo encargado de mostrar esa información, una vez ahí, tendrás que encontrar el segmento en el código en donde se despliegue el precio y descripción del producto dependiendo de tu codificación. Una vez ubicado el código mencionado en el paso anterior, copia las líneas de código que se muestran a continuación, y pégalas debajo del código perteneciente a la descripción y precio del producto.
Asegúrate de indicar el atributo data-urlhost dependiendo en el escenario que lo quieras utilizar:
para sandbox: "https://sandbox.atratopago.com"
para producción: "https://app.atratopago.com"
Así también como las referencias según el escenario que implementes:

Referencias para escenario Sandbox

<!-- Referencias para plataforma sandbox -->
<link	rel="stylesheet" type="text/css" 	href="https://sandbox.atratopago.com/ecommerce_plugin/highslide.css"	/>
<script	type="text/javascript" src="https://sandbox.atratopago.com/ecommerce_plugin/highslide-with-html.js"	></script>
<script	type="text/javascript" src="https://sandbox.atratopago.com/ecommerce_plugin/highslide-config.js" ></script>

Referencias para escenario Producción

<!-- Referencias para plataforma de producción -->
<link rel="stylesheet" type="text/css" href="https://app.atratopago.com/ecommerce_plugin/highslide.css" />
<script type="text/javascript" src="http://app.atratopago.com/ecommerce_plugin/highslide-with-html.js"></script>
<script type="text/javascript" src="https://app.atratopago.com/ecommerce_plugin/highslide-config.js"></script>

Componente Atrato para modal informativa

<div id="higslide-div-atrato-info"
     data-plataform="other"  
     data-type="info" 
     data-price="PRECIO DEL PRODUCTO" 
     data-version="2.0"
     data-style="dark" 
     data-linkcolor="black" 
     data-urlhost="{{urlHost}}">
</div>

Para comprobar que esté funcionando correctamente, genera las compilaciones necesarias dependiendo de tu plataforma e ingresa a cualquier producto y asegúrate que se muestre la leyenda deAtrato debajo del precio indicado.

Popup

Podrás customizar nuestro popup informativo y utilzar algunas de las 3 versiones que tengamos disponibles. Para cada versión existen distintas maneras de personalización. Te recomendamos utilizar la úlitma versión estable de Atrato.

V1

En esta primera versión data-version="1.0". El diseño es único y no se le puede customizar ningún atributo.

<div id="higslide-div-atrato-info" 
     data-plataform="other"  
     data-type="info"
     data-price="PRECIO DEL PRODUCTO" 
     data-version="1.0" 
     data-style="light"  
     data-linkcolor="black" 
     data-urlhost="https://app.atratopago.com">
</div>
<link rel="stylesheet" type="text/css" href="https://app.atratopago.com/ecommerce_plugin/highslide.css" />
<script type="text/javascript" src="https://app.atratopago.com/ecommerce_plugin/highslide-with-html.js"></script>
<script type="text/javascript" src="https://app.atratopago.com/ecommerce_plugin/highslide-config.js"></script>

V2

En esta segunda versión data-version="2.0", contamos con un modo oscuro y uno claro. Se pueden intercambiar facilmente configurando la varibale data-style.

<div id="higslide-div-atrato-info" 
     data-plataform="other"  
     data-type="info" 
     data-price="PRECIO DEL PRODUCTO" 
     data-version="2.0" 
     data-style="dark"  
     data-linkcolor="black" 
     data-urlhost="https://app.atratopago.com">
</div>
<link rel="stylesheet" type="text/css" href="https://app.atratopago.com/ecommerce_plugin/highslide.css" />
<script type="text/javascript" src="https://app.atratopago.com/ecommerce_plugin/highslide-with-html.js"></script>
<script type="text/javascript" src="https://app.atratopago.com/ecommerce_plugin/highslide-config.js"></script>

data-style="light"

data-style="dark"

V3

En esta tercera versión data-version="3.0", se cuenta con una amplia gama de customización para brindar una mejor experiencia al usuario.

Contamos con 5 diseños diferentes customizables, estos se pueden modificar cambiando esta variable por un numero del 1 - 5 data-modal="1" (Por default se pone el 5).

<div id="higslide-div-atrato-info" 
     data-plataform="other"  
     data-type="info" 
     data-price="PRECIO DEL PRODUCTO" 
     data-version="3.0" 
     data-style="dark"  
     data-linkcolor="black" 
     data-urlhost="https://app.atratopago.com"
     data-modal="1">
</div>
<link rel="stylesheet" type="text/css" href="https://app.atratopago.com/ecommerce_plugin/highslide.css" />
<script type="text/javascript" src="https://app.atratopago.com/ecommerce_plugin/highslide-with-html.js"></script>
<script type="text/javascript" src="https://app.atratopago.com/ecommerce_plugin/highslide-config.js"></script>

Atributos customizables

Dentro de los atributos del plugin se pueden agregar diferentes características, cada uno de estos atributos acepta colores hexadecimales. las cuales pueden ser:

Color de fondo data-background={{#XXXXXX}}
Tipo de letra (Font Family) Debe de ser un font disponible en Google fonts. data-font
Color de títutlos data-title
Color del texto data-text
Color de los íconos data-icons
Enlace para saber mas información: data-buttonlink

<div id="higslide-div-atrato-info" 
     data-plataform="other"  
     data-type="info" 
     data-price="PRECIO DEL PRODUCTO" 
     data-version="3.0" 
     data-style="dark"  
     data-linkcolor="black" 
     data-urlhost="https://app.atratopago.com"
     data-modal="2"
     data-atrato="#2962ff"
     data-font="sans-serif"
     data-icons="#FFFFFF"
     data-background="#3b5998"
     data-heading="#ffcc5c"
     data-text="#dfe3ee"
     data-fontLabel="sans-serif"
     data-sizelabel="1rem"
     data-sizeprice="2rem">
</div>
<link rel="stylesheet" type="text/css" href="https://app.atratopago.com/ecommerce_plugin/highslide.css" />
<script type="text/javascript" src="https://app.atratopago.com/ecommerce_plugin/highslide-with-html.js"></script>
<script type="text/javascript" src="https://app.atratopago.com/ecommerce_plugin/highslide-config.js"></script>

Diseños

data-modal="1"

data-modal="2"

data-modal="3"

data-modal="4"

data-modal="5"