Introduction aux modèles

Démarrage rapide — Créez une salle d’attente personnalisée en quelques minutes.

Voir aussi : Balisage et structure des modèles | État et méthodes des modèles | Mise en forme et variables CSS

Trois étapes pour créer une salle d'attente à l'image de votre marque

La personnalisation du modèle de salle d'attente est très simple. Ouvrez le fichier HTML dans un éditeur de texte, modifiez quelques variables CSS pour l'adapter à votre image de marque, et le tour est joué. Pas besoin d'outils de développement ni de frameworks à maîtriser : il suffit de modifier le code et d'actualiser la page.

1. Ouvrez le modèle

Ouvrir index.html à la fois dans un éditeur de texte et un navigateur. Vers le début du fichier, vous trouverez un <style> bloc avec des propriétés CSS personnalisées — celles-ci déterminent l'apparence générale de la salle d'attente :

<style>
  :root {
    --ch-brand-primary:    #424242;   /* Title, accent, stock pill */
    --ch-brand-secondary:  #4b4b4b;   /* Buttons, focus rings */
    --ch-bg:               #FFFFFF;   /* Page background */
    --ch-surface:          #F0F4F8;   /* Card / panel backgrounds */
    --ch-progress-color:   #004f84;   /* Progress bar colour */
  }
</style>

Modifiez les valeurs hexadécimales pour les adapter aux couleurs de votre marque, enregistrez, puis actualisez la page. Et voilà : le moteur du thème génère automatiquement toutes les autres couleurs (contraste du texte, états au survol, bordures, ombres).

2. Définissez vos polices (facultatif)

Pour utiliser une police personnalisée, ajoutez un @import en haut de la même page <style> bloquer et remplacer la variable de police :

<style>
  /* Import your fonts first */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

  :root {
    --ch-font-primary: 'Inter', -apple-system, BlinkMacSystemFont,
                       'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
</style>

Prévoyez toujours des polices de secours après votre police personnalisée afin que la page s'affiche correctement pendant le chargement des polices. Si vous omettez le @import, le navigateur ne disposera pas des fichiers de polices et passera alors à la première police de secours disponible.

3. Prévisualisez vos modifications

Le modèle comprend un <script id="crowdhandler-data"> balise avec un objet de configuration JSON. Ajouter « dev » : true pour passer en mode aperçu, qui vous permet de tester tous les états de la file d'attente sans vous connecter à l'API en production :

<script id="crowdhandler-data" type="application/ld+json">
{
    "dev": true,
    "status": 1,
    "title": "My Event",
    "position": 150,
    "estimate": 12,
    "simulatePolling": true
}
</script>

Modifier statut pour afficher les différents états (1 = file d'attente active, 3 = bloqué, 4 = compte à rebours, 5 = salle pleine). Enregistrez puis actualisez la page pour prévisualiser chacun d'entre eux. Supprimer « dev » lorsque vous serez prêt à mettre votre site en ligne.

Aller plus loin

Les étapes ci-dessus suffisent pour créer une salle d'attente à l'image de votre marque. Si vous souhaitez avoir un contrôle total sur la mise en page, le fonctionnement et les fonctionnalités, les guides détaillés couvrent tous les aspects :

  • Balisage et structure des modèles — Structure HTML, directives Vue, hiérarchie des états de la file d’attente, et comment ajouter ou supprimer des fonctionnalités telles que les notifications par e-mail, les codes de priorité et les indicateurs de stock.
  • État et méthodes de Vue — L'intégralité ch Référence d'objet : chaque propriété, son type et ce qu'elle contrôle. Comprend les méthodes de formulaire et les fonctions d'aide disponibles dans le modèle.
  • Mise en forme et variables CSS — La liste complète des propriétés CSS personnalisées, le fonctionnement du moteur de thème à deux niveaux et comment remplacer des propriétés structurelles telles que l'espacement, le rayon des bordures et la hauteur de la barre de progression.