> For the complete documentation index, see [llms.txt](https://aplazo.gitbook.io/aplazo-integrations/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aplazo.gitbook.io/aplazo-integrations/aplazo-widget.md). # Aplazo Widget 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. **``**: Automatically detects product prices on your webpage and inserts informative banners. 2. **``**: 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 `` or just before closing ``: ```html ``` *** ### Step 2: Aplazo Web Components #### 1. `` Component The `` 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:** ```html ``` *** #### 2. `` Component The `` 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:** ```html ``` *** ### Installation Examples {% tabs %} {% tab title="HTML" %} Include the script and add components directly in your HTML: ```html ``` {% endtab %} {% tab title="React" %} Add the script tag in `public/index.html`: ```html ``` Then use it in components: ```jsx export default function Product() { return (

); } ``` {% endtab %} {% tab title="Angular" %} 1. Add the script tag to `index.html`: ```html ``` 2. Allow Angular to recognize custom web components: ```typescript import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; @NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], }) ``` 3. Use it in your templates: ```html ``` {% endtab %} {% endtabs %} *** For further assistance, visit our [FAQ page](https://chatgpt.com/c/67e30221-a7c4-800c-897e-6ec1c1eb5fac#).