Prérequis : Paramétrer ses recherches et projets côté SIT 

Avant d’utiliser le Studio Widgets, vous devez disposer d’un projet validé de diffusion Apidae de type “Widget”, avec des sélections calculées.

Si ce n’est pas déjà fait, vous devrez créer un projet numérique dédié.

Les étapes détaillées de création d’un projet sont présentées ici :
👉 Créer son projet numérique pour le studio widget

Une fois cette étape réalisée, les sélections ajoutées à votre projet seront automatiquement disponibles dans le Studio Widgets.

Étape 2 - Créer un nouveau widget 

Pour créer un nouveau widget, cliquez sur le bouton "Créer un nouveau widget"

Une pop-up s'ouvre :

Renseignez :

• un nom (nom interne pour votre organisation),

• un template parmi les formats disponibles :

  • Liste d’offres

  • Carte interactive

  • Agenda

  • Carrousel

  • Combinaisons (Liste + Carte, Agenda + Carte…)

Vous accédez ensuite à l'interface d'édition présentée ci-dessous.

Étape 3 - Éditer un widget

Pour modifier un widget existant, cliquer sur le crayon en bout de ligne : 

L'écran d'édition se divise en 2 parties : 

1. La zone de paramétrage, sur la partie gauche de l'écran, 

2. La zone de prévisualisation, sur la partie droite de l'écran.

Le paramétrage est découpé en plusieurs sections dépliables : 

Informations

Cette section regroupe les informations essentielles :

• Nom : Correspond au nom et au titre du widget.

• Template : type d’affichage choisi.

• URL du site hôte : site sur lequel le widget sera intégré. 
  L’adresse doit être complète et avec le "https://" ou "http://"

  Attention : tous les sites n’utilisent pas « www ». Renseignez l’adresse telle qu’elle apparaît dans votre navigateur.

• Sélection : source de données correspondant aux sélections de votre projet ou vos projets type "widget".

Style

Personnalisez l’apparence graphique du widget :

• Logo : Vous avez la possibilité de charger un logo, et de paramétrer une URL de redirection au clic sur ce logo.

• Couleurs : Principale et Secondaire

• Police : Titre et Corps, vous avez la possibilité de choisir une des polices proposées ainsi que sa couleur

L’objectif : assurer une intégration harmonieuse sur votre site web.

Périmètre géographique

Sélectionnez (si nécessaire) la zone couverte par votre widget :

• Une ou plusieurs communes (Par défaut, toutes les communes sont incluses dans le widget)

• Ou une zone circulaire à partir de coordonnées GPS.

Contenu

Définissez :

• La langue du widget

• Les versions de fiche à afficher (aspect)

• Les offres à exclure si nécessaire

   

Champs - Résultats de recherche

Sélectionnez les informations affichées dans chaque carte de la liste de résultats sous le nom de l'offre. 

Vous ne pourrez en ajouter que 2 dans cette première version.

Champs - Détails de l'offre

Sélectionnez les informations affichées dans la fiche détaillée :

Filtres

Choisissez les critères de recherche mis à disposition des visiteurs.

Cela permet à l’internaute d’affiner sa recherche.

Paramétrage avancé

Une section avancée permet d’ajouter une surcouche CSS personnalisée.

Cette option est destinée aux utilisateurs disposant de compétences techniques ou travaillant avec une agence web. Elle permet d’aller plus loin dans la personnalisation graphique.

Pensez bien à sauvegarder vos modifications avant de quitter votre page ! 

Intégrer un widget sur son site

Une fois votre widget configuré :

1. Récupérez le code d’intégration dans la section "Avancé"

2. Copiez-le en cliquant sur le bouton "Copier le code" 

3. Collez-le dans la page de votre site web

Aucune installation technique complexe n’est nécessaire. Vous pouvez installer plusieurs widgets sur une même page.

👉 Si vous disposez de plusieurs sites, vous devrez créer un widget par site (une URL hôte par widget).

Lire aussi :

• Widgets Apidae 2026 : principes généraux
• Etape 1 - Création d'un projet numérique pour le Studio de widgets