PIMS - Tutoriel d'intégration

Exemples d'intégration

Exemple 1 : Intégration avec le header du site

Exemple 2 : Intégration avec un header différent / custom*

* Je laisse en effet la possibilité de customiser un header dans l'éventualité où le site hébergeur n'est pas un site gouvernemental.

Une autre possibilité est de pouvoir laisser la possibilité au site externe de ne pas afficher le header. Cependant, il faut toujours avoir accès aux fonctionnalités de changement de thème et de langue

Vous pouvez tester la responsivité du site en l'ouvrant sur téléphone, ou depuis votre ordinateur. Vous pouvez faire varier la taille de l'écran de votre navigateur en appuaynt sur F12, puis Ctrl Shift M (sur chrome) pour activer le mode responsive.

Intégration - Tutoriel

Etapes

Pour intégrer ce widget, il suffit de deux étapes :

Dans le "head" du site web, ajouter la balise script suivante :

            <script
            src="https://pims-frontend.vercel.app/assets/js/widget.js"
            type="module">
            </script>

Cela télécharge le Web Component qui représente l'application du PIMS dématérialisé.

Dans le body du site web, ajouter la balise suivante, qui représente notre widget et l'importe comme un Web Component :

            <pims-dematerialized-widget
                application-id="pims-hello-world-1"
                widget-header-footer="false">
            </pims-dematerialized-widget>

Props du web component

La balise "pims-dematerialized-widget" prend deux inputs :

application-id : (string) Identifiant à donner à l'application, qui sera attribuée au plus au parent du Web Component
widget-header-footer : ("false"|"true") Spécifie quel type de header / footer utiliser (celui du site originel, ou un header spécifique au widget)

Styling

Point d'attention : le DSFR applique du style au body. Il peut donc override votre police. Pour bypass ce problème, vous pouvez ajouter une class css à votre body pour redéfinir votre police.

Cependant, faisant cela, le widget perdra sa font par la même occassion. Si vous souhaitez conserver la font initial, vous pouvez ajouter le css suivant à la balise "pims-dematerialized-widget"

        
        Dans le <head>
        <style>
        .pims-widget-app * {
          font-family: "Marianne", arial, sans-serif !important;
        }
        </style>
        
        Dans le <body>
        <pims-dematerialized-widget
        class="pims-widget-app"
            application-id="pims-hello-world-1"
            widget-header-footer="false">
        </pims-dematerialized-widget>