Créer le code d'un module Code avec un assistant IA (ChatGPT, Claude, Gemini…)

Le module Code permet d'ajouter à une page votre propre code HTML, CSS et JavaScript : une animation, un titre animé, un calculateur, une frise interactive, un compte à rebours personnalisé… Un assistant IA (ChatGPT, Claude, Gemini, Mistral…) peut écrire ce code pour vous, à condition de lui expliquer d'abord comment fonctionne le module Code de SiteW. Cette FAQ vous donne les instructions à lui transmettre, puis la marche à suivre dans l'éditeur.

Cette FAQ ne concerne pas les codes fournis par un service tiers (widget météo, chat, avis clients, agenda externe, publicité…). Ces codes se collent tels quels, sans les modifier, comme décrit dans l'aide du module Code.

Le module Code est disponible à partir de la formule Vitrine Avancée.

À quoi sert (et ne sert pas) un module Code créé par IA ?

Le module Code est surtout adapté à deux familles de besoins :

Le design : animations, effets d'apparition, titres animés, fonds décoratifs, frises, schémas, organigrammes, badges…
L'interaction sans envoi de données : calculateur de prix ou de devis indicatif, convertisseur, simulateur, quiz avec résultat immédiat, compte à rebours, onglets ou accordéons personnalisés…

Ce qu'il ne peut pas faire, car aucune base de données ni aucun traitement serveur n'est associé au module :

enregistrer ou envoyer des données saisies par le visiteur (utilisez le module Formulaire) ;
encaisser un paiement (module Boutique ou Paiement) ;
gérer une connexion, des membres ou un contenu réservé (module Membres) ;
lire ou modifier le contenu des autres modules et pages du site.

Un calculateur réalisé en module Code affiche donc un résultat à l'écran, mais ne le transmet pas. Si le visiteur doit vous envoyer ce résultat, ajoutez un module Formulaire ou un bouton vers la page de contact à côté.

Avant de coder : les règles à donner à l'assistant

Les assistants IA connaissent le HTML, mais pas les particularités du module Code de SiteW (cadre de taille fixe, deux modes d'intégration, affichage mobile…). Sans ces informations, le code obtenu s'affiche mal sur mobile, casse au changement de page ou n'utilise pas les bons réglages.

Commencez donc toujours votre conversation en collant à l'assistant le lien de cette FAQ, ou mieux, le contenu complet du bloc d'instructions ci-dessous. Décrivez ensuite votre besoin, et joignez :

l'adresse de la page de votre site où le module sera placé (l'assistant y lira vos couleurs et polices) ;
ce que le module doit afficher ou calculer, avec les textes exacts ;
la largeur disponible (pleine largeur de page, moitié, colonne…) ;
les adresses des fichiers à utiliser (voir la section sur les images plus bas).

Lien de cette FAQ à donner à l'assistant

Le plus simple est de coller ce message en début de conversation (l'assistant lit la page et en extrait les règles) :

Je veux créer un module Code pour mon site SiteW. Lis d'abord les règles de cette page et applique-les strictement : https://www.sitew.com/FAQ-sur-la-realisation-de-site/t6-Creer-le-code-d-un-module-Code-avec-un-assistant-IA-ChatGPT-Claude-Gemini
Mon site : [adresse de la page]
Mon besoin : [description]

Si votre assistant ne peut pas ouvrir de lien, copiez-collez à la place le bloc d'instructions ci-dessous.

Bloc d'instructions à copier-coller dans l'assistant

INSTRUCTIONS POUR GÉNÉRER LE CODE D'UN MODULE CODE SITEW

Tu vas écrire du code pour le module « Code » de SiteW (créateur de sites). Respecte strictement ces règles ; elles décrivent le fonctionnement réel du module.

1. LE MODULE EST UN CADRE DE TAILLE FIXE
- Le module est un rectangle dont la largeur et la hauteur sont fixées par l'utilisateur dans l'éditeur, en pixels. SiteW ne mesure jamais la hauteur du contenu : le contenu ne fait pas grandir le module. Ce qui dépasse est coupé (mode iframe) ou déborde sur les modules voisins (mode direct sans « Masquer le débordement »).
- Conçois donc un contenu dont la hauteur est prévisible, ou qui remplit le cadre (hauteur 100 % avec défilement interne si besoin), et indique à l'utilisateur la taille à donner au module sur ordinateur (largeur × hauteur en px) ET la hauteur à régler sur mobile.
- Le code est un FRAGMENT HTML : pas de <!DOCTYPE>, <html>, <head> ni <body>. Mets le <style> au début, le HTML ensuite, le <script> à la fin, le tout dans un seul bloc de code.
- Taille maximale : 64 000 octets. Pas d'images encodées en base64, pas de bibliothèque collée dans le code. Si le code est trop long, propose de le découper en plusieurs modules.
- Aucune base de données, aucun serveur, aucun envoi de formulaire : les données (listes, tarifs, textes) sont écrites dans le code, dans une « ZONE À MODIFIER » en tête du script (variables simples : textes, couleurs, liens, valeurs). Le résultat d'un calcul s'affiche à l'écran, il n'est transmis nulle part.

2. UTILISE LES MODULES SITEW QUAND C'EST POSSIBLE
- SiteW propose des modules natifs : Texte, Image, Galerie, Carrousel, Icône, Bouton, Bande, Forme, Séparateur, Titre, Formulaire, FAQ, Carte, Vidéo, Calendrier, Compte à rebours, Boutique, Blog. Ces modules sont responsives, modifiables sans code, indexés par Google et optimisés (images en plusieurs tailles).
- Avant d'écrire du code, propose systématiquement les modules natifs pour tout ce qui peut l'être (titres, paragraphes, images, logos, boutons, listes, formulaires). Réserve le module Code à la partie réellement impossible autrement (animation, calcul, interaction).
- Quand le besoin contient plusieurs éléments indépendants (ex. un titre animé + un calculateur + une frise), propose PLUSIEURS modules Code, un par élément, chacun autonome et dimensionné séparément, plutôt qu'un seul gros module. Les modules ne partagent pas de code entre eux : chaque module doit être complet.

3. LES DEUX MODES D'INTÉGRATION : DIS À L'UTILISATEUR LEQUEL CHOISIR ET QUELLES OPTIONS COCHER
Mode A — IFRAME (réglage par défaut, aucune option à cocher). Le code est affiché dans une page isolée (iframe) dimensionnée exactement à la taille du module.
  - Avantages : aucune interaction avec le reste du site, un bug reste confiné, les requêtes @media se basent sur la largeur du module.
  - Contraintes : le fond est transparent sauf si tu en définis un ; les polices et couleurs du site ne sont pas héritées (déclare-les, Google Fonts via <link> https autorisé) ; position:fixed est inutile (il se limite à l'iframe) ; vh/vw se réfèrent à l'iframe ; tout lien doit avoir target="_top" avec une adresse absolue (https://…), sinon la page s'ouvre dans le cadre ; le contenu n'est pas indexé par Google ; dans l'éditeur, l'aperçu ne se met à jour qu'après « Sauvegarder ».
  - À utiliser pour : animations autonomes, calculateurs, quiz, widgets qui n'ont pas besoin de toucher à la page.
Mode B — INTÉGRATION DIRECTE (option « Intégration directe » cochée). Le code est inséré dans la page du site.
  - À utiliser seulement si le code doit interagir avec la page : hériter des polices/couleurs du site (font-family: inherit), texte à indexer, élément qui doit déborder du cadre (menu déroulant, info-bulle), effet lié au défilement de la page, élément flottant.
  - Règles obligatoires en mode direct :
    a) Préfixe unique sur toutes les classes et identifiants CSS (ex. « mc-calc- ») ; jamais de sélecteur global (body, html, *, h1, p, a, img, .section…), jamais de style sur les balises nues.
    b) Tout le JavaScript dans une fonction immédiatement invoquée (function(){ … })(). Aucun const, let, var ou function au niveau global : la page du site change de page SANS rechargement et ré-exécute le script à chaque retour sur la page ; une constante globale redéclarée provoque « Identifier has already been declared » et le module cesse de fonctionner.
    c) Le script doit être ré-exécutable : retrouve ses éléments par une classe préfixée, n'ajoute rien à <body> ou <head> sans vérifier que ce n'est pas déjà fait, arrête ses setInterval / requestAnimationFrame / écouteurs resize et scroll quand ses éléments ne sont plus dans la page.
    d) N'attends pas DOMContentLoaded ni l'événement load : ils ont déjà eu lieu quand le code s'exécute. Exécute directement, ou teste document.readyState.
    e) Entoure le code d'un try/catch : une erreur JavaScript non gérée peut bloquer l'affichage du site entier.
    f) Ne modifie jamais les éléments du site (en-tête, menu, sections, autres modules) : leurs classes sont internes à SiteW et peuvent changer.
    g) Pas de bibliothèque externe (jQuery, etc.) : le site en charge déjà, un doublon crée des conflits. JavaScript natif uniquement.
    h) Pas de document.write, pas de <base>, pas de <meta http-equiv>.
  - Option « Isolation du style » (cochée automatiquement avec l'intégration directe) : le code est placé dans un Shadow DOM, ses styles et ceux du site ne se mélangent pas. Utile pour du HTML/CSS sans script. À décocher si le code contient du JavaScript : dans un Shadow DOM, document.currentScript vaut null et document.querySelector / getElementById ne trouvent pas les éléments du module. Dans ce cas, le préfixe unique (règle a) assure l'isolation.
  - Option « Masquer le débordement » : décochée par défaut en mode direct. À cocher si le contenu doit rester dans le cadre ; à laisser décochée pour un menu déroulant, une info-bulle ou un effet qui sort du cadre.
  - Option « Désactiver la validation HTML » : à laisser décochée. Sans <script> dans le code, SiteW normalise le HTML (balises fermées, html/body retirés) : fournis du HTML valide.
Dans ta réponse, indique explicitement : le mode choisi, chaque option à cocher ou décocher, et pourquoi.

4. RESPONSIVE : RÈGLES OBLIGATOIRES
- Sur mobile (mode « Optimisation automatique » de SiteW, le plus courant), le module prend la largeur de la colonne mobile (environ 320 à 360 px) et garde PAR DÉFAUT LA HAUTEUR DE LA VUE ORDINATEUR. L'utilisateur peut régler une hauteur propre au mobile avec la poignée sous le module en vue mobile. Tu dois lui indiquer cette hauteur mobile.
- Le code doit s'afficher correctement à 320 px de large : largeurs en %, max-width: 100%, min-width: 0, flex-wrap ou grid avec repeat(auto-fit, minmax(…, 1fr)), aucune largeur fixe supérieure à 300 px, images avec max-width: 100% et height: auto, tailles de texte avec clamp(), pas de tableau large sans défilement horizontal.
- Soit la hauteur du contenu est maîtrisée aux deux largeurs (indique les deux valeurs : hauteur ordinateur et hauteur mobile), soit le contenu s'adapte au cadre (hauteur 100 %, défilement interne).
- Points de rupture : n'utilise pas @media (en mode direct, ils dépendent de la largeur de la fenêtre et non de celle du module). Utilise des container queries : container-type: inline-size sur l'enveloppe du module et @container (max-width: 600px) { … } ; ou, à défaut, un ResizeObserver sur l'enveloppe.
- Évite vh et 100vw : dans l'iframe, vh = hauteur du module ; en mode direct, 100vw crée un défilement horizontal.
- Ne propose pas de dupliquer le module en une version ordinateur et une version mobile : un seul module responsive, sauf impossibilité réelle (dans ce cas, SiteW permet de masquer un module sur un appareil).

5. IMAGES, FICHIERS, POLICES, LIENS
- Pour afficher des images, préfère les modules Image ou Galerie de SiteW (images servies en plusieurs tailles selon l'écran, chargement différé) : le module Code ne gère pas le srcset.
- Si le code doit vraiment contenir une image (fond, icône animée, sprite), demande à l'utilisateur l'adresse complète du fichier envoyé dans sa « Gestion des fichiers » SiteW (adresse en https://…) et place-la dans la ZONE À MODIFIER. Pas d'image hébergée sur un site tiers, pas de http://.
- Polices : mode direct = font-family: inherit pour reprendre celle du site ; mode iframe = déclarer la police (Google Fonts en https) ou une police système.
- Liens : adresses absolues des pages du site ; en mode iframe, target="_top" obligatoire.
- Aucune ressource en http:// (le site est en https).

6. QUALITÉ
- Animations : respecte prefers-reduced-motion, utilise transform/opacity et requestAnimationFrame, mets l'animation en pause quand le module n'est pas visible (IntersectionObserver).
- Accessibilité : contrastes suffisants, boutons réels (<button>), libellés, navigation clavier.
- Performance : pas de requête réseau au chargement, pas de boucle permanente inutile.
- Pas de suivi des visiteurs ni de cookies. Si le code contient <script> ou <iframe> et que le bandeau cookies du site liste le « Module code » avec consentement, le module est masqué jusqu'au consentement : signale-le.

7. FORMAT DE TA RÉPONSE
1) La liste des modules SiteW natifs à utiliser pour les parties qui n'ont pas besoin de code, et le nombre de modules Code proposés.
2) Pour chaque module Code : le code complet dans un seul bloc, avec une ZONE À MODIFIER commentée en tête (textes, couleurs, liens, valeurs).
3) Le mode (iframe ou intégration directe) et l'état de chaque option : Intégration directe, Isolation du style, Masquer le débordement, Désactiver la validation HTML.
4) La taille recommandée sur ordinateur (largeur × hauteur en px) et la hauteur à régler sur mobile.
5) Les points à vérifier dans l'aperçu ordinateur et mobile.

Insérer le code dans l'éditeur

Ouvrez l'éditeur depuis Mes sites > Modifier le site.
Glissez un module Code sur la page, à l'endroit voulu.
Sélectionnez le module, puis cliquez sur Éditer le code dans le panneau de gauche. Collez le code fourni par l'assistant, puis cliquez sur Sauvegarder. Si le code dépasse la taille autorisée, un message Le code est trop long s'affiche : demandez à l'assistant de l'alléger ou de le découper.
Toujours dans le panneau de gauche, réglez les options indiquées par l'assistant :
- Intégration directe : à cocher uniquement si l'assistant l'a demandé. Une fenêtre Intégration directe activée s'ouvre alors avec un compte à rebours de 10 secondes : vérifiez que l'affichage est correct puis cliquez sur Conserver les modifications, sinon l'option est annulée automatiquement.
- Isolation du style (conseillée) : cochée automatiquement avec l'intégration directe. Décochez-la si l'assistant l'a indiqué (code avec JavaScript).
- Masquer le débordement : selon l'indication de l'assistant.
- Désactiver la validation HTML : laissez décoché.
Sauvegardez le site. En mode iframe, l'aperçu du module dans l'éditeur ne se met à jour qu'après la sauvegarde (message Sauvegardez pour mettre à jour le widget).

Pour modifier le code par la suite (changer un texte, une couleur, une valeur de la zone à modifier), sélectionnez le module puis Éditer le code : inutile de repasser par l'assistant pour ces petits changements.

Régler la taille et vérifier l'affichage mobile

C'est l'étape la plus souvent oubliée. Le module Code est un cadre de taille fixe : si le cadre est trop petit, le contenu est coupé ; s'il est trop grand, un espace vide apparaît.

En vue Ordinateur, redimensionnez le module avec ses poignées aux dimensions recommandées par l'assistant.
Passez en vue mobile (icône téléphone en bas de l'éditeur). Le module prend la largeur de la colonne mobile et conserve, par défaut, la hauteur de la vue Ordinateur.
Si le contenu est coupé ou laisse un vide sur mobile, sélectionnez le module et faites glisser la poignée située sous le module jusqu'à la hauteur mobile indiquée par l'assistant. Cette hauteur est propre au mobile ; le bouton de réinitialisation de la barre d'outils du module permet de revenir à la hauteur ordinateur.
Vérifiez le rendu avec Aperçu, puis sur un vrai téléphone une fois le site publié.
Si le module n'a pas d'intérêt sur mobile (décoration lourde, animation gourmande), masquez-le : en vue mobile, sélectionnez-le, cliquez sur l'icône de suppression puis Masquer sur cet appareil. Il reste visible sur ordinateur.

Pour le détail des modes mobiles de SiteW, consultez la FAQ Site optimisé pour les mobiles.

Images et fichiers dans le code

Privilégiez les modules Image et Galerie pour vos visuels : SiteW génère automatiquement plusieurs tailles d'image (srcset) et choisit la bonne selon l'écran, ce que le module Code ne fait pas. Un module Code qui contient des photos pleine taille ralentit la page, surtout sur mobile.

Si le code doit malgré tout utiliser une image ou un fichier (fond animé, icône, fichier audio ou PDF d'un lecteur personnalisé) :

Envoyez le fichier depuis la page Gestion des fichiers (connecté à votre compte SiteW).
Copiez l'adresse complète du fichier affichée dans la colonne URL.
Collez cette adresse dans la zone à modifier du code, ou donnez-la à l'assistant.

N'utilisez jamais d'images hébergées sur un autre site, ni d'adresses en http:// : votre site est en https et ces ressources seraient bloquées par le navigateur.

Module flottant, position figée

L'option Position figée ne se règle pas au niveau du module Code sur un site construit avec le système de sections : elle se configure sur l'en-tête (panneau Design > En-tête). Pour qu'un module Code reste visible pendant le défilement, placez-le dans cet en-tête figé. Sur un site plus ancien, sans sections, l'option Position figée est proposée dans le menu contextuel du module ; un module figé n'est alors pas affiché sur mobile en Optimisation automatique.

Un bouton flottant généré par le code lui-même (position: fixed) ne fonctionne qu'en intégration directe ; en mode iframe, il reste coincé dans le cadre du module.

Les erreurs les plus fréquentes dans les codes générés par IA

Nous avons analysé des sites SiteW utilisant de nombreux modules Code écrits par des assistants IA. Les codes sont en général de bonne qualité (zone à modifier commentée, classes préfixées, animations soignées), mais certaines erreurs reviennent. Le bloc d'instructions ci-dessus les prévient ; voici comment les reconnaître.

Le module fonctionne à la première visite, puis plus après avoir changé de page (en intégration directe). Cause : une variable const ou let déclarée hors de toute fonction. Le site change de page sans rechargement et réexécute le script, qui échoue avec Identifier has already been declared. Solution : tout le script dans une fonction immédiatement invoquée.
Le code modifie l'en-tête, le menu ou une section du site (en-tête qui se cache au défilement, par exemple) en s'appuyant sur les classes internes de SiteW. Cela peut cesser de fonctionner à toute évolution de SiteW et perturber l'affichage mobile. Préférez les options natives (en-tête fixe, menu) et limitez le code à son propre cadre.
L'assistant suppose que le cadre s'adapte au contenu. Nous avons vu des commentaires du type « l'iframe s'auto-dimensionne sur son contenu » : c'est faux, la taille est fixée dans l'éditeur. Indiquez-lui la règle 1 du bloc d'instructions.
Deux modules, un pour ordinateur et un pour mobile, l'un masqué sur chaque appareil. Cela fonctionne mais double la maintenance ; demandez un seul module responsive.
Un module « invisible » de 1 pixel de haut qui contient seulement un script agissant sur toute la page. L'éditeur signale Ce code ne génère pas d'affichage visuel. Ce procédé est fragile (voir le point sur la modification du site) ; s'il est indispensable, placez le module dans le pied de page, partagé par toutes les pages, et documentez-le.
Le script attend l'événement load ou DOMContentLoaded : il ne se déclenche jamais lors d'une navigation interne. Exécutez le code directement.
Hauteurs en vh en mode iframe : vh correspond à la hauteur du cadre, pas à celle de l'écran. Utilisez des hauteurs en pixels ou en pourcentage du cadre.
Bouton flottant en position: fixed dans un module en mode iframe : il reste coincé dans le cadre. Utilisez l'intégration directe, ou placez le module dans un en-tête figé.
Chargement d'une bibliothèque externe en intégration directe (lecteur PDF, jQuery, bibliothèque d'animation). Elle peut entrer en conflit avec les scripts du site. Réservez les bibliothèques au mode iframe, ou préférez les modules natifs (Téléchargement, Vidéo, Musique…).

Récapitulatif des modes

	Mode iframe (par défaut)	Intégration directe
Options à cocher	Aucune	Intégration directe ; Isolation du style selon le cas ; Masquer le débordement selon le cas
Isolation du reste du site	Totale	Par le préfixe des classes (ou l'Isolation du style pour du HTML/CSS sans script)
Polices et couleurs du site	À déclarer dans le code	Héritées (`inherit`)
Contenu indexé par Google	Non (sauf code sans script)	Oui (texte HTML)
Points de rupture	Container queries	Container queries (pas de `@media`)
Liens	`target="_top"` et adresse absolue	Liens normaux
Débordement du cadre	Toujours coupé	Au choix (Masquer le débordement)
Bibliothèque externe	Possible	Déconseillée
Risque en cas d'erreur de code	Limité au module	Peut bloquer l'affichage du site
Aperçu dans l'éditeur	Après sauvegarde	Immédiat

Exemples de modules Code à demander à un assistant IA

Voici des demandes types, inspirées des modules Code créés sur les sites SiteW ces deux dernières années. Copiez la phrase qui vous ressemble après le lien de cette FAQ, puis complétez avec vos textes, couleurs et valeurs. Chaque exemple fonctionne sans base de données : les données sont écrites dans le code.

Design et animations

Un titre qui s'écrit lettre par lettre (effet machine à écrire), puis reste affiché.
Un titre avec un dégradé de couleurs animé ou un effet lumineux au survol.
Un fond animé léger (particules, bulles, neige, confettis, vagues) à placer derrière un titre.
Un feu d'artifice ou des confettis qui se déclenchent à l'arrivée sur la page, puis s'arrêtent.
Des chiffres clés qui comptent de 0 jusqu'à leur valeur quand ils apparaissent à l'écran (clients, années, projets).
Une séparation de sections en vague ou en diagonale, d'une couleur donnée.
Un logo ou un pictogramme animé en SVG (tracé qui se dessine, rotation lente).
Un bandeau défilant (texte qui passe en continu) pour une annonce ou des partenaires.
Un bouton avec effet de pulsation ou de brillance pour attirer l'attention sur un appel à l'action.
Un effet de parallaxe ou d'apparition progressive des éléments au défilement (intégration directe).
Un cadre décoratif animé autour d'une photo ou d'une citation.
Une citation ou un message différent à chaque visite, tiré d'une liste écrite dans le code.

Calculateurs et simulateurs (résultat affiché, rien n'est envoyé)

Un calculateur de devis indicatif : surface, options, quantité → prix estimé.
Un simulateur de tarif pour une prestation (heures, déplacement, forfaits) avec une grille de prix écrite dans le code.
Un convertisseur d'unités (devises à taux fixe, mesures, températures, tailles de vêtements).
Un calcul d'IMC, de calories, de dose, de consommation ou d'économie d'énergie.
Un calculateur d'empreinte carbone ou écologique simplifié.
Un estimateur de durée ou de distance (temps de trajet, nombre de séances nécessaires).
Un calcul de frais de port ou de remise selon le montant, pour information avant commande.
Un calculateur de pourboire, de partage d'addition ou de budget.
Un compteur d'échéance : nombre de jours restants ou écoulés depuis une date.

Interactions et petits outils

Un compte à rebours jusqu'à la date d'un événement, d'une ouverture ou d'une promotion.
Un quiz à choix multiples avec score et message final, sans enregistrement.
Un test de personnalité ou un guide de choix (« quel produit vous correspond ? ») avec résultat immédiat.
Un générateur aléatoire : idée de recette, exercice du jour, tirage au sort d'une liste.
Un filtre interactif sur une liste écrite dans le code (par catégorie, prix, niveau).
Une liste de contrôle à cocher (préparation d'un rendez-vous, check-list voyage) qui se vide au rechargement.
Des onglets ou un accordéon avec un style sur mesure (le module FAQ reste préférable pour des questions-réponses).
Un carrousel de cartes textes (témoignages, offres) avec défilement automatique.
Un tableau d'horaires d'ouverture qui met en avant le jour en cours et affiche « ouvert » ou « fermé » en ce moment.
Une horloge, la date du jour ou le temps restant avant la fermeture.
Un sélecteur de couleur ou de variante qui change l'aperçu d'un produit (images hébergées dans la Gestion des fichiers).
Une calculette de score ou de points pour un jeu, un club ou une association.
Un bouton « copier » pour un code promo ou une adresse.
Une barre de progression d'une collecte ou d'un objectif, avec la valeur écrite dans le code.

Mise en page sur mesure

Une frise chronologique (histoire de l'entreprise, étapes d'un projet) verticale sur mobile et horizontale sur ordinateur.
Un schéma, un organigramme ou une carte mentale en HTML/CSS avec des libellés réels.
Un tableau comparatif de formules ou de tarifs avec colonne mise en avant.
Une grille de cartes services ou équipe avec effet au survol.
Un plan de salle, de parcours ou d'étapes en SVG avec zones cliquables.
Une mise en page type « menu de restaurant » ou « carte des prix » avec pointillés.
Des formules mathématiques ou scientifiques affichées proprement (notation écrite dans le code).
Un graphique simple (barres, camembert, courbe) à partir de valeurs écrites dans le code.
Un bandeau d'annonce ou d'offre en haut d'une page, avec bouton de fermeture.
Un lecteur audio ou vidéo personnalisé pour des fichiers envoyés dans la Gestion des fichiers (le module Vidéo ou Musique reste préférable quand il suffit).
Un bouton flottant « appeler » ou « WhatsApp » visible pendant le défilement (intégration directe).

Besoins qui ne passent pas par un module Code

Ces demandes reviennent souvent dans les modules Code des sites SiteW, alors qu'une fonction native existe. L'assistant doit vous orienter vers elle :

Balise de vérification Google (google-site-verification) ou balises meta : champ Balises HTML meta des paramètres de référencement de la page ou du site, pas un module Code.
Données structurées (JSON-LD) : même champ Balises HTML meta ; SiteW génère déjà les données principales.
Ancres pour un lien vers un endroit de la page : option d'ancre des modules et des sections.
Page HTML complète collée (avec <html>, <head>, <body>) : découpez le contenu en modules Texte, Image et Bouton ; ne gardez en module Code que la partie interactive.
Texte long (mentions légales, conditions générales, FAQ) : modules Texte et FAQ, indexés et adaptés au mobile.
Bandeau cookies : Mes sites > Tableau de bord > Paramètres > RGPD.
Formulaire de contact, de réservation ou d'inscription qui doit vous envoyer les réponses : module Formulaire.
Boutons PayPal, HelloAsso, Calendly, YouTube, Instagram, Google Maps et autres codes fournis par un service : collez-les tels quels dans un module Code (ou utilisez les modules Vidéo, Carte, Réseaux sociaux, Boutique), sans les faire réécrire par l'assistant.
Statistiques de visite ou pixel de suivi : paramètres de statistiques du site.

Conseil : commencez toujours en mode iframe. Ne passez en intégration directe que si l'assistant l'a justifié, et publiez puis vérifiez votre site immédiatement après : un code incorrect en intégration directe peut empêcher l'affichage de la page.