Projets

Méga LP

Online Booking Hyundai

Online Booking Hyundai

Paramètres Url

The parameter "params" is used for autocomplation. This parameter contains others sub-parameters :

You need to use ";" to separate each sub-parameters

Exemple URL with all parameters : ?utm_medium=email&utm_source=actito&utm_campaign=XXXXXX&utm_term=PUID&utm_content={Convaincus}_{high}_{high}_{high}_{high}_{high}_{high}_{high}_{high}_{low}_{low}_{low}_{low}_{low}_{low}_{low}_{low}_{low}_{low}_{medium}&params=immat:fb329xr;firstname:Jonh;lastname:Doe;email:jonh@gmail.com;tel:0666666666;services:batterie,contrat&codesiebel=HF00000
If you need to auto select the differents services you can use the sub-parameter "services" in the parameter params

Exemple with services sub-parameter :

params=immat:fb329xr;firstname:Jonh;lastname:Doe;email:jonh@gmail.com;tel:0666666666;services:batterie

You can add others services with a ',' :

services:batterie,contrat
Online Booking Hyundai

Setup

Onlinebooking

This template should help get you started developing with Vue 3 in Vite.

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Compile and Minify for Production

pnpm build

Run Unit Tests with Vitest

pnpm test:unit

Run End-to-End Tests with Cypress

pnpm test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

pnpm build
pnpm test:e2e

Online Booking KIA

Form Builder

Form Builder

Guide d'utilisation

Découvrez comment utiliser le builder de formulaires.
 
Vous trouverez le json à remplir dans le dossier /templates à la racine du projet.

"formTitle": "Formulaire Abonnement Hyundai Leasing",
"subTitle": "Demandez à être rappelé par l’un de nos conseiller Hyundai",
"validation": "Votre demande a été envoyée avec succès",

Au sein de ces clés valeurs, vous pourrez définir respectivement :

  1. Le titre de votre formulaire
  2. Le sous-titre de votre formulaire
  3. Le message de validation affiché une fois le formulaire soumit

Voici un exemple gérant les champs Nom et Prénom dans un formulaire

{
    "rowClass": "row",
    "fields": [
      {
        "fieldName": "firstName",
        "match": "firstName",
        "id": "firstName",
        "label": "Prénom",
        "name": "firstName",
        "class": "col-xs-12 col-sm-4 col-sm-offset-2",
        "required": true
      },
      {
        "fieldName": "lastName",
        "match": "lastName",
        "id": "lastName",
        "label": "Nom",
        "name": "lastName",
        "class": "col-xs-12 col-sm-4",
        "required": true
      }
    ]
}

Tout d'abord, il faut définir la clé valeur suivante afin de définir une rangée qui comportera les champs :

"rowClass": "row"

Ensuite il faut définir un tableau pour définir ses champs :

"fields" : []

Pour créer un champ (par exemple 'Nom'), vous aurez besoin de resneigner entre les crochets de la clé "fields" les clés valeurs suivantes :

"fieldName" : "lastName"
"match": "lastName",
"id": "lastName",
"name": "lastName",

C'est important pour ces clés d'avoir la même valeur, sinon votre champ risque de ne pas fonctionner correctement. Définissez ensuite le label pour donner à votre champ le nom que vous souhaitez afficher :

"label": "Libre à vous de décider"

Si vous reseignez la clé valeur suivante, L'utilisateur de votre formulaire sera obligé de remplir le champ afin de valider le formulaire :

"required" : true

Form Builder

Liste des différents champs

Civilité :

{
  "fieldName": "civilite",
  "title": "Civilité",
  "id": "civilite",
  "type": "radio",
  "label": "Civilité",
  "name": "civilite",
  "value": "",
  "class": "col-xs-12 col-sm-6 col-sm-offset-2",
  "required": true,
  "options": [
    { "label": "Monsieur", "value": "Mr." },
    { "label": "Madame", "value": "Ms." }
  ]
}

Prénom :

{
  "fieldName": "firstName",
  "match": "firstName",
  "id": "firstaName",
  "label": "Prénom",
  "name": "firstName",
  "class": "col-xs-12 col-sm-4 col-sm-offset-2",
  "required": true
}

Nom :

{
  "fieldName": "lastName",
  "match": "lastName",
  "id": "lastName",
  "label": "Nom",
  "name": "lastName",
  "class": "col-xs-12 col-sm-4",
  "required": true
}

Téléphone :

{
  "fieldName": "telephone",
  "match": "telephone",
  "id": "telephone",
  "label": "Téléphone",
  "name": "telephone",
  "class": "col-xs-12 col-sm-4 col-sm-offset-2",
  "onlyNumbers": true,
  "required": true
}

Email :

{
  "fieldName": "email",
  "match": "email",
  "id": "email",
  "label": "Email",
  "name": "email",
  "class": "col-xs-12 col-sm-4",
  "required": true
}

Code Postal :

{
  "fieldName": "postalCode",
  "match": "postalCode",
  "id": "postalCode",
  "label": "Code Postal",
  "name": "postalCode",
  "class": "col-xs-12 col-sm-4 col-sm-offset-2",
  "required": true,
  "onlyNumbers": true
}

Ville :

{
  "fieldName": "city",
  "match": "city",
  "id": "city",
  "label": "Ville",
  "name": "city",
  "class": "col-xs-12 col-sm-4",
  "required": true
}

Concession :

{
  "fieldName": "concession",
  "match": "concession",
  "id": "concession",
  "type": "select",
  "label": "Concession",
  "name": "concession",
  "class": "col-xs-12 col-sm-8 col-sm-offset-2",
  "required": true
}

Date :

{
  "fieldName": "date",
  "id": "date",
  "type": "date",
  "class": "col-xs-12 col-sm-4 col-sm-offset-2",
  "label": "Rendez-vous",
  "name": "date",
  "required": true,
  "disable-dates": true
}

Modèles Hyundai :



{
  "fieldName": "modeles",
  "match": "modeles",
  "id": "modeles",
  "label": "Modeles",
  "name": "modeles",
  "class": "col-xs-12 col-sm-8 col-sm-offset-2",
  "type": "select",
  "required": true
}








Commentaire :


{
  "fieldName": "commentaire",
  "type": "commentaire",
  "id": "commentaire",
  "label": "Commentaire",
  "name": "commentaire",
  "class": "col-xs-12 col-sm-8 col-sm-offset-2"
}








Optin :


{
  "fieldName": "optin",
  "class": "col-xs-12 col-sm-8 col-sm-offset-2",
  "type": "optin"
}


 


Disposition sur la page :


La disposition des champs est géré avec Flexbox Grid, une bibliothèque sass. Partez du principe que votre page est découpée verticalement sur 12 portions.




    

  1. "col-xs-12" renvoie au format mobile, et prend 100% de la largeur de la page (12/12)
    2. 

  2. "col-sm-8" renvoie au format desktop, et prend 66% de la largeur de la page (8/12)
    3. 

  3. "col-md-offset-2" renvoie encore une fois au format desktop, et indique que le champ devra se décaler de 2/12 sur la page.
    4. 



Pour plus d'informations, réferez vous à la documentation officielle de Flexbox Grid
                                    


LeadFactory (Directus)





            


    
LeadFactory (Directus)



1. Présentation


Principe de fonctionnement


Chaque scénario correspond à une campagne et permet de générer automatiquement une landing page complète, incluant :



Une fois le scénario configuré dans Directus, LeadFactory se charge automatiquement de :



Rôle de Directus


Directus agit comme back-office central et headless CMS :



Il permet à des équipes non techniques de créer et maintenir des campagnes complexes, tout en garantissant un cadre technique robuste et maîtrisé.


Architecture (vue d’ensemble)



Valeur ajoutée



Accès à la plateforme


👉 URL de connexion admin :
https://leadfactory.apps.hyundai.media/admin/login
            


    
LeadFactory (Directus)



Nouvelle page


test
            


    
LeadFactory (Directus)



2. Interface


Pages principales


Le projet est structuré autour de quatre pages principales :



Collections principales : 


LeadFactory repose sur quatre collections clés :



Capture d’écran 2025-12-22 à 15.14.18.png


Détails de la collection Scénario


L'interface de Directus permet de naviguer, filtrer, rechercher facilement des informations en fonction de différents critères. Il est même possible d'ajouter des colonnes afin d'obtenir plus d'informations. 





Capture d’écran 2025-12-22 à 15.48.08.png


    

  1. Bouton de tri des scénarios : Lorsqu’il est activé (icône blanche), il permet de modifier l’ordre d’affichage des scénarios.
    2. 

  2. Boutons de gestion de la collection : Permettent de trier la liste et d’ajouter de nouveaux scénarios.
    3. 

  3. Bouton d’ajout de champ liés aux scénarios

    ⚠️ Fonctions suivantes disponibles uniquement avec le plug-in Chrome  directus-scenario-thumbnails-crome installé. ⚠️plugin-chrome-directus-V2.zip

    4. 

  4. Redirection vers le scénario : Au click sur le short_id, permet d’accéder directement au scénario après sa création.
    5. 

  5. Aperçu des slides du scénario :  Un clic permet de les agrandir, de lire les vidéos si présentes et de naviguer entre elles.
    6. 

            


    
LeadFactory (Directus)



3. Collection scénario


Préambule 


La collection Scénario constitue le cœur fonctionnel de LeadFactory.
C’est à partir de cette collection que sont définies, configurées et pilotées l’ensemble des landing pages générées par la plateforme.


Un scénario regroupe, au sein d’une même configuration, tous les éléments nécessaires à une campagne :
contenus médias, structure visuelle, formulaire multi-étapes, véhicules associés, mentions légales et paramètres de tracking.


Chaque scénario publié correspond à une landing page active, automatiquement générée et prête à collecter des leads.
Cette approche permet de standardiser les parcours, d’assurer la cohérence des données collectées et de faciliter la mise en ligne rapide de nouvelles campagnes, sans développement spécifique.


La collection Scénario offre ainsi un point d’entrée unique pour créer, maintenir et faire évoluer les campagnes LeadFactory, tout en garantissant un cadre robuste, scalable et orienté performance.


1. Paramètres généraux 


Ces paramètres permettent d’identifier le scénario, de contrôler sa mise en ligne et d’assurer le suivi marketing.





Capture d’écran 2025-12-22 à 15.22.26.png


2. Paramètres des Slides 


Cette partie constitue la partie "Slide" à gauche de la landing page. Si aucun média n’est renseigné, la partie visuelle de la landing page ne sera pas affichée.





Capture d’écran 2025-12-22 à 15.25.54.png


3. Paramètres Formulaires


Ces paramètres définissent le formulaire affiché sur la landing page, son contenu et con comportement après soumission





Capture d’écran 2025-12-22 à 15.30.59.png


4. Paramètres Autres





Capture d’écran 2025-12-22 à 15.34.23.png


            


    
LeadFactory (Directus)



4. Création de scénario


Tuto à venir
                                    




5. Affichage des scénarios