Overtry · Guide
Guide d’installation
Overtry ajoute un bouton « Essayer » à vos fiches produit. Le client prend en photo sa pièce ou lui-même et y voit votre produit. Ce guide couvre tout, de la clé du site à WordPress et Shopify.
1. Obtenez la clé du site
Connectez-vous
Connectez-vous sur lamp.ar/login et créez votre entreprise. Chaque entreprise dispose de 20 images gratuites par mois ; connectez PayPal dans le tableau de bord pour continuer au-delà.
Ajoutez votre boutique
Dans le tableau de bord, rubrique Overtry, choisissez « Add shop ». Saisissez l’adresse de votre boutique (par exemple shop.fr : la version avec www est ajoutée automatiquement). Si vos photos produit viennent d’une autre adresse, comme un CDN d’images, saisissez-la dans « Product images from ». Sinon, l’adresse de la boutique est utilisée.
Copiez le code
La boutique reçoit une clé (pk_try_…) et un code à intégrer. Vous pourrez ajouter d’autres adresses ensuite, comme un site de test : le bouton ne fonctionne que sur les adresses listées.
2. Ajoutez le bouton
Placez le script une fois sur la page et le bouton là où il doit apparaître, généralement à côté de « Ajouter au panier ».
<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>Sans product-image, le bouton utilise l’og:image de la page, que la plupart des thèmes de boutique règlent déjà sur la photo du produit.
3. Attributs du bouton
Seul api-key est obligatoire. Le reste améliore le résultat ou change le comportement du bouton.
api-key- La clé de votre boutique, dans le tableau de bord (pk_try_…). Obligatoire.
category- Ce qu’est le produit. Elle décide du fonctionnement de l’essayage : voir les catégories plus bas. Par défaut : furniture.
product-image- La photo du produit (https). Elle doit venir de l’adresse de votre boutique ou d’une adresse indiquée dans « Product images from ». Par défaut : l’og:image de la page.
product-name- Le nom du produit, affiché dans la fenêtre d’essayage. Il améliore aussi le résultat.
dimensions- La taille réelle, par exemple « 220 x 90 x 85 cm ». Les produits apparaissent dans la pièce à la bonne échelle.
variants- Couleurs ou styles du même produit, sous forme de liste : name, image et, pour la pastille, color. Le client passe de l’une à l’autre sous le résultat.
variants-preload- Prépare toutes les variantes juste après la première, pour changer de couleur sans attendre. Désactivé par défaut : seules les couleurs ouvertes par le client sont préparées.
mode="exact"- Murs et sols : dessine votre motif exact sur le mur ou le sol du client au lieu d’une image d’IA. Le client peut déplacer les coins et changer la taille du motif.
texture- Murs et sols en mode exact : une image d’échantillon à part, si product-image montre une pièce et non le matériau.
texture-width-cm- Combien de centimètres réels couvre l’image de la texture, pour que le motif ait la bonne taille. Par défaut : papier peint 53, carrelage mural 30, sol 120, carrelage de sol 60.
color- Peinture : la couleur, par exemple « #d8cfc4 ». Une peinture donnée seulement par sa couleur utilise le mode exact.
choices="off"- Produits dans une pièce : ne demande plus comment placer le produit (contre le mur, de côté, dans un coin) ni où.
lang- ka, en, es ou fr. Par défaut : la langue de la page (/fr/ dans l’adresse, ou <html lang>), sinon l’anglais.
label- Le texte du bouton, à la place de « Essayer ».
qr="off"- Sur ordinateur, la fenêtre propose un QR code pour continuer sur le téléphone. Ceci le désactive.
qr-url- Où mène le QR code. Par défaut : la même fiche produit.
id- Avec plusieurs boutons sur une page, associe le QR code à ce bouton.
<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>Le bouton peut prendre le style de votre boutique : stylez-le depuis votre feuille de style avec overtry-button::part(button).
overtry-button::part(button) { background: #111; color: #fff; border-radius: 0; }4. Catégories
Donnez à category l’une de ces valeurs. Chaque groupe fonctionne à sa façon.
Dans la pièce
furniture, decor, lighting, appliance, electronics
Le client photographie sa pièce, puis déplace et tourne une chaise témoin jusqu’à l’endroit voulu. Le produit y apparaît, à l’échelle donnée par dimensions.
Murs et sols
wallpaper, paint, wall_tile, flooring, floor_tile
Le client photographie un mur ou un sol, qui se couvre de votre produit. Avec mode="exact", le motif est reproduit exactement et le client peut essayer toutes les couleurs sur la même photo.
Sur la personne
apparel, shoes, bag, hat, jewelry, eyewear, watch
Le client se prend en photo et voit le produit porté. La couleur affichée sur la page démarre aussitôt ; chaque autre couleur est préparée quand le client l’ouvre (toutes ensemble avec variants-preload).
5. Images produit
Murs et sols
Un échantillon à plat, photographié de face et recadré sur le matériau : sans bordure blanche, cadre ni décor, car tout ce qui est dans l’image se répète. Au moins 800 pixels de large. Indiquez dans texture-width-cm la largeur réelle que montre l’image.
Vêtements et accessoires
Le produit seul, de face, sur un fond uni. Une photo portée fonctionne aussi, mais le produit seul donne le résultat le plus fidèle.
Produits dans une pièce
Le produit entier sur un fond uni, sans rien de coupé. Ajoutez dimensions pour qu’il apparaisse à la bonne taille.
Toutes les images
JPEG, PNG ou WebP, jusqu’à 10 Mo, en https, depuis l’adresse de votre boutique ou une adresse indiquée dans « Product images from ».
6. Ce qui compte comme une image
- Une image est un résultat fini que voit le client : une couleur d’un essayage.
- Chaque couleur ouverte par le client est une image. Avec variants-preload, toutes sont préparées ensemble : l’essayage d’un produit en 5 couleurs fait alors 5 images.
- Murs et sols en mode exact : une photo compte pour une image, quelles que soient les couleurs essayées.
- Les tentatives échouées ne comptent pas.
- Le volume est mensuel et repart le 1er (UTC). Une limite horaire (2 % du volume mensuel, au moins 20 par heure) empêche une clé détournée de tout consommer d’un coup.
WordPress et WooCommerce
Ajoutez ceci au functions.php de votre thème enfant, ou à une extension d’extraits de code. Le script se charge sur les fiches produit et le bouton s’affiche avant « Ajouter au panier », avec la photo et le nom du produit.
<?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)Pour une seule page, un bloc HTML personnalisé avec le code suffit. Les photos de votre médiathèque viennent de l’adresse de votre boutique, déjà autorisée ; avec un CDN d’images, ajoutez son adresse dans le tableau de bord.
Shopify
Dans Boutique en ligne → Thèmes → Personnaliser, ouvrez le modèle de produit, ajoutez un bloc « Liquid personnalisé » là où le bouton doit apparaître (par exemple sous les boutons d’achat) et collez ceci.
<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 sert les images produit depuis l’adresse de votre boutique ou depuis cdn.shopify.com. Si vous voyez product_image_host_not_allowed, ajoutez cdn.shopify.com dans « Product images from ». Pour une catégorie différente selon le produit, choisissez-la en Liquid à partir de product.type.
Pour les développeurs : événements
Le bouton émet des événements que vous pouvez transmettre à votre outil de mesure d’audience : overtry:open, overtry:result, overtry:variant et overtry:error (detail.code contient le code d’erreur).
document.addEventListener("overtry:result", (e) => {
// e.detail.category: send it to your analytics
});
document.addEventListener("overtry:error", (e) => console.warn("Overtry", e.detail.code));Dépannage
Quand quelque chose ne va pas, le client voit un court message, et le code d’erreur est écrit dans la console du navigateur (« [overtry] error: … ») et transmis avec l’événement overtry:error. Voici ce que signifie chacun.
origin_not_allowed- L’adresse de la page n’est pas dans la liste de votre boutique. Dans le tableau de bord, ajoutez-la dans Overtry → votre boutique → Allowed addresses. https://shop.fr et https://test.shop.fr sont des adresses différentes.
product_image_host_not_allowed- La photo du produit vient d’une adresse non autorisée. Ajoutez cette adresse (par exemple cdn.shop.fr) dans « Product images from ».
product_image_must_be_https- L’adresse de la photo commence par http. Utilisez son adresse https.
product_image_required- Il n’y a pas de product-image et la page n’a pas d’og:image. Indiquez product-image.
quota- Les images de ce mois sont épuisées : les 20 gratuites sans PayPal, ou votre plafond de dépenses mensuel avec PayPal. Le bouton refonctionne le 1er, ou tout de suite si vous connectez PayPal ou relevez le plafond dans le tableau de bord.
not_enabled- Overtry n’est pas activé pour votre entreprise. Écrivez-nous.
site_paused- La boutique est en pause dans le tableau de bord. Réactivez-la là.
invalid_key- La clé est erronée ou a été remplacée. Copiez-la de nouveau depuis le tableau de bord.
rate_limited- Trop d’essayages en peu de temps. Attendez une minute ; si cela arrive souvent, écrivez-nous.
unknown_category- category a une valeur qui n’est pas dans la liste ci-dessus.
texture_unavailable- Le mode exact n’a pas pu charger l’image de la texture. Vérifiez que son adresse ouvre une image de 10 Mo au plus.
Besoin d’aide ?
Envoyez-nous l’adresse de la fiche produit et le code affiché, et nous regarderons.
Écrivez-nous