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). 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

1. Dans l’éditeur : Ajouter → Intégrer du code → Intégrer HTML.
2. Choisissez l’option Code et collez le code iframe à hauteur fixe ci-dessous.
3. Étirez l’élément sur toute la largeur et donnez-lui la hauteur du tableau des hauteurs : environ 1350 px dans la version ordinateur, 2200 px dans la version mobile de l’éditeur. Puis publiez.

Wix isole les blocs de code dans un cadre séparé, dont la hauteur se règle dans l’éditeur : l’iframe à hauteur fixe est la méthode fiable. 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.

Sans script : l’iframe

Pour les outils qui n’acceptent pas les scripts (ou Wix) : le module dans un cadre. Sa hauteur ne suit pas le contenu ; réglez-la d’après la largeur de la page (tableau ci-dessous), sinon le client fait défiler le cadre à l’intérieur de la page.

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

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

Hauteur du cadre selon l’écran

Le module est plus haut sur téléphone, où ses colonnes passent l’une sous l’autre :

Iframe à hauteur automatique

Si votre outil accepte un petit script à côté de l’iframe, 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>

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 30 à 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.