¶ 1- Qu'est-ce qu'un widget ?
Un widget est un élément graphique qui s’intègre sur vos pages numériques et qui redirige l’utilisateur vers le détail de vos données d’accessibilité, hébergées sur nos serveurs. Il permet de résumer votre accessibilité de manière simple et lisible pour qu’elle figure sur votre site internet.
Son bénéfice est prouvé : la MAIF comptabilise 4 000 clics sur ses widgets par mois pour l’ensemble de ses agences.
API ou Widget ?
Si vous désirez uniquement présenter les données sur votre application, nous vous conseillons d’utiliser notre widget, qui est plus facile à mettre en place.
Si vous voulez mettre en place un système plus « riche » (par exemple un filtrage des établissements que vous présentez sur base des niveaux d’accessibilités pour une fragilité donnée), l’API est la bonne solution. Vous pourrez trouver la documentation associée ici.
¶ 2- Comment intégrer mon widget sur mon site internet ?
Si vous avez reçu un/des liens IFRAME bruts, vous pouvez insérer votre widget en suivant la démarche présentée en A.
Sinon, vous avez reçu un couple d'identifiant et de mot de passe pour vous connecter à notre tableau de bord. Référez-vous donc à l'option B.
¶ A- En intégrant le code iframe directement :
Votre référent Picto Access vous a envoyé un tableau excel sur lequel vous trouverez directement le lien IFRAME de votre widget, qu'il vous faut copier pour l'intégrer sur votre site.
Le tableau prend la forme suivante :
Seule la variable uid=CODE_UID_DE_VOTRE_PAGE changera et sera unique pour chacune de vos pages.
¶ B- En vous connectant sur notre tableau de bord :
-
Munissez-vous des identifiants que vous avez reçu par mail et connectez-vous à l’adresse suivante : https://dashboard.pictoaccess.fr
-
Cliquez sur le menu à gauche, "Mes pages". Sélectionnez ensuite l'établissement dont vous souhaitez valoriser l'accessibilité sur votre site.
Pour cela, cliquer sur le menu à gauche « Mes pages » , puis cliquer sur le nom de l’établissement, comme sur l'exemple ci-dessous :
Vous devriez dès lors vous retrouver sur la vue résumée de l’établissement.
- Cliquer ensuite sur « Intégration », puis « Widget » (menu de gauche), comme sur l'exemple ci-dessous :
Vous êtes alors dirigés vers cet onglet qui vous indique le code à inclure dans la page de votre site sur laquelle vous souhaitez afficher le widget.
Voici un exemple de code à ajouter sur votre site web :
<iframe
title="widget-picto"
src="https://widget.pictoaccess.fr/accessibility?uid=CODE_UID_DE_VOTRE_PAGE&button-color=81c25d"
height="200"
width="400"
style="border: none;"
/>
¶ C- Bonnes pratiques
Nous vous conseillons vivement d'intégrer votre widget sur les pages "Informations pratiques", "Contacts" ou "Accès" de votre site internet.
Faites attention à ne pas intégrer votre widget sur votre page d’accueil ou sur le bandeau de votre site : nous ne pouvons pas bien mesurer le nombre de clics sur votre widget lorsqu’il figure sur une page d’accueil.
N'oubliez pas d'accompagner votre widget d'un titre "Accessibilité".
Vous pouvez également y ajouter un sous-titre : " Nos équipes mettent tout en oeuvre pour garantir l'accessibilité de l'établissement, ce que Picto Access certifie régulièrement. Cliquez sur l'image pour en savoir plus sur notre accessibilité."
¶ 3- Comment personnaliser mon widget pour l'adapter à mon site ?
Si vous avez besoin de changer la taille de votre widget, vous pouvez le faire en modifiant votre iframe selon les modèles suivants :
- Widget Complet
<iframe
id="pictoAccess"
src="https://widget.pictoaccess.fr/accessibility?uid=0b1970b8-39eb-45da-bb75-bc2726539212&"
style="background: #FFFFFF; border: none;"
/>
- Widget restreint
<iframe
id="pictoAccess"
src="https://widget.pictoaccess.fr/accessibility?uid=0b1970b8-39eb-45da-bb75-bc2726539212"
height="100"
style="background: #FFFFFF; border: none;"
/>
- Widget 2 lignes
<iframe
id="pictoAccess"
src="https://widget.pictoaccess.fr/accessibility?uid=0b1970b8-39eb-45da-bb75-bc2726539212"
width="160"
height="200"
style="background: #FFFFFF;"
/>
Vous pouvez modifier la hauteur et la largeur du widget grâce aux propriétés
height&width
N'oubliez pas de remplacer l'UID de ces iframes modèles par le vôtre afin d'intégrer votre widget d'accessibilité.
¶ 4- Intégrer mon widget sur un logiciel de conception de sites web
¶ Valoriser mon widget sur Wordpress
Cliquez ici pour accèder au guide d'intégration sur Wordpress :
¶ Valoriser son widget sur Jimdo
Cliquez ici pour accèder au guide d'intégration sur Jimdo
¶ Valoriser son widget sur Wix
Cliquez ici pour accèder au guide d'intégration sur Wix
¶ Valoriser son widget sur Weebly
Cliquez ici pour accèder au guide d'intégration sur Weebly
¶ Exemples & cas clients
- Les intégrations Widget de la Métropole Européenne Lilloise
https://medium.com/pictoaccess-blog/la-mel-valorise-son-accessibilit%C3%A9-avec-picto-access-bc7c4bda20fe
¶ Informations supplémentaires et contact
Si vous désirez une modification ou de nouveaux widgets contactez le référent pour en discuter.
Si vous désirez des informations supplémentaires, veuillez contacter le référent par mail : admintech@pictoaccess.fr