Intégrer le widget exposants

Le widget exposants permet d’afficher la liste de vos exposants directement sur votre site web externe (site vitrine de l’événement, CMS, etc.). Il se configure entièrement depuis Eveos : recherche, filtres par taxonomie, mise en page en grille ou en carrousel, pagination, apparence et même templates HTML personnalisés.

Les widgets se gèrent au niveau de la session, dans « Paramètres » → « Widgets ».

Ouvrez la session concernée.
Dans la sidebar, ouvrez « Paramètres » puis « Widgets ».
Cliquez sur « Créer un widget ».
Renseignez les champs de base :
- « Nom » et « Description » (usage interne) ;
- « Type de contenu » : choisissez Exposants ;
- « Modèle » : mise en page prédéfinie (grille, liste…) ;
- « Langue » du rendu ;
- « Pagination » et « Éléments par page » ;
- « Domaines autorisés » : les sites web autorisés à intégrer le widget ;
- « Actif » : un widget inactif ne s’affiche plus sur le site.
Cliquez sur « Enregistrer ».

Barre de recherche et filtres

La section « Barre de recherche » contrôle les outils de recherche mis à disposition des visiteurs :

« Activer la barre de recherche » : affiche ou masque toute la barre.
« Activer la recherche textuelle » : champ de recherche libre, avec un « Texte indicatif » personnalisable.
« Activer le filtrage par taxonomie » : ajoute des listes déroulantes de filtres basées sur vos taxonomies (secteur d’activité, pays…). Utilisez « Sélectionner les taxonomies » pour choisir lesquelles proposer.
« Masquer les taxonomies vides » : n’affiche pas les filtres sans résultat.
« Masquer le nombre de résultats à côté des termes » : masque les compteurs dans les listes déroulantes.
« Activer le filtrage par module lié » : filtres basés sur des modules personnalisés liés aux exposants.
« Libellé du bouton de réinitialisation » : texte du bouton qui efface tous les filtres.

Le style de la barre (fond, texte, bordure, rayon, ombre, police…) se règle dans la même section.

Options d’affichage

La section « Options d’affichage » rassemble ce qui apparaît sur les cartes d’exposant :

« Désactiver le clic » : les cartes ne sont plus cliquables et la fenêtre de détail ne s’ouvre jamais. Utile pour un simple bandeau de logos.
« Masquer le nom » : n’affiche que le logo. Le nom reste dans le texte alternatif de l’image et dans la fenêtre de détail.
« Masquer le stand » : masque le numéro de stand sur les cartes.
« Initiales sans photo » : pour les exposants sans logo, affiche des initiales — « Deux lettres (ex. JD / AC) » ou « Une seule lettre (ex. J / A) ».

Avec le modèle grille, trois réglages supplémentaires apparaissent :

« Taille des cartes » : auto ou une taille fixe (xs à xl). Avec une taille fixe, les cartes passent à la ligne naturellement.
« Éléments par ligne » : nombre fixe de colonnes (utilisé quand la taille des cartes est sur auto).
« Centrer les éléments » : centre la dernière ligne si elle est incomplète.

Cadre des logos

Les logos déposés par les exposants ont des formes très inégales : certains sont carrés, d’autres sont des logotypes très allongés. Sans cadrage, la grille paraît déséquilibrée.

Le réglage « Cadre des logos » donne à chaque logo le même encombrement : Désactivé, Petit (80px), Moyen (120px), Grand (180px), Très grand (240px) ou Personnalisé.

Une fois activé, il ouvre ces options :

« Marge intérieure » : l’air laissé autour du logo dans son cadre.
« Ratio de largeur » : la largeur du cadre vaut sa hauteur multipliée par ce ratio. 1 donne un carré ; augmentez-le vers 1,6 ou 2 pour laisser respirer les logos textuels allongés. Tous les cadres gardent la même largeur, l’alignement reste donc parfait.
« Dimensionnement » :
- Contenir — chaque logo remplit son cadre au maximum. Simple, mais un logo carré paraîtra bien plus imposant qu’un logotype allongé.
- Optique — égalise la surface réellement occupée par chaque logo. C’est le réglage à privilégier pour un bandeau de partenaires équilibré.
« Remplissage cible » (mode optique) : part du cadre que chaque logo doit occuper. 55 à 65 % donne généralement un bon résultat.
« Agrandir les petits logos » : désactivé par défaut, car agrandir un fichier trop petit le rend flou.

Si certains logos restent visiblement plus petits que les autres après passage en mode optique, activez « Agrandir les petits logos » : leur fichier source est probablement plus petit que la taille de rendu visée.

Pagination

Quatre modes sont disponibles :

Mode	Comportement
« Aucune »	Tous les exposants sont chargés d’un coup.
« Charger plus »	Un bouton charge la page suivante.
« Numéros de page »	Navigation classique par numéros de page.
« Défilement infini »	La suite se charge automatiquement au scroll.

Carrousel

Le modèle « Carrousel » affiche les éléments sur une seule ligne défilante. Il est disponible pour les exposants, le programme et les intervenants, et se règle dans la section « Carrousel ».

Mouvement

Mode	Comportement
« Par à-coups (manuel) »	Défilement classique, élément par élément.
« Diaporama automatique »	Avance seul, avec un « Délai entre les éléments » réglable.
« Déplacement libre »	Le visiteur fait glisser avec de l’inertie.
« Défilement continu (bandeau) »	Flux ininterrompu, façon bandeau de logos. « Vitesse de défilement » et « Sens » réglables.

Certains visiteurs activent, dans les réglages d’accessibilité de leur ordinateur ou de leur téléphone, une option qui limite les animations — elle s’appelle « Réduire les animations » sous Windows, macOS, iOS et Android. Pour ces personnes, le carrousel s’affiche immobile et se fait défiler à la main. C’est automatique : vous n’avez rien à configurer.

Mise en page

« Éléments visibles » :
- Auto (largeur du contenu) — chaque élément prend la largeur de son contenu ;
- Égale (élément le plus large) — tous les éléments adoptent la largeur du plus large d’entre eux ;
- un nombre de 1 à 6, avec des valeurs distinctes pour « Tablette » et « Mobile ».
« Espacement » : l’écart entre les éléments, en pixels.
« Alignement » : Début, Centre ou Fin.
« Boucle » : repart du premier élément après le dernier.
« Glisser / balayer » : autorise le déplacement à la souris ou au doigt.
« Pause au survol » : suspend le défilement automatique quand la souris entre dans le carrousel.
« Flèches précédent / suivant » et « Points de pagination ».

Apparence

« Fond du bandeau » : couleur derrière l’ensemble du carrousel.
« Fond des éléments » : mettez une transparence totale pour un bandeau de logos sans cadre.
« Épaisseur de bordure » et « Couleur de bordure » : une épaisseur de 0 supprime la bordure.
« Arrondi des angles », « Hauteur des éléments », « Marges intérieures » horizontale et verticale.
« Ombre des éléments ».
« Noir et blanc » : Désactivé, Toujours, ou Couleur au survol — s’applique uniquement aux images.

Filtrer les exposants affichés

Indépendamment des filtres visibles par les visiteurs, vous pouvez restreindre les exposants inclus dans le widget : par catégorie, statut, tags, présence d’une photo ou d’une description, profil complet, ou via une requête avancée.

Templates personnalisés

Pour un contrôle total du rendu HTML, le widget accepte un template personnalisé avec variables et blocs de contrôle :

Variables : {{id}}, {{name}}, {{description}}, {{boothNumber}}, {{logoUrl}}, {{websiteUrl}}, {{category}}.
Blocs de contrôle :
- {{#each items}}…{{/each}} : boucle sur les exposants ;
- {{#if variable}}…{{/if}} : affichage conditionnel ;
- {{#if variable}}…{{else}}…{{/if}} : avec alternative.

Un assistant intégré au formulaire liste les variables disponibles et insère les blocs pour vous.

CSS et JavaScript personnalisés

La section « Avancé » permet d’aller plus loin :

« CSS personnalisé » : styles injectés sur la page hôte avec le widget.
« JavaScript personnalisé » : code exécuté après le rendu du widget. Les variables container (élément DOM du widget) et config (configuration du widget) sont disponibles.

Le « Code d’intégration » est disponible dans le formulaire du widget. Copiez-le puis collez-le dans la page HTML de votre site :

<div id="eveos-widget-WIDGET_ID"></div>
<script
  src="https://dashboard.eveos.com/embed/v1/loader.js"
  data-widget-id="WIDGET_ID"
  data-organizer-id="ORGANIZER_ID"
  data-project-id="PROJECT_ID"
  data-session-id="SESSION_ID"
  data-target="#eveos-widget-WIDGET_ID"
></script>

Filtre verrouillé par taxonomie

L’attribut optionnel data-taxonomy-filter fige un filtre que le visiteur ne peut pas modifier — pratique pour afficher, par exemple, uniquement les exposants d’un secteur sur une page dédiée :

data-taxonomy-filter="secteur:sante;pays:france"

Le format est cleTaxonomie:terme, avec ; pour combiner plusieurs filtres (tous doivent correspondre).
Les taxonomies verrouillées disparaissent des listes déroulantes visibles.

Mise à jour et cache

Les données du widget sont mises en cache pour garantir de bonnes performances : vos modifications apparaissent sur le site en général en moins d’une minute. Pour vérifier un changement immédiatement, ajoutez ?eveos-preview=1 à l’URL de la page hôte (ou data-preview="1" sur le script) : le mode aperçu ignore le cache.