Le moteur de mockups par URL

Générez des mockups réalistes.
À partir de vos images.

Importez une image de votre support. Dessinez les zones à personnaliser. Transmettez vos visuels par URL : le moteur les insère dans la scène, avec la perspective et les masques du modèle.
Vos propres modèles
Rendu par URL
Configuration du modèle · une seule fois
Un leaflet. Une photo. Un portrait.
Deux zones sur le même document : la photo du bien et le portrait rond du courtier. Vous préparez le modèle une fois.
Éditeur de modèle
modèle mK7p2
1
Importer le document
Photographie du leaflet de fond, avant l'ajout des images et des zones
leaflet-immobilier.png
Un leaflet · deux emplacements
Votre mise en scène, vos textes et votre identité graphique.
Ce document sert de base à tous les rendus.
Document d'exemple chargé
2
Dessiner les zones
Zone
Cercle
Leaflet photographié, avec ses textes fixes et ses emplacements encore vides 01 · Photo du bien 02 · Portrait rond Vue éclatée : la photo du bien et le portrait rond sont reliés à leurs zones sur le leaflet
Les images rejoignent leurs zones
Illustration
Zones du modèle
01 · Image du bien
Quatre points
Transformation en perspective
image_1 → zone_1
02 · Portrait
Masque circulaire
Position et dimensions
image_2 → zone_2
Un modèle = un document de fond + une ou plusieurs zones. Chaque zone reçoit une image.
Appeler ce modèle par URL
Schéma interactif de l'éditeur · modèle d'exemple, aucune configuration enregistrée.
03 — Appeler le modèle depuis votre application

L'URL du modèle.
Les URL de vos images.

Votre application appelle le modèle en ajoutant les adresses des images. La première URL alimente la première zone, la deuxième URL la deuxième zone. La réponse HTTP est l'image composée.
Images à transmettre
Image associée à la première URL
URL image 1 → Zone 01
https://images.example.invalid/villa.jpg
Image associée à la seconde URL
URL image 2 → Zone 02
https://images.example.invalid/clara.jpg
GET URL de génération
https://mockupgenerator.io/mockups/generator/mK7p2/https://images.example.invalid/villa.jpg,https://images.example.invalid/clara.jpg
Modèle identique.
Images variables.
Choisissez un jeu d'images, puis simulez l'appel.
Réponse : votre mockup
APERÇU · JEU A
Leaflet composé avec la photo du bien et le portrait rond de Clara Martin
Le fond reste intact. Les images sont placées et transformées dans les zones du modèle, avec la perspective et le masque définis.
Une URL utilisable comme source d'image.
Dans une page web, une fiche produit ou une balise <img> d'email. Sans URL d'image ajoutée, l'URL du modèle renvoie le document d'origine.
Simulation locale · identifiant et URL d'images fictifs · aucune requête envoyée au moteur.
Cas d'usage · emails personnalisés

La même mécanique,
dans vos emails.

Votre outil marketing construit une URL de rendu pour chaque destinataire et l'utilise comme source de l'image dans l'email. Le message affiche un support composé avec ses propres visuels.
Un nouveau bien est publié.
Votre application récupère la photo de l'annonce, le portrait du courtier et le modèle associé à sa marque.
Votre application métier
Le mockup est généré.
L'URL associe le modèle de la campagne à la photo du bien et au portrait. Le moteur renvoie l'image composée.
mockupgenerator
Votre outil envoie l'email.
Le client découvre un support déjà personnalisé, avec un lien pour le commander dans votre boutique.
Votre outil d'emailing → votre marketplace
mockupgenerator produit les images. Les textes, les destinataires et l'envoi restent gérés par votre outil marketing.
Le même support, avant et après composition.
Aperçu d'un email personnalisé
Objet
Votre nouveau bien mérite d'être vu.
v.
Votre boutique immobilière
À : Camille Dubois
Bonjour Camille,
Votre nouvelle annonce est en ligne. Voici votre carte personnalisée, prête à être présentée dans notre boutique.
Carte ATELIER finalisée avec la photo de l'annonce et le portrait rond de Camille
Le résultat, tel qu'il apparaît dans l'email.
Un aperçu préparé avec la photo de votre annonce.
Exemple illustratif : aucun email n'est envoyé.
Un usage déjà présent dans les campagnes immobilières d'immosquare.
Contenu de démonstration · marque et contacts fictifs
La mise en perspective

Vos visuels suivent
les plans du support.

Une image à plat devient une face de coffret ou une page de brochure. Les quatre points de chaque zone déterminent sa perspective. Le décor reste celui de votre modèle.
Un support, plusieurs zones indépendantes.
Les pointillés relient chaque visuel à sa destination.
Vue éclatée d'une brochure de voyage : deux créations photographiques sont projetées sur les deux pages ouvertes, chacune dans sa perspective
Imprimés

Deux pages. Deux perspectives.

Vous fournissez le visuel de chaque page. Le moteur le transforme dans la zone correspondante, sans modifier la mise en scène.
Brochure immobilière ouverte : la photo d'une maison et le portrait du courtier sont présentés au-dessus de leurs zones respectives
Personnalisation

Une photo du bien. Un portrait.

Chaque image rejoint sa zone dans la brochure, avec la perspective du support.
Illustrations de principe · visuels de démonstration générés, sans appel au moteur.
Conçu comme une brique applicative

La composition graphique,
pilotée par vos outils.

Le back-office porte les modèles. Votre code choisit les images et déclenche le rendu. Chaque application peut exploiter le résultat dans son propre parcours.
Échanger avec notre équipe

Des zones qui suivent le support.

Le moteur calcule une transformation en perspective à partir des quatre points de chaque zone. Les masques circulaires permettent notamment d'insérer un portrait.

Vos modèles, administrables.

Gérez les scènes et leurs emplacements depuis le back-office. Prévisualisez vos compositions et consultez les rendus générés.

Un rendu déjà créé est réutilisé.

Pour une même combinaison de modèle et d'images, le moteur retrouve le résultat existant.

La personnalisation reste chez vous.

Vos outils préparent les textes et les créations. mockupgenerator reçoit les images et assure leur mise en scène.
Une technologie immosquare

Développé pour nos produits.
Connecté à des usages concrets.

mockupgenerator est né des besoins de nos applications immobilières : présenter des supports personnalisés, les relier à une boutique et les faire apparaître dans les campagnes marketing.
Découvrir immosquare
De la donnée métier
au produit que l'on voit.
La même équipe conçoit le moteur de rendu et les applications qui l'utilisent.