Aplazo Widget

This guide explains how to easily integrate Aplazo's widget into your e-commerce website.

Aplazo's widget allows your customers to learn about Aplazo and the payment options it offers, enhancing user experience and potentially boosting conversions.

The integration uses two main web components:

  1. <aplazo-install>: Automatically detects product prices on your webpage and inserts informative banners.

  2. <aplazo-placement>: Manually places banners at specific locations on your website, giving you greater control over widget positioning and styling.

Step 1: Include Aplazo Script

Add the following script to your webpage's <head> or just before closing </body>:

<script src="https://cdn.aplazo.mx/aplazo-widgets.min.js"></script>

Step 2: Aplazo Web Components

1. <aplazo-install> Component

The <aplazo-install> component automatically inserts Aplazo banners next to product prices. It scans your webpage for price elements and adds payment option banners dynamically.

Attributes:

Attribute
Type
Description
Example
Required

respawn-spot

string:string

CSS selectors specifying banner placement and associated price element (format: banner-selector:price-selector). Use commas to separate multiple spots.

#product-price:span.price

Yes

ignore

string

CSS selector for elements to ignore when detecting prices.

.price-compare

No

theme

"dark" or "light"

Changes logo color according to website theme.

dark

No

price-format

"NO-DECIMAL"

Indicates prices are displayed without decimals.

NO-DECIMAL

No

Example:

<aplazo-install
    respawn-spot="#product_form_6653630644386:div.price__regular > dd > span,div.cart__shipping.rte:span.cart-subtotal__price"
    theme="dark"
    price-format="NO-DECIMAL">
</aplazo-install>

2. <aplazo-placement> Component

The <aplazo-placement> component provides manual control over banner placement, ideal for custom layouts or specific positioning requirements. It allows precise placement and customization of the widget.

Attributes:

Attribute
Type
Description
Example
Required

respawn-spot

string:string

CSS selectors specifying banner placement and associated price element (format: banner-selector:price-selector). Use commas to separate multiple spots.

#product-price:span.price

Yes

product-price

string | number

Product price without decimals. Example: $1,200 should be entered as 1200.

1200

No

price-element-selector

string

CSS selector for element containing product price as text.

.price-tag

No

default-selector

string

CSS selector used as a reference for banner placement on standard screens.

div.product-info

No

xs-selector

string

CSS selector used as a reference for banner placement on small screens.

div.mobile-product-info

No

ignore

string

CSS selector for elements to ignore when detecting prices.

.compare-price

No

theme

"dark" or "light"

Sets the banner theme.

light

No

price-format

"NO-DECIMAL"

Specifies that prices are shown without decimals.

NO-DECIMAL

No

Styling Attributes (optional):

Attribute
Type
Description
Example

aplazo-logo-size

number

Logo size in pixels.

32

main-style

string

Inline CSS properties for main widget styling (comma-separated).

padding:10px,color:red

quote-style

string

Inline CSS properties for the quotes section of widget (comma-separated).

font-weight:bold,font-size:14px

Example:

<aplazo-placement
    product-price="1200"
    default-selector="div.product-info"
    xs-selector="div.mobile-info"
    ignore=".compare-price"
    theme="light"
    price-format="NO-DECIMAL"
    aplazo-logo-size="32"
    main-style="padding:10px;color:red"
    quote-style="font-weight:bold;font-size:14px">
</aplazo-placement>

Installation Examples

Include the script and add components directly in your HTML:

<script src="https://cdn.aplazo.mx/aplazo-widgets.min.js"></script>

<aplazo-install respawn-spot="#product-price:span.price"></aplazo-install>

For further assistance, visit our FAQ page.

PreviousRefunds FlowNextOverview

Last updated

Was this helpful?