Code du widget d’image pour boutiques en ligne : maquettes et idées visuelles pour vos clients

Les clients ont souvent du mal à se représenter le résultat : une impression personnalisée, la couleur d’une pièce, une idée de cadeau. Un widget d’image IA leur permet de le décrire et de voir un visuel généré en quelques secondes, sans quitter votre boutique. Comme le widget est en marque blanche, il fait partie intégrante de votre boutique et ne ressemble pas à un outil tiers.

Des idées qui fonctionnent en boutique

• Impressions et produits personnalisés : « un dessin minimaliste de montagnes au trait pour un mug » donne au client un point de départ pour en discuter avec vous.
• Intérieur et décoration : les visiteurs esquissent une ambiance (« une chambre scandinave apaisante en vert sauge ») avant de parcourir les produits assortis.
• Idées cadeaux : un visuel rapide aide à choisir quoi commander.

Indiquez clairement sur la page que les images sont des concepts générés par IA, et non des photos d’un produit que vous expédiez. Les attentes restent ainsi réalistes et vous évitez les retours.

Ajoutez-le à une fiche produit ou à une landing page

Créez un widget Image dans Widgets, enregistrez-le et copiez le code :

<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>

La plupart des créateurs de boutique acceptent un bloc HTML personnalisé. Collez-y la balise, ou affichez le widget dans un élément précis avec data-target. Le widget vit dans son propre Shadow DOM : le CSS de votre thème et le widget n’interfèrent donc jamais.

Donnez-lui l’allure de votre boutique

Le widget d’image ne porte ni logo ni mention « powered by ». Rédigez le titre et le bouton avec le ton de votre boutique, choisissez la couleur d’accent de votre marque et un thème assorti à vos pages. Utilisez le texte du champ pour montrer un bon exemple de prompt : les clients reproduisent ce qu’ils voient.

Gardez des dépenses prévisibles

Une boutique peut connaître des pics d’activité : fixez donc des limites avant une campagne.

• Faites fonctionner le widget avec une clé API dédiée. Dans l’éditeur, la dernière option de la liste des clés est Créer une nouvelle clé API. Donnez à cette clé une limite de dépense quotidienne et limitez-la au modèle d’image choisi.
• Ajoutez aussi une limite de dépense quotidienne sur le widget lui-même.
• Dans Paramètres, Contrôles des widgets, définissez combien de requêtes un visiteur peut envoyer par jour.

Consommation affiche les requêtes du widget par site et par widget, pour vérifier si l’outil est rentable.

N’autorisez que le domaine de votre boutique

Indiquez le domaine de votre boutique dans Paramètres, Sites du widget. Un domaine couvre aussi ses sous-domaines : example.com couvre donc www.example.com.

Essayez l’éditeur sur la page des widgets pour voir à quoi ressemblerait un widget d’image dans votre boutique.