Ajouter des modèles

Remarque : les modèles personnalisés sont une fonctionnalité réservée aux abonnements payants.

L'écran « Modèles » vous permet de télécharger, de prévisualiser et de mettre à jour des modèles personnalisés.

Changement de logo#

Vous pouvez utiliser le panneau de téléchargement de logo pour importer votre logo. Celui-ci sera utilisé dans tous les modèles standard. La zone de téléchargement de logo prend en charge les formats PNG, GIF et JPEG. Le logo sera inséré dans le modèle à sa taille réelle ; veillez donc à le recadrer et à le redimensionner afin qu’il s’adapte à la mise en page de la salle d’attente avant de le télécharger. Nous vous recommandons une hauteur et une largeur d’environ 300 pixels.

Aperçu d'un modèle#

Cliquez sur l'icône d'aperçu pour voir à quoi ressemble le modèle en situation réelle. Des boutons vous permettent de simuler différents états de la salle d'attente, par exemple « en attente » ou « pré-vente ».

Télécharger un modèle#

Vous pouvez télécharger un modèle standard pour voir comment il est structuré, ou télécharger l'un de vos propres modèles personnalisés au cas où vous auriez égaré votre mot de passe GitHub.

Les modèles seront téléchargés sous forme de fichiers ZIP. Vous pouvez modifier le modèle dans votre éditeur HTML préféré, puis le remettre en ligne en tant que modèle personnalisé. Le modèle utilise les directives Vue 3 pour afficher de manière conditionnelle certaines sections en fonction de l'état de la file d'attente.

<!-- Container that shows when loaded -->
<div id="crowdhandler-template" :class="{ 'active': ch.isLoaded }" role="main">
  <!-- Screen reader announcements -->
  <div class="ch-sr-only" aria-live="polite" aria-atomic="true">{{ ch.announcement }}</div>

  <!-- Your template content -->

  <!-- Captcha container (required if captcha is enabled) -->
  <div id="ch-captcha-form"></div>

  <!-- Script inclusion -->
  <script type="module" src="/src/main.js"></script>
</div>

Les valeurs par défaut du modèle sont utilisées pendant l'établissement de la connexion. Cela signifie que tout le texte affiché sur la page provient soit directement du modèle, soit du contenu que vous avez ajouté dans le panneau de configuration, soit il s'agit de données numériques, ce qui rend les modèles indépendants de la langue.

Pour vous lancer avec les modèles personnalisés, consultez notre guide.

Importer un modèle#

Les modèles peuvent être importés sous forme de fichier ou chargés en direct à partir d'une URL.

Intégration d'un modèle via une URL#

Le principal avantage du chargement par URL est que vous pouvez créer le modèle sur votre propre site web sous la forme d'un simple fichier HTML. Une fois l'URL ajoutée au panneau de configuration, toute modification apportée à votre modèle sera automatiquement répercutée dans CrowdHandler. Cela signifie que vous pouvez intégrer la mise en page du modèle à votre site web.

Mieux encore : si vous utilisez un CMS, l'URL peut être dynamique, ce qui signifie que vous pouvez gérer le contenu de votre page « salle d'attente » comme n'importe quelle autre page de votre site. Veillez simplement à utiliser les bons identifiants et à ne pas perturber le code JavaScript de la salle d'attente.

Nous mettrons en cache le contenu de votre page pendant environ une minute ; ainsi, même si des milliers d'utilisateurs accèdent à votre salle d'attente, nous ne vous interrogerons qu'une fois par minute pour obtenir les mises à jour.

Importer un modèle#

Vous pouvez télécharger un modèle directement en pièce jointe. Attention : cela ne concerne que les fichiers HTML. Tous les fichiers externes que vous pourriez utiliser, notamment les fichiers JavaScript, CSS et les images, doivent être hébergés séparément sur des domaines sécurisés (https://) afin d'éviter l'affichage d'avertissements relatifs à un contenu non sécurisé.

Important: relative URLs, for links and assets, etc., will not resolve to your domain. You can either ensure all URLs are absolute or add a base element to your template. e.g. <base href="https://www.crowdhandler.com/"> This will affect all of your relative URLs.