L'extrait et ses attributs

Anatomie de l’extrait

<script async src="https://annuairesolidaire.fr/widget/v1.js"
  data-annuaire-config="eyJ2IjoxLCJ6b25lIjp7InR5cGUiOiJjb21tdW5lIiwiY29kZSI6IjMzMjQzIn19"
  data-annuaire-titre="Aides et services à Libourne"></script>

Élément	Rôle
src="https://annuairesolidaire.fr/widget/v1.js"	Le script chargé depuis notre domaine, version 1 du widget. async : il ne ralentit pas l’affichage de votre page.
data-annuaire-config	Votre configuration complète (zone, besoins, titre, couleur, fiches mises en avant ou masquées), encodée. Générée par le configurateur, décrite dans la référence.
data-annuaire-titre	L’intitulé du cadre, lu par les lecteurs d’écran (attribut title de l’iframe), écrit par le configurateur d’après votre titre ou la zone.

Le script fait quatre choses, dans votre page :

1. il lit la configuration dans l’attribut, sans l’envoyer nulle part ;
2. il crée à sa place un cadre (iframe) qui affiche le widget, https://annuairesolidaire.fr/widget/v1/, en lui transmettant la configuration ;
3. il pose sous le cadre la ligne de crédit « Propulsé par Annuaire Solidaire, données data·inclusion », avec ses deux liens ;
4. il ajuste la hauteur du cadre à son contenu à chaque changement (liste, fiche ouverte, filtres), et ramène le cadre à l’écran quand une fiche s’ouvre alors que la page avait défilé.

Attributs facultatifs

Attribut	Effet	Défaut
data-annuaire-titre	Intitulé du cadre, lu par les lecteurs d’écran (attribut title de l’iframe). Le configurateur le remplit d’après votre titre ou la zone ; modifiez-le librement, par exemple pour distinguer deux widgets d’une même page.	« Annuaire des aides et services », si l’attribut est retiré

<script async src="https://annuairesolidaire.fr/widget/v1.js"
  data-annuaire-config="eyJ2IjoxLCJ6b25lIjp7InR5cGUiOiJjb21tdW5lIiwiY29kZSI6IjMzMjQzIn19"
  data-annuaire-titre="Aides au logement à Libourne"></script>

Où le coller

Dans le corps de la page, à l’endroit exact où le widget doit apparaître, jamais dans l’en-tête du document ni dans un pied de page commun à tout le site. Le widget prend toute la largeur de son conteneur : une colonne de 600 à 900 pixels lui convient bien, il reste lisible jusqu’à 320 pixels.

Plusieurs widgets peuvent cohabiter sur un site, y compris sur une même page, chacun avec son extrait et sa configuration : une page par intercommunalité, un widget « logement » et un widget « emploi », etc.

La ligne de crédit

Elle est posée dans votre page, sous le cadre, dans un paragraphe de classe annuaire-widget-credit, et fait partie des conditions d’utilisation. Elle hérite de la typographie de votre site et vous pouvez en ajuster la taille, la couleur ou l’alignement, à condition qu’elle reste visible et lisible, avec ses liens.

Le cadre et le crédit sont enveloppés dans un div de classe annuaire-widget, si vous souhaitez leur donner une marge ou une largeur.

Conserver et modifier l’extrait

L’extrait est votre configuration : nous n’en gardons aucune copie. Conservez-le avec les sources de votre page. Pour le modifier, collez-le dans la section « Vous avez déjà un extrait ? » du configurateur : il retrouve la zone, les besoins, le titre, la couleur et les fiches curées, vous modifiez, et vous repartez avec un nouvel extrait à substituer à l’ancien.

Sans script : l’iframe seule

Si votre outil refuse toute balise script mais accepte les iframes, vous pouvez poser le cadre vous-même :

<iframe src="https://annuairesolidaire.fr/widget/v1/#eyJ2IjoxLCJ6b25lIjp7InR5cGUiOiJjb21tdW5lIiwiY29kZSI6IjMzMjQzIn19"
  title="Aides et services à Libourne"
  style="display:block;width:100%;border:0;height:1200px"></iframe>
<p>Propulsé par <a href="https://annuairesolidaire.fr/">Annuaire Solidaire</a>,
  données <a href="https://data.inclusion.gouv.fr/">data·inclusion</a>.</p>

La valeur après le # est la même que celle de data-annuaire-config. Deux limites : la hauteur ne s’ajuste plus au contenu (le cadre a un ascenseur interne au-delà de la hauteur fixée, choisissez-la large), et la ligne de crédit est à écrire vous-même, comme ci-dessus. Préférez l’extrait avec script chaque fois que c’est possible.