Une ligne à coller, sur votre site.

Avant de commencer

• Votre identifiant d’atelier, par exemple atelier-dupont-k3f9. Il figure dans l’email de bienvenue et sur la page de confirmation de commande.
• L’adresse qui reçoit les demandes : celle déclarée pour votre atelier à l’activation. Le module la lit dans sa configuration, vous n’avez pas à l’écrire dans le code.
• L’adresse de votre site (par exemple https://www.votre-atelier.ch) : les demandes ne sont acceptées que depuis les sites déclarés pour votre atelier. Une adresse manque ? Répondez à l’email de bienvenue.

Le code à coller

Deux lignes : le script du module, puis la balise qui affiche le module à l’endroit où vous la placez.

<script src="https://plumetis.kaito.global/module/plumetis.js" defer></script>
<plumetis-studio workshop="votre-identifiant"></plumetis-studio>

Remplacez seulement votre-identifiant par votre identifiant d’atelier. Le script trouve tout seul le service Plumetis et la configuration de votre atelier (adresse de réception, couleurs, catalogue, lien de contact). Le module s’adapte à la largeur de la zone (de 340 à 1200 px) et vit dans son propre espace : les styles de votre thème ne le déforment pas.

Shopify

1. Dans l’administration Shopify : Boutique en ligne → Thèmes → Personnaliser.
2. Ouvrez la page où le module doit apparaître, par exemple une page « Broderie personnalisée ».
3. Ajouter une section → Liquid personnalisé.
4. Collez le code, puis Enregistrer.

Déclarez l’adresse de votre boutique, et aussi son adresse en .myshopify.com si vous l’utilisez.

WordPress et WooCommerce

1. Ouvrez la page dans l’éditeur de blocs.
2. Ajoutez un bloc HTML personnalisé (avec Elementor ou un autre constructeur : le widget « HTML »).
3. Collez le code, puis Mettre à jour.

Il faut un compte administrateur pour enregistrer un script. Sur WordPress.com, selon votre formule, l’ajout de scripts peut exiger un abonnement supérieur ; sinon, utilisez l’iframe.

Wix

Wix isole le code collé dans un élément dont la hauteur se règle dans l’éditeur, à part pour l’ordinateur et pour le mobile. Ce code remplit l’élément, quelle que soit sa hauteur :

<style>html,body{margin:0;height:100%;overflow:hidden}</style>
<iframe src="https://plumetis.kaito.global/embed?workshop=votre-identifiant"
  title="Prévisualisation broderie" style="display:block;width:100%;height:100%;border:0"></iframe>

1. Dans l’éditeur : Ajouter → Intégrer du code → Intégrer HTML.
2. Choisissez l’option Code et collez le code ci-dessus.
3. Étirez l’élément sur toute la largeur et donnez-lui la hauteur de l’étape la plus haute : 1900 px dans la version ordinateur de l’éditeur, 2550 px dans la version mobile. Le module tient alors sans défilement interne. Puis publiez, et vérifiez sur un téléphone.

Un élément plus court reste utilisable : le module défile dans son cadre, sans rien couper, et pendant la saisie, la bande « Aperçu du motif » reste en haut du cadre. Selon votre formule Wix, l’intégration de code peut exiger un abonnement payant.

Squarespace

1. Modifiez la page, puis Ajouter un bloc → Code.
2. Collez le code et vérifiez que l’option qui affiche le code source comme du texte est désactivée.
3. Enregistrez, puis publiez.

Selon votre formule Squarespace, les scripts dans un bloc Code peuvent exiger un abonnement supérieur ; sinon, utilisez l’iframe.

Webflow

1. Dans le Designer : panneau Ajouter → Code Embed.
2. Collez le code, puis Enregistrer et fermer.
3. Publiez le site : le module s’affiche sur le site publié, pas dans le Designer.

Le code personnalisé dépend de la formule de votre site Webflow.

Site HTML, PrestaShop et autres outils

Collez les deux lignes dans le HTML de la page, à l’endroit où le module doit apparaître. Sur PrestaShop, utilisez un bloc de contenu HTML de votre thème ou d’un module dédié. Si l’outil retire les scripts, passez à l’iframe.

Votre site a une politique de sécurité (en-tête Content-Security-Policy) ? Autorisez le dossier https://plumetis.kaito.global/module/ dans script-src, pas seulement plumetis.js : le module y charge, au besoin, la préparation des fichiers déposés, le contrôle des SVG et le brouillon local. Sans eux, le parcours reste complet : un fichier déposé part en version image, sans retrait du fond, et le client est averti de ce qui change pour lui.

Sans script : l’iframe

Pour les outils qui n’acceptent pas le script du module : le module dans un cadre. Si l’outil accepte un petit script à côté du cadre, prenez l’iframe à hauteur automatique : le cadre suit le module, étape par étape, sans vide ni défilement dans le cadre. Sur Wix, prenez le code Wix.

Iframe à hauteur automatique (recommandée)

Ce code ajuste la hauteur du cadre au module, étape par étape : le cadre envoie sa hauteur, la page ne l’accepte que de Plumetis et la borne entre 400 et 4000 px.

<iframe id="plumetis-studio" src="https://plumetis.kaito.global/embed?workshop=votre-identifiant"
  title="Prévisualisation broderie" style="width:100%;height:1450px;border:0" loading="lazy"></iframe>
<script>
(function () {
  var frame = document.getElementById('plumetis-studio');
  var origins = ['https://plumetis.kaito.global'];
  window.addEventListener('message', function (e) {
    if (origins.indexOf(e.origin) < 0 || e.source !== frame.contentWindow) return;
    var d = e.data;
    if (!d || d.type !== 'plumetis:height') return;
    var h = Math.round(Number(d.height));
    if (h > 0) frame.style.height = Math.min(4000, Math.max(400, h)) + 'px';
  });
})();
</script>

Iframe à hauteur fixe, sans aucun script

Sa hauteur ne suit pas le contenu : réglez-la d’après la largeur de la page (tableau ci-dessous). Plus courte, le module défile dans son cadre, sans rien couper.

<iframe src="https://plumetis.kaito.global/embed?workshop=votre-identifiant"
  title="Prévisualisation broderie" style="width:100%;height:1700px;border:0" loading="lazy"></iframe>

Ou, si l’outil demande seulement une adresse :

https://plumetis.kaito.global/embed?workshop=votre-identifiant

Hauteur du cadre selon l’écran

L’étape la plus haute (l’étape 3, avec ses messages d’erreur), mesurée, plus une marge pour Safari. Le module est plus haut sur téléphone et sur tablette, où ses colonnes passent l’une sous l’autre ou se resserrent :

Les paramètres email, theme, accent et color s’ajoutent aussi à l’adresse, par exemple &theme=dark.

Les attributs

Personnaliser l’apparence

Variables CSS publiques, à définir sur l’élément ou sur un parent, dans la feuille de style de votre thème :

plumetis-studio {
  --plm-accent: #946010;   /* boutons, sélection, focus */
  --plm-bg: #fbf9f6;       /* fond du module */
  --plm-surface: #ffffff;  /* cartes, champs */
  --plm-text: #1c1a17;
  --plm-muted: #6b6258;
  --plm-radius: 14px;
  --plm-font: "Votre police", system-ui, sans-serif;
  --plm-sticky-top: 12px;  /* hauteur de votre en-tête fixe + 12px */
}

Si le service est indisponible

Le module reste affiché : vos clients composent leur broderie et voient l’aperçu à plat. Si les aperçus brodés sont momentanément indisponibles, ou si votre quota du mois est atteint, la demande part quand même. Si l’envoi ne répond pas, le module propose au client de vous écrire, avec un récapitulatif prérempli vers l’adresse de votre atelier. La page Statut indique l’état du service.

Tester mon installation

1. Le module s’affiche sur la page publiée, sur ordinateur et sur téléphone.
2. Écrivez un texte : l’aperçu à plat se met à jour sur le t-⁠shirt.
3. Lancez un rendu brodé : il arrive en 20 à 60 secondes.
4. Envoyez une demande à votre nom : vous la recevez comme atelier, et l’accusé de réception arrive à l’adresse saisie.
5. Un message « origine refusée » ou « site non autorisé » ? Écrivez-⁠nous l’adresse exacte de votre site.

Un souci ? Écrivez-⁠nous, avec l’adresse de la page et une capture d’écran.