--- title: Instalación del Addi Widget slug: custom-integrations/instalacion-del-addi-widget description: Learn how to install and customize the game-changing ADDI widget for your store, effectively boosting your conversion rate and average ticket size. Enable installment payments as an option and effortlessly enhance customers' purchasing intention while pro createdAt: 2023-09-27T15:49:10.171Z --- En Addi queremos ayudarte a mejorar la tasa de conversión y el ticket promedio de tu comercio. Incluyendo este widget podrás darle a conocer a tus clientes la opción de pago a cuotas, afectando positivamente su intención de compras, y naturalmente fomentando órdenes más grandes y la inclusión de productos adicionales al carrito. **Puedes usar este widget en diferentes puntos de la experiencia de compra de tu comercio y este cargará de manera dinámica el valor mínimo de la cuota mensual para el precio del producto tal como se ve en el siguiente ejemplo:** ![](https://api.archbee.com/api/optimize/MCXyezaW9WrT4cGwqpD-5/SIzrBbw-weluL4fh86qko_image.png) ## Pasos para instalación del widget ### 1. Añade el script de ADDI Incluye el siguiente tag en el contenido de todas las páginas en las que desees mostrar el widget: ```html ``` Recomendamos incluirlo justo antes de cerrar el tag para evitar afectaciones en el tiempo de carga de tu sitio. ### 2. Incluye el componente del widget Ahora, incluye el siguiente tag en la ubicación en la que deseas mostrar el mensaje promocional: :::Iframe{iframeHeight="0" code="

HTML

<addi-widget price="{{precio_del_producto}}" ally-slug="{{ALLY_SLUG}}"></addi-widget>

&lt;addi-widget price="{{precio_del_producto}}" ally-slug="{{ALLY_SLUG}}"&gt;&lt;/addi-widget&gt;

"} ::: Recuerda reemplazar el parámetro `price` con el valor o variable numérica que represente el precio correcto del producto. Este precio debe ser un número positivo, sin símbolos ni espacios y debe estar en la moneda en la que manejas en tu comercio sin abreviaciones. Por otro lado, recuerda reemplazar el parámetro `ally-slug` por el nombre único para tu comercio que te hemos compartido. ### 3. Actualiza el widget cuando el precio cambie Cuando el precio de tu producto cambie por alguna situación (por ejemplo: descuento especial) debes actualizar el valor especificado anteriormente en el widget. ### Pasos para ajustar el estilo del widget a tu sitio Si lo ves pertinente, puedes editar el look & feel del widget para que se ajuste mejor al de tu e-commerce. Para hacerlo, por favor configura los siguientes parámetros adicionales en el tag del widget: ```html ``` Ejemplos de formato para la propiedad `fontFamily`: ```javascript - 'Times New Roman', Times, serif; - Arial, Helvetica, sans-serif; - 'Roboto', sans-serif; - 'Lucida Console', 'Courier New', monospace; - Trebuchet MS, sans-serif - Georgia, serif Fuente: https://www.w3.org/Style/Examples/007/fonts.en.html ``` ![](https://archbee-doc-uploads.s3.amazonaws.com/MCXyezaW9WrT4cGwqpD-5/OhIkUXefSQUM76EyAHKyi_wlyj6peqjxyvp-qotrenpdesign-details-5.png)