Overtry · Guía
Guía de instalación
Overtry añade un botón «Pruébalo» a sus fichas de producto. El cliente hace una foto de su habitación o de sí mismo y ve su producto en ella. Esta guía lo cubre todo, de la clave del sitio a WordPress y Shopify.
1. Obtenga la clave del sitio
Inicie sesión
Inicie sesión en lamp.ar/login y cree su empresa. Cada empresa tiene 20 imágenes gratis al mes; para más, escriba a hello@lamp.ar.
Añada su tienda
En el panel, en Overtry, elija «Add shop». Escriba la dirección de su tienda (por ejemplo shop.es: la versión con www se añade sola). Si las fotos de producto vienen de otra dirección, como un CDN de imágenes, escríbala en «Product images from». Si no, se usa la dirección de la tienda.
Copie el código
La tienda recibe una clave (pk_try_…) y un código para insertar. Puede añadir más direcciones después, como un sitio de pruebas: el botón solo funciona en las direcciones de la lista.
2. Añada el botón
Ponga el script una vez en la página y el botón donde deba aparecer, normalmente junto a «Añadir al carrito».
<script type="module" src="https://lamp.ar/overtry.js"></script>
<overtry-button
api-key="pk_try_…"
category="furniture"
product-image="https://shop.example/images/sofa.jpg"
product-name="Sofa Milano"
dimensions="220 x 90 x 85 cm"></overtry-button>Sin product-image, el botón usa el og:image de la página, que la mayoría de las plantillas de tienda ya fijan en la foto del producto.
3. Atributos del botón
Solo api-key es obligatorio. El resto mejora el resultado o cambia el comportamiento del botón.
api-key- La clave de su tienda en el panel (pk_try_…). Obligatoria.
category- Qué es el producto. Decide cómo funciona la prueba: vea las categorías más abajo. Por defecto: furniture.
product-image- La foto del producto (https). Debe venir de la dirección de su tienda o de una dirección indicada en «Product images from». Por defecto: el og:image de la página.
product-name- El nombre del producto, visible en la ventana de prueba. También mejora el resultado.
dimensions- El tamaño real, por ejemplo «220 x 90 x 85 cm». Los productos aparecen en la habitación a la escala correcta.
variants- Colores o estilos del mismo producto, como lista: name, image y, para la muestra, color. El cliente cambia entre ellos debajo del resultado.
variants-preload- Prepara todas las variantes justo después de la primera, para cambiar de color sin esperar. Desactivado por defecto: solo se preparan los colores que abre el cliente.
mode="exact"- Paredes y suelos: dibuja su dibujo exacto en la pared o el suelo del cliente en lugar de una imagen de IA. El cliente puede mover las esquinas y cambiar el tamaño del dibujo.
texture- Paredes y suelos en modo exacto: una imagen de muestra aparte, si product-image muestra un ambiente y no el material.
texture-width-cm- Cuántos centímetros reales cubre la imagen de la textura, para que el dibujo tenga el tamaño correcto. Por defecto: papel pintado 53, azulejo 30, suelo 120, baldosa 60.
color- Pintura: el color, por ejemplo «#d8cfc4». La pintura indicada solo con un color usa el modo exacto.
choices="off"- Productos en una habitación: omite la pregunta de cómo colocar el producto (contra la pared, de lado, en una esquina) y dónde.
lang- ka, en, es o fr. Por defecto: el idioma de la página (/es/ en la dirección, o <html lang>); si no, inglés.
label- El texto del botón, en lugar de «Pruébalo».
qr="off"- En un ordenador la ventana ofrece un código QR para continuar en el móvil. Esto lo desactiva.
qr-url- Adónde lleva el código QR. Por defecto: la misma ficha de producto.
id- Con varios botones en una página, vincula el código QR a este botón.
<overtry-button api-key="pk_try_…" category="apparel"
product-image="https://shop.example/images/zip-red.jpg"
variants='[
{"name": "Red", "image": "https://shop.example/images/zip-red.jpg", "color": "#7b1e2b"},
{"name": "Navy", "image": "https://shop.example/images/zip-navy.jpg", "color": "#1f2a44"}
]'></overtry-button>El botón puede adoptar el estilo de su tienda: aplíquelo desde su hoja de estilos con overtry-button::part(button).
overtry-button::part(button) { background: #111; color: #fff; border-radius: 0; }4. Categorías
Ponga en category uno de estos valores. Cada grupo funciona a su manera.
En la habitación
furniture, decor, lighting, appliance, electronics
El cliente fotografía su habitación y luego arrastra y gira una silla de muestra hasta donde debe ir el producto. El producto aparece allí, a la escala que da dimensions.
Paredes y suelos
wallpaper, paint, wall_tile, flooring, floor_tile
El cliente fotografía una pared o un suelo y se cubre con su producto. Con mode="exact" el dibujo se reproduce con exactitud y el cliente puede probar todos los colores en la misma foto.
En la persona
apparel, shoes, bag, hat, jewelry, eyewear, watch
El cliente se hace una foto y ve el producto puesto. El color que muestra la página empieza al instante; cada uno de los demás se prepara cuando el cliente lo abre (todos a la vez con variants-preload).
5. Imágenes de producto
Paredes y suelos
Una muestra plana fotografiada de frente y recortada al material: sin borde blanco, marco ni ambiente, porque todo lo que haya en la imagen se repite. Al menos 800 píxeles de ancho. Indique en texture-width-cm el ancho real que muestra la imagen.
Ropa y accesorios
Solo el producto, de frente, sobre un fondo liso. Una foto con modelo también sirve, pero el producto solo da el resultado más fiel.
Productos en una habitación
El producto entero sobre un fondo liso, sin cortes. Añada dimensions para que salga al tamaño correcto.
Todas las imágenes
JPEG, PNG o WebP, hasta 10 MB, por https, desde la dirección de su tienda o una indicada en «Product images from».
6. Qué cuenta como imagen
- Una imagen es un resultado terminado que ve el cliente: un color de una prueba.
- Cada color que abre el cliente es una imagen. Con variants-preload se preparan todos a la vez: la prueba de un producto con 5 colores son entonces 5 imágenes.
- Paredes y suelos en modo exacto: una foto es una imagen, pruebe el cliente los colores que pruebe.
- Los intentos fallidos no cuentan.
- La cuota es mensual y se renueva el día 1 (UTC). Un límite por hora (el 2 % del volumen mensual, al menos 20 por hora) evita que una clave mal usada lo gaste todo de golpe.
WordPress y WooCommerce
Añada esto al functions.php de su tema hijo o a un plugin de fragmentos de código. Carga el script en las fichas de producto y pone el botón antes de «Añadir al carrito», con la foto y el nombre del propio producto.
<?php
// Overtry on WooCommerce product pages
add_action('wp_head', function () {
if (is_product()) echo '<script type="module" src="https://lamp.ar/overtry.js"></script>';
});
add_action('woocommerce_single_product_summary', function () {
global $product;
$category = has_term('wallpaper', 'product_cat', $product->get_id()) ? 'wallpaper' : 'furniture';
printf(
'<overtry-button api-key="%s" category="%s" product-image="%s" product-name="%s"></overtry-button>',
'pk_try_…',
$category,
esc_url(wp_get_attachment_image_url($product->get_image_id(), 'large')),
esc_attr($product->get_name())
);
}, 25); // before "Add to cart" (30)Para una sola página basta un bloque HTML personalizado con el código. Las fotos de su biblioteca de medios vienen de la dirección de su tienda, que ya está permitida; con un CDN de imágenes, añada su dirección en el panel.
Shopify
En Tienda online → Temas → Personalizar, abra la plantilla de producto, añada un bloque «Liquid personalizado» donde deba ir el botón (por ejemplo bajo los botones de compra) y pegue esto.
<script type="module" src="https://lamp.ar/overtry.js"></script>
<overtry-button
api-key="pk_try_…"
category="apparel"
product-image="https:{{ product.featured_image | image_url: width: 1600 }}"
product-name="{{ product.title | escape }}"></overtry-button>Shopify sirve las imágenes de producto desde la dirección de su tienda o desde cdn.shopify.com. Si ve product_image_host_not_allowed, añada cdn.shopify.com en «Product images from». Para una categoría distinta por producto, elíjala en Liquid a partir de product.type.
Para desarrolladores: eventos
El botón emite eventos que puede enviar a su analítica: overtry:open, overtry:result, overtry:variant y overtry:error (detail.code contiene el código de error).
document.addEventListener("overtry:result", (e) => {
// e.detail.category: send it to your analytics
});
document.addEventListener("overtry:error", (e) => console.warn("Overtry", e.detail.code));Resolución de problemas
Cuando algo falla, el cliente ve un mensaje breve y el código de error se escribe en la consola del navegador («[overtry] error: …») y se envía con el evento overtry:error. Esto es lo que significa cada uno.
origin_not_allowed- La dirección de la página no está en la lista de su tienda. En el panel, añádala en Overtry → su tienda → Allowed addresses. https://shop.es y https://test.shop.es son direcciones distintas.
product_image_host_not_allowed- La foto del producto viene de una dirección no permitida. Añada esa dirección (por ejemplo cdn.shop.es) en «Product images from».
product_image_must_be_https- La dirección de la foto empieza por http. Use su dirección https.
product_image_required- No hay product-image y la página no tiene og:image. Indique product-image.
quota- Las imágenes de este mes se han agotado. El botón vuelve a funcionar el día 1; para más enseguida, escriba a hello@lamp.ar.
not_enabled- Overtry no está activado para su empresa. Escríbanos.
site_paused- La tienda está en pausa en el panel. Reanúdela allí.
invalid_key- La clave es incorrecta o se ha sustituido. Cópiela de nuevo del panel.
rate_limited- Demasiadas pruebas en poco tiempo. Espere un minuto; si pasa a menudo, escríbanos.
unknown_category- category tiene un valor que no está en la lista anterior.
texture_unavailable- El modo exacto no pudo cargar la imagen de la textura. Compruebe que su dirección abre una imagen de 10 MB como máximo.
¿Necesita ayuda?
Envíenos la dirección de la ficha de producto y el código que ve, y lo revisaremos.
Escríbanos