Guías
Start typing to search…

Informative Popup

Introduction

A special informative label will appear below the price of each product in the Product Details Page. It acts as a button, which on click displays a special popup that will guide the user through their onboarding and credit application.

Label informativo

The first step is to import our plugins via CDNs. Since each platform is implemented differently there is no standard procedure for these references to go, but normaly in a HTML website the <link> tag is placed inside the <head> and JS <script> tags go at the end of the <body> tag.

Sandbox CDN references

<!-- Sandbox references -->
<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>

Production CDN references

<!-- Production references -->
<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>

The next step is to identify your Product Details Page inside your codebase. Underneath the place where the price and description of the product is presented, paste the block of code that we provide below. Make sure you configure the attibute data-urlhost according to the envirornment in which you are working with:
Sandbox: "https://sandbox.atratopago.com"
Production: "https://app.atratopago.com"
Componente Atrato para modal informativa

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

This is how the informative label should look like inside your website:

Make sure the implementation was successful by compiling your website with these new changes and take a look at the Product Details Page. If the label shows up correctly, it was a successful implementation.

Popup

The informative popup that appears after the user clicks on the label we configured above has special configuration features. There are three versions of this popup and each one has unique configuration options. We recommend to use the lastest version:

V1

Our first version data-version="1.0". Unique design which cannot be customized.

<div id="higslide-div-atrato-info" 
     data-plataform="other"  
     data-type="info"
     data-price="PRODUCT PRICE" 
     data-version="1.0" 
     data-style="light"  
     data-linkcolor="black" 
     data-urlhost="https://app.atratopago.com">
</div>

V2

Second version data-version="2.0", has a light and dark mode. To change this use the attribute 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>

data-style="light"

data-style="dark"

V3

Third versiondata-version="3.0", counts with a lot of customization options for you to create a unique popup.

The first thing is to choose the base design, which can be further customized. Currently we have 5 designs, choose one in the interval 1 - 5 data-modal="1" (Default design is 5).

<div id="higslide-div-atrato-info" 
     data-plataform="other"  
     data-type="info" 
     data-price="PRODUCT PRICE" 
     data-version="3.0" 
     data-style="dark"  
     data-linkcolor="black" 
     data-urlhost="https://app.atratopago.com"
     data-modal="1">
</div>

Customizable attributes

Colors are expressed as hexadecimal values:

  • Background color data-background={#XXXXXX}
  • Font family: must be a font supported by Google Fonts. data-font
  • Title color data-title
  • Text color data-text
  • Icon color data-icons
  • Link color: data-buttonlink
<div id="higslide-div-atrato-info" 
     data-plataform="other"  
     data-type="info" 
     data-price="PRODUCT PRICE" 
     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>

Base Designs

data-modal="1"

data-modal="2"

data-modal="3"

data-modal="4"

data-modal="5"

Updated 15 days ago