La Gaufre v2

La Gaufre v2 est une évolution de la première version historique, qui ajoute plusieurs fonctionnalités :

Un design en accord avec le UI Kit de LaSuite.
Un chargement des services à afficher en JSON, qui peut être effectué via une API dynamique ou fichier statique.
L’utilisation du “Shadow DOM” qui permet aux styles du widget d’être indépendants de ceux de la page

En configurant la Gaufre v2, il est possible de changer son contenu ou même son apparence.

Voici par exemple une Gaufre pour la Suite territoriale :

Intégration

Il y a deux façons principales d’intégrer La Gaufre v2 dans votre service:

1. Via le composant React

Ce composant, qui intègre le bouton “Gaufre” ainsi que la pop-in, sera bientôt disponible dans le UI Kit.

En attendant, vous pouvez copier ce composant.

2. Via le script JavaScript

Cette option est à privilégier si vous n’utilisez pas React ou si vous ne souhaitez pas intégrer l’UI Kit dans votre application.

Dans ce cas, vous devez intégrer le bouton “Gaufre”. Le script gérera la pop-in et s’occupera de mettre à jour les attributs nécessaires sur le bouton lors des interactions.

Voici un exemple complet d’intégration dans ce cas :

<button type="button" id="gaufre_button" aria-label="Ouvrir la Gaufre" aria-expanded="false">
  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <path fill="#000091" id="square" d="M2.7959 0.5C3.26483 0.5 3.49956 0.49985 3.68848 0.564453C4.03934 0.684581 4.31542 0.960658 4.43555 1.31152C4.50015 1.50044 4.5 1.73517 4.5 2.2041V2.7959C4.5 3.26483 4.50015 3.49956 4.43555 3.68848C4.31542 4.03934 4.03934 4.31542 3.68848 4.43555C3.49956 4.50015 3.26483 4.5 2.7959 4.5H2.2041C1.73517 4.5 1.50044 4.50015 1.31152 4.43555C0.960658 4.31542 0.684581 4.03934 0.564453 3.68848C0.49985 3.49956 0.5 3.26483 0.5 2.7959V2.2041C0.5 1.73517 0.49985 1.50044 0.564453 1.31152C0.684581 0.960658 0.960658 0.684581 1.31152 0.564453C1.50044 0.49985 1.73517 0.5 2.2041 0.5H2.7959Z" />
    </defs>
    <use href="#square" transform="translate(0, 0)"/><use href="#square" transform="translate(6.5, 0)"/><use href="#square" transform="translate(13, 0)"/><use href="#square" transform="translate(0, 6.5)"/><use href="#square" transform="translate(6.5, 6.5)"/><use href="#square" transform="translate(13, 6.5)"/><use href="#square" transform="translate(0, 13)"/><use href="#square" transform="translate(6.5, 13)"/><use href="#square" transform="translate(13, 13)"/>
  </svg>
</button>

<script src="https://cdn.votresuite.fr/lagaufre.js" async></script>

<script>

const button = document.getElementById("gaufre_button");

window._lasuite_widget = window._lasuite_widget || [];
_lasuite_widget.push(['lagaufre', 'init', {
    api: 'https://lasuite.numerique.gouv.fr/api/services',
    label: "Services de la Suite numérique",
    closeLabel: "Fermer le menu",
    headerLabel: "À propos",
    loadingText: "Chargement…"
    newWindowLabelSuffix: " (nouvelle fenêtre)",
    buttonElement: button,
    position: () => {
      return {
        position: "absolute",
        top: button.offsetTop + button.offsetHeight + 10,
        right: window.innerWidth - button.offsetLeft - button.offsetWidth
      }
    }
}]);
</script>

Vous pouvez tester cet exemple sur cette page dédiée.

Nous avons une documentation interactive avec plusieurs autres exemples de configuration.

Intégrations existantes

Vous pouvez tester La Gaufre v2 en ligne sur ces services :

Suite territoriale - Messages