Guide d’intégration

Mettre un mockup sur ton site web

Trois façons, de la plus simple à la plus complète. La première convient à presque tout le monde, et c’est aussi la meilleure pour la vitesse et le référencement.

Ouvrir le studio Comment ça marche

Les visuels exportés sont à toi, sans mention obligatoire.

ton-site.fr

Trois méthodes, selon ton besoin

Commence par la première. Les deux autres répondent à des cas précis.

1. Exporter et déposer

Tu exportes une image ou une courte vidéo depuis le studio et tu la poses sur ton site comme un fichier normal. Rapide à charger, aucun code à maintenir.

  • Recommandé dans presque tous les cas
  • Le meilleur pour la vitesse et le référencement

Voir comment faire

2. Cadre + aperçu vivant

Tu poses un cadre d’appareil autour d’un contenu qui change en direct, avec une perspective CSS 3D. Effet 3D, sans WebGL ni ralentissement.

  • Quand le contenu doit rester vivant
  • Éditeur, démo, aperçu interactif

Voir comment faire

3. Code à coller Bientôt

Un petit script Flokup et une balise à coller : le mockup s’affiche en direct sur le site. Pratique pour livrer un client, plus lourd que l’export.

  • Prévu dans la feuille de route
  • En attendant, l’export couvre tout

Voir l’aperçu

1

Exporter une image ou une vidéo, puis la déposer

Dans le studio, compose ton mockup puis télécharge une image PNG (fond transparent possible) ou une vidéo MP4. Mets le fichier sur ton site et appelle-le comme n’importe quelle image ou vidéo.

Pour une image, le format AVIF ou WebP pèse le moins lourd. Pour une vidéo en boucle, propose WebM et MP4, en muet, avec une image d’attente.

Une image

<img src="/images/mon-site-mockup.avif"
     width="1200" height="675" loading="lazy"
     alt="Mon site affiché sur un smartphone en 3D">

Une vidéo en boucle

<video autoplay muted loop playsinline
       width="1200" height="675"
       poster="/images/mon-site-mockup.jpg">
  <source src="/images/mon-site-mockup.webm" type="video/webm">
  <source src="/images/mon-site-mockup.mp4" type="video/mp4">
</video>
mockup.avif
2

Cadre d’appareil autour d’un aperçu vivant

Quand le contenu doit changer en direct (un éditeur, une démo), tu ne peux pas le figer en image. Exporte alors le cadre de l’appareil seul, avec fond transparent, et place ton contenu vivant dedans avec une perspective CSS 3D.

Résultat : l’effet 3D, sans WebGL et sans ralentir la page. C’est exactement le procédé de l’aperçu de l’éditeur de Flopix.

<div class="mockup">
  <iframe src="https://ton-site.fr" title="Aperçu"></iframe>
  <img class="cadre" src="/cadre-smartphone.png" alt="" aria-hidden="true">
</div>
.mockup { position: relative; width: 320px; }
.mockup .cadre { position: absolute; inset: 0; width: 100%;
  pointer-events: none; }
.mockup iframe { position: absolute; inset: 7% 6%; width: 88%;
  height: 86%; border: 0; border-radius: 28px;
  transform: perspective(1400px) rotateY(-12deg); }
Contenu vivant + cadre = mockup
3

Code d’intégration à coller Bientôt

Le but : coller un petit script et une balise, et le mockup s’affiche en direct sur ton site, avec une image d’attente et un chargement différé. Très pratique, mais plus lourd que l’export, donc à réserver aux cas où l’export ne suffit pas.

Ce composant n’est pas encore en ligne. Voici à quoi il ressemblera, pour que tu saches ce qui arrive :

<script src="https://flokup.fr/embed.js" async></script>

<flokup-mockup
  site="https://ton-site.fr"
  appareil="smartphone"
  format="9:16">
</flokup-mockup>

En attendant, la méthode 1 (export) donne le même visuel, en plus léger. Dis-nous si ce code t’intéresse : ça nous aide à le prioriser.

Laquelle choisir ?

Une image ou une vidéo fixe à montrer

Méthode 1, export. Page d’accueil, page de vente, article, fiche produit, réseaux sociaux. Léger, rapide, bon pour le référencement.

Un contenu qui change sous les yeux du visiteur

Méthode 2, cadre + aperçu vivant. Éditeur en ligne, démo interactive, configurateur. L’intérieur reste cliquable et à jour.

Offrir un mockup prêt à coller à un client

Méthode 3, code d’intégration (bientôt). En attendant, exporte le visuel et envoie-le, ou pose-le toi-même sur le site.

Référencement et vitesse : les bons réflexes

Préfère l’export (méthode 1) partout où tu le peux. Une image ou une vidéo hébergée sur ton site se charge plus vite qu’un rendu 3D chargé en direct depuis un autre domaine, et c’est ce que Google préfère.

  • Donne un vrai texte alternatif à l’image (ce qu’elle montre : « mon site sur smartphone »). Il aide le référencement et l’accessibilité.
  • Renseigne width et height : la page ne saute plus pendant le chargement, un critère de qualité suivi par Google.
  • Image : AVIF ou WebP ; vidéo : WebM et MP4, en muet, avec une image d’attente (poster) et un chargement différé.
  • Garde le fichier raisonnable : exporte à la taille réelle d’affichage. Une vidéo de 12 secondes boucle parfaitement et évite un gros fichier.
  • Pour un visuel au-dessus de la ligne de flottaison, une image charge plus vite qu’une vidéo : garde la vidéo plus bas dans la page.

Questions fréquentes

Dans presque tous les cas, exporte une image ou une vidéo et dépose le fichier sur ton site : c’est le plus rapide et le meilleur pour le référencement. Le cadre + aperçu vivant sert quand le contenu doit changer en direct, et le code d’intégration quand tu veux offrir un mockup prêt à coller.
Oui. Une image AVIF ou WebP avec un texte alternatif descriptif se charge vite, compte comme contenu de la page et peut remonter dans Google Images. C’est pour ça que l’accueil de Flopix utilise une image exportée plutôt que de la 3D en direct.
Oui. Exporte le cadre de l’appareil seul, fond transparent, puis place ton contenu vivant dedans avec une perspective CSS 3D. Effet 3D, sans WebGL ni ralentissement.
Pas encore : il est prévu dans la feuille de route. En attendant, l’export image ou vidéo couvre tous les besoins, et reste conseillé quand la vitesse et le référencement comptent.
Non. Les visuels que tu exportes sont à toi : site, réseaux, présentations client, sans mention obligatoire.

Pour aller plus loin

Comment ça marcheComposer et exporter ton mockup, pas à pas. FonctionnalitésAppareils, animations, formats, export. Pour les agencesPrésenter les sites que tu livres. Pour les entreprisesMettre ton site en valeur partout. ComparatifFlokup face aux autres générateurs. TarifsDécouverte gratuite, Pro et Agence.

Prépare ton visuel maintenant

Compose ton mockup dans le studio, exporte-le et pose-le sur ton site. Gratuit, sans compte pour essayer, premier téléchargement offert.

Ouvrir le studio

Créer un compte gratuit