Documentation

Introduction au formulaire vCard

A. Présentation générale

Le générateur vCard est un formulaire complet permettant de créer une carte de visite digitale moderne, personnalisée et autonome.
Chaque section du formulaire correspond à une partie de votre future vCard.
Vous pouvez remplir uniquement ce dont vous avez besoin, mais plus vous complétez d’éléments, plus votre vCard sera professionnelle et utile.

B. Prévisualisation en temps réel

À droite, un smartphone virtuel affiche votre vCard telle qu’elle apparaîtra sur mobile.
Chaque modification dans le formulaire met instantanément à jour la prévisualisation.

C. Conseils généraux

• Avancez section par section
• Testez régulièrement la prévisualisation
• Remplissez d’abord les informations essentielles, puis les sections avancées
• Vous pouvez revenir à tout moment sur une section pour la modifier

D. Version Mobile

Depuis votre smartphone, vous pouvez à tout moment afficher le smartphone virtuel en cliquant l’icône en bas de l’écran.

💡 Pratique pour vérifier instantanément le rendu final pendant que vous remplissez le formulaire.

---

🟦 1. Chez vous ou chez nous ?

Le générateur de vCard est l’interface principale qui vous permet de choisir entre deux options : héberger votre vCard chez vous ou chez nous.

***

📒 Installation de la vCard sur votre serveur

1. Remplissez tous les champs que vous désirez afficher dans votre vCard.
2. Donner un nom a votre vCard dans le champ prévu à cet effet.
3. Cliquez sur le bouton “Télécharger vCard” pour télécharger le dossier ZIP contenant tous les fichiers de votre vCard.

Le bouton bleu deviendra d’une couleur plus vive. Cliquez ensuite sur le bouton “Télécharger vCard”.

Une petite fenêtre apparaîtra pour confirmer le téléchargement du dossier ZIP de votre vCard sur votre ordinateur.

Ensuite, créez un dossier sur votre serveur (ex. /prenom-nom/) et transférez-y tous les fichiers dézippés de votre vCard, sauf le fichier JSON qui vous sert exclusivement pour faire des mises à jour via notre application en ligne. Votre vCard est prête. Il vous suffit d’utiliser l’URL du dossier dans un navigateur pour qu’elle s’affiche (ex. https://monsite.fr/prenom-nom/).

***

📒 Installation de la vCard sur notre serveur

1. Remplissez tous les champs que vous désirez afficher dans votre vCard.
2. Sélectionnez le mode actif (Switch vert)
3. Indiquez votre email pour confirmer l’activation de votre vCard.

Cochez la case pour accepter le traitement de vos données afin de finaliser et héberger votre vCard.

Le bouton bleu deviendra d’une couleur plus vive. Cliquez ensuite sur le bouton “Publier la vCard en ligne”.

💡 Si vous avez préalablement chargé une sauvegarde avec un fichier JSON, le bouton affichera “Mettre à jour cette vCard”.

Et pour terminer cette étape, cliquez sur le bouton “Publier la Vcard en ligne” ou “Mettre à jour cette vCard”.

La création de votre vCard est en cours (icône qui tourne dans le bouton “Création”). Cela peut prendre de 10 à 30 secondes, selon la quantité de données incluses.

Quand le processus est terminé, un message de confirmation apparaît avec un fond vert.

Vous recevrez un email à l’adresse email que vous avez indiqué afin activer votre vCard d’un simple clic.

Un second email vous sera automatiquement envoyé avec tous les détails de votre nouvelle vCard.

• Un bouton vers votre vCard en ligne (URL personnalisée)
• Un bouton pour télécharger le dossier ZIP de votre vCard
• Quelques informations
• Un bouton pour désactiver votre vCard

Comme cette application a pour but de vous rendre totalement autonome, pensez à bien conserver cet email et à sauvegarder une copie du dossier ZIP. Le fichier JSON, nécessaire pour toute mise à jour de votre vCard, se trouve à l’intérieur.

***

📒 Charger votre sauvegarde vCard à partir d’un fichier JSON

Cliquez sur le bouton “Restaurer (JSON)” pour charger votre fichier vCard au format .json.

Avec le fichier .json chargé, votre vCard apparaît. Vous pouvez maintenant la modifier à votre convenance, puis l’enregistrer comme vous le souhaitez.

• Télécharger le dossier ZIP pour un enregistrement de votre vCard sur votre serveur
• Publier la vCard en ligne ici même

***

📒 Duplication d’une vCard existante sur notre serveur

1. Remplissez tous les champs que vous désirez afficher dans votre vCard.
2. Sélectionnez le mode actif (Switch vert)
3. Indiquez votre email pour confirmer l’activation de votre vCard.
4. Cochez la case pour accepter le traitement de vos données afin de finaliser et héberger votre vCard.
5. Cliquez sur le bouton “Dupliquez cette vCard”.
6. Le bouton bleu deviendra d’une couleur plus vive. Cliquez ensuite sur le bouton “Publier la vCard en ligne”.

Le bouton bleu deviendra d’une couleur plus vive. Cliquez ensuite sur le bouton “Publier la vCard en ligne”.

Et pour terminer cette étape, cliquez sur le bouton “Publier la Vcard en ligne”.

💡 Si vous avez préalablement chargé une sauvegarde avec un fichier JSON, le bouton affichera “Mettre à jour cette vCard”.

Et pour terminer cette étape, cliquez sur le bouton “Mettre à jour cette vCard”.

⏳ La création de votre vCard est en cours (icône qui tourne dans le bouton “Création”). Cela peut prendre de 10 à 30 secondes, selon la quantité de données incluses.

Quand le processus est terminé, un message de confirmation apparaît avec un fond vert.

Vous recevrez un email pour activer votre vCard d’un simple clic.

Un second email vous sera automatiquement envoyé avec tous les détails de votre nouvelle vCard – pour une totale autonomie.

🟩 2. Style & Apparence

Cette section vous permet de définir l’identité visuelle de votre vCard. Vous pouvez personnaliser les couleurs, les polices, les tailles, les boutons et l’apparence générale.

Ce que vous pouvez configurer

Tout d’abord, si vous n’avez pas de charge graphique, vous pouvez utiliser l’une des 4 palettes de couleurs prédéfinies pour faciliter la mise en ligne de votre vCard. Vous pouvez toujours retoucher les couleurs de la palette en jouant avec les curseurs de couleurs dans les encadrés colorés.

• Couleur principale (accent)
• Couleur de fond (vCard)
• Couleur de fond (Champs)
• Couleur des Titres
• Couleur des Textes
• Couleur des Icônes
• Police d’écriture (Typographie)
• Taille des titres
• Taille du texte
• Taille des icônes

Conseils

• Choisissez une palette cohérente
• Assurez un bon contraste texte/fond
• Testez plusieurs combinaisons dans la prévisualisation
• Gardez une apparence simple et professionnelle

 

🟧 3. Images

Cette section vous permet d’ajouter les éléments visuels essentiels de votre vCard.

Éléments disponibles

• Image de couverture / Bannière d’en‑tête
• Photo de profil / Avatar
• Favicon – icône dans l’onglet du navigateur

Recommandations

• Utilisez une photo nette et centrée
• Préférez des images légères (WebP si possible)
• Évitez les images trop chargées en arrière‑plan
• Vérifiez le rendu sur mobile

 

🟪 4. Informations personnelles

Cette section contient les informations essentielles qui apparaîtront en haut de votre vCard.

Champs disponibles

• Prénom
• Nom
• Poste / Fonction
• Entreprise
• Description courte

Conseils

• Restez concis
• Mettez en avant votre rôle ou votre spécialité
• Utilisez un ton professionnel et clair

 

🟥 5. Coordonnées

Cette section regroupe vos moyens de contact directs.

Champs disponibles

• Téléphone Mobile
• Téléphone Fixe
• Email
• Site web
• Adresse (complète ou partielle)
• Bouton pour lien avec votre plateforme de RV
• Bouton avec votre boutique e-commerce

Conseils

• Vérifiez soigneusement chaque lien
• Utilisez un numéro au format international
• Ajoutez un site web si vous en avez un
• L’adresse est optionnelle si vous travaillez en ligne

 

🟫 6. Messageries (Chat)

Vous pouvez ajouter vos messageries instantanées pour faciliter le contact.

Plateformes disponibles

• Whatsapp
• Messenger
• Telegram
• Teams
• Line
• Viber
• Zalo
• Wechat
• Qq
• Discord
• Slack
• Ringover
• Kakaotalk
• Signal

Conseils

• Utilisez les formats d’URL recommandés
• N’ajoutez que les messageries que vous utilisez réellement
• Testez chaque lien dans la prévisualisation

 

🟨 7. Réseaux & plateformes

Cette section vous permet d’ajouter vos réseaux sociaux et plateformes professionnelles.

Plateformes disponibles

Plus de 70 réseaux : Facebook, Instagram, Twitter, Linkedin, Youtube, Tiktok, Snapchat, Pinterest, Github, Dribbble, Behance, Twitch, Reddit, Spotify, Tripadvisor, Trustpilot, Yelp, Google, Airbnb, Booking, Paypal, Stripe, Revolut, Wise, Calendly, Figma, Trello, Notion, Gitlab, Codepen, Stackoverflow, Wordpress, Shopify, Etsy, Amazon, Ebay, Bitbucket, Quora, Tumblr, Vk, Odnoklassniki, Weibo, Vimeo, Dailymotion, Bilibili, Artstation, Deviantart, Flickr, 500px, Medium, Goodreads, Viadeo, Angellist, Polywork, Researchgate, Academia, Steam, Psn, Xbox, Battlenet, Roblox, Epicgames, Itchio, Vinted, Leboncoin, Marmiton, Strava, Patreon, Soundcloud et Xing.

Fonctionnement

• Cliquez sur une icône pour ajouter un réseau
• Renseignez l’URL
• Modifiez ou supprimez à tout moment
• L’ordre peut être ajusté selon vos préférences

Conseils

• Ne mettez que les réseaux actifs
• Vérifiez chaque lien
• Évitez d’en ajouter trop pour ne pas surcharger la vCard

💡Il est important de préciser que tous les blocs peuvent être réordonnés à votre convenance de haut en bas (Drag & Drop), en maintenant cliqué l’icône présente à gauche de chaque bloc (avec six points – 2×3).

 

---

 

🟦 8. Contenu mis en avant

Cette section vous permet d’ajouter des éléments importants à mettre en avant.

Éléments possibles

• PDF (CV, plaquette, tarifs…)
• Images
• Vidéos (YouTube, Vimeo, MP4)
• Liens externes
• Documents téléchargeables
• Boutons d’action personnalisés

Conseils

• Un PDF bien structuré renforce votre crédibilité
• Une courte vidéo améliore l’engagement
• Évitez les fichiers trop lourds
• Ne surchargez pas la vCard

***

📱 Les 8 modules disponibles pour une polyvalence complète

Pour connaître les limites de ces blocs, consultez le point 10 de cette page. Il est également important de préciser que tous les blocs peuvent être réordonnés à votre convenance, de haut en bas, par Drag & Drop, en maintenant cliqué l’icône à gauche de chaque bloc (avec six points – 2×3).

• • Bloc Média (Image / PDF)

• • Vidéo YouTube / Vimeo

• • Fichier Vidéo

• • Fichier Audio

• • Bloc de Texte

• • Produit Mis en Avant

• • Bouton CTA Personnalisé

• • Code d’intégration (HTML / iFrame)

 

🟩 9. SEO & Référencement

Cette section vous permet d’optimiser votre vCard pour les moteurs de recherche (si vous l’hébergez vous‑même).

Champs disponibles

• Titre SEO
• Description SEO
• URL personnalisée (selon mode d’hébergement)

Conseils

• Utilisez un titre clair et descriptif
• Rédigez une description courte (150–160 caractères)
• Utilisez votre nom + activité pour être trouvé facilement

 

---

 

🟧 10. Tableau complet – Types de fichiers & limites par bloc

Voici un tableau clair, propre et complet qui récapitule tous les éléments téléchargeables dans votre vCard, avec les types de fichiers autorisés et les limites de poids mises en place pour respecter ses utilisateurs.

Nous limitons les formats de fichiers afin de garantir une compatibilité maximale entre navigateurs, d’optimiser la vitesse de chargement et d’assurer une expérience fluide et stable pour tous les utilisateurs.

Bloc	Types de fichiers autorisés	Limite de poids	Notes importantes
Bannière	.jpg, .jpeg, .png, .webp, .gif	1 Mo	GIF animé accepté. 1 seule bannière possible.
Photo de profil (Avatar)	.jpg, .jpeg, .png, .webp, .gif	500 Ko	Pas de SVG (sécurité). 1 avatar unique.
Favicon	.png, .ico, .jpg, .webp, .jpeg, .gif	500 Ko	.ico recommandé. 1 favicon unique.
Bloc Média (Image / PDF)	.jpg, .jpeg, .png, .webp, .gif, .pdf	Image : 1 Mo PDF : 2 Mo	Miniature PDF auto. Jusqu’à 10 médias.
Miniature PDF	.jpg, .jpeg, .png, .webp, .gif	1 Mo	Optionnelle. 1 miniature par PDF.
Bloc Produit	.jpg, .jpeg, .png, .webp, .gif	1 Mo	SVG retiré. Jusqu’à 20 produits.
Bloc Vidéo (upload local)	.mp4, .webm, .ogg	5 Mo	Vidéo locale. 1 vidéo par bloc.
Bloc Vidéo (YouTube/Vimeo)	Aucun fichier (URL uniquement)	—	Lien externe. Nombre illimité.
Bloc Audio	.mp3, .wav, .mpeg, .ogg	5 Mo	1 fichier audio par bloc.
Bloc CTA	Aucun fichier	—	Texte + lien. Nombre illimité.
Bloc Texte	Aucun fichier	—	Éditeur Quill. Nombre illimité.
Bloc iFrame / Embed	Aucun fichier	—	Code externe. Nombre illimité.

Type de fichier	Outils recommandés	Pourquoi ces outils
PDF	iLovePDF – https://www.ilovepdf.com/fr	Ultra fiable, compression efficace, pas de watermark, interface simple.
Images / Photos	Compress-Or-Die — https://compress-or-die.com	Compression très fine, contrôle avancé, excellent ratio qualité/poids.
Audio (MP3, WAV, OGG)	123apps – Audio Compressor – https://www.123apps.com/audio-compressor/	Gratuit, propre, accepte tous les formats audio, compression réglable.
	MP3Smaller — https://www.mp3smaller.com/fr/	Simple, rapide, idéal pour réduire un MP3 sans perte notable.
Vidéo (MP4, WebM, OGG)	8mb.video — https://8mb.video	Parfait pour obtenir une vidéo < 8 Mo, aucun watermark, compression propre.
	FreeConvert – Video Compressor – https://www.freeconvert.com/video-compressor	Compression réglable, formats variés, pas de watermark.
	Clideo – Compress Video – https://clideo.com/compress-video	Interface moderne, compression efficace (attention : watermark parfois).

 

---

🟪 11. Comment votre URL est générée

Une URL est une adresse unique qui permet de localiser une page Web ou une ressource sur Internet (lien internet). Sur notre site elle comprend :

• Un protocole sécurisé (https://)
• Le chemin : sous-domaine + nom de domaine + dossier (https://blueprint3.chefprojetdigital.fr/vcards/)

Ainsi, lorsque vous enregistrez votre vCard sur notre serveur, son dossier est automatiquement créé dans /vcards/ pour deux raisons :

👉 Voici comment nous construisons automatiquement l’URL unique de votre vCard :

/prenom-nom-suffixe/

🟦 1. Prénom + nom

• récupérés depuis votre formulaire
• convertis en minuscules
• accents retirés (compatibilité web)

👉 Exemple : Hélène PÉTRAT → helene-petrat

🟪 2. Suffixe aléatoire

• empêche qu’on devine votre URL
• permet plusieurs vCards pour une même personne

👉 Exemple : mq4d

Formulaire :

• Prénom : Hélène
• Nom : PÉTRAT

URL générée :
https://blueprint3.chefprojetdigital.fr/vcards/helene-petrat-mq4d/

ℹ️ Pourquoi cette structure ? Pour garantir une URL lisible, compatible avec tous les navigateurs, et impossible à deviner.

🟥 12. Installer votre vCard sur votre propre serveur

Certaines personnes préfèrent héberger leur vCard directement sur leur propre serveur (OVH, o2switch, Ionos, Hostinger…). Dans ce cas, vous pouvez télécharger un fichier ZIP complet, prêt à être déposé en ligne.

Voici comment cela fonctionne :

🟦 1. Vous téléchargez un dossier ZIP complet

 

🟪 2. Vous décompressez et envoyez le dossier sur votre serveur