Intégration technique

Cet article vous présente comment intégrer le widget d'exercice de droit dans une page web

Objectifs

Le widget d'exercice de droits vous permet de collecter automatiquement depuis une page de votre site des demandes d'exercice de droit de différents types (suppressions, modifications, rectifications...)

Le widget est intégré au SDK javascript de dastra.

Prérequis

Afin de mettre en place le widget d'exercice de droit, vous devez disposer d'une clé publique d'API : lire la documentation ou accéder directement à la page de gestion des clés d'API

Mise en place du widget dans l'interface dédiée

Pour commencer, vous devez mettre en place le widget dans le panel de gestion des widgets d'exercice de droits :

Voici un exemple simple d'intégration du widget (en mode popup avec un bouton d'ouverture) :

<div id="customer-subject-form-custom"></div>
<button id="customer-request-button">Open the widget</button>
<script
  src="https://cdn.dastra.eu/sdk/dastra.js?key={YOUR PUBLIC KEY}"
  async
></script>
<script>
  window.dastra = window.dastra || [];
  dastra.debug = true;
  window.dastra.push(function(){
    dastra.loadCustomerSubjectForm({
      selector: '#customer-subject-form-custom',
      widgetId: {your widget id},
      onLoad: function (form) {
        document.getElementById('customer-request-button').addEventListener('click',function () {
          form.open()
        })
      }
    })
  })
</script>

Comment forcer la langue du formulaire ?

Par défaut, ce sera la langue du navigateur qui sera prise. Si la langue n'est pas disponible dans les traductions du widgets, la langue par défaut sera sélectionnée automatiquement. Vous pouvez forcer la langue courante du widget en ajoutant la propriété data-lang à la div où le formulaire s'affichera.

Dans cet exemple, la langue italienne sera sélectionnée par défaut (si elle est disponible)

<div id="customer-subject-popup" data-lang="it"></div>

Comment envoyer automatiquement des valeurs de formulaire au widget ?

Il est possible de préremplir les champs du formulaire depuis le contexte d'authentification de l'utilisateur. Les champs préremplis s'affichent en lecture seule (grisés) côté utilisateur.

Champs standards disponibles :

dastra.push(['set', 'dsr:refId', '{identifiant_unique_utilisateur}'])
dastra.push(['set', 'dsr:email', '{email}'])
dastra.push(['set', 'dsr:givenName', '{prénom}'])
dastra.push(['set', 'dsr:familyName', '{nom}'])
dastra.push(['set', 'dsr:address', '{adresse}'])
dastra.push(['set', 'dsr:zipCode', '{code_postal}'])
dastra.push(['set', 'dsr:city', '{ville}'])
dastra.push(['set', 'dsr:countryCode', '{code_pays}']) // ex : "FR"
dastra.push(['set', 'dsr:phoneNumber', '{téléphone}'])
dastra.push(['set', 'dsr:message', '{message}'])

Champs personnalisés :

// Passer un objet complet
var payload = {
  customFieldSlug1: 'valeur1',
  customFieldSlug2: 'valeur2'
}
dastra.push(['set', 'dsr:additionalDatas', payload])

// Ou champ par champ (préfixe @)
dastra.push(['set', 'dsr:@customFieldSlug1', 'valeur1'])

Envoi des paramètres en utilisant le mode page

Il est également possible de passer ces paramètres en utilisant les paramètres querystring, il suffit de préfixer le nom du paramètre par dsr_ :

https://api.dastra.eu/v1/client/customer-subject-form?id=<Your widget id>
&key=<your public key>
&dsr_email=[e-mail]
&dsr_givenName=Dastonaute
&dsr_refId=123456
&...etc...

Fermer le widget en cliquant en dehors de la fenêtre

Si votre widget est configuré avec un type d'affichage "Popup", nous n'avons pas mis en place le comportement de fermeture de la modal en cas de clic en dehors de la fenêtre, car les risques de perte de données saisies par l'utilisateur sont trop importants.

Cependant, si vous souhaitez que le widget se ferme lorsque l'utilisateur clique en dehors du widget, il est possible de le mettre en place à l'aide du code suivant :

window.dastra.customerSubjectReady().then((form) => {
  form.closeOnBackdrop = true
})

Attention, cela aura pour effet de supprimer l'intégralité du texte saisi par l'utilisateur sans aucun avertissement ! Si le formulaire est long, cela peut se produire facilement lors d'une sélection dépassant un champ textuel long.

Intégrer plusieurs widgets dans une seule page

Par défaut, Dastra ne permet pas l'intégration de plusieurs widgets au sein de la même page.

Cependant, il est possible de faire cette intégration avec la méthode suivante.

<html lang="en-GB">
  <body>
    <h2>My first widget</h2>
    <div id="widget-1"></div>
    <h2>My second widget</h2>
    <div id="widget-2"></div>
    <script
      async
      src="https://cdn.dastra.eu/sdk/dastra.js?key={YOUR_PUBLIC_KEY}"
    ></script>
    <script>
      window.dastra = window.dastra || []

      // Widget 1 initialization
      window.dastra.push(function () {
        window.dastra.loadCustomerSubjectForm({
          selector: '#widget-1',
          widgetId: 991, // YOUR_WIDGET_ID_
          onLoad: function (form) {
            // Initialization
          }
        })
      })

      // Widget 2 initialization
      window.dastra.push(function () {
        window.dastra.loadCustomerSubjectForm({
          selector: '#widget-2',
          widgetId: 992, // the widget identifier for the second widget
          onLoad: function (form) {
            // Initialization
          }
        })
      })
    </script>
  </body>
</html>

Pour intégrer les champs initiaux dans cette configuration, il faut utiliser le code suivant :

window.dastra.push(function () {   dastra.loadCustomerSubjectForm({
    selector: "#customer-subject-form-custom",     widgetId: widgetId,
    onLoad: function (form) {       form.initialData = {
        givenName: "prénomTest"       };       document
        .getElementById("customer-request-button")
        .addEventListener("click", function () {
          form.closeOnBackdrop = true;           form.open();         });     },
  }); });