> For the complete documentation index, see [llms.txt](https://doc.dastra.eu/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.dastra.eu/features/requests/integration.md).

# 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 collecte 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

Pour mettre en place le widget d'exercice de droit, vous devez disposer d'**une clé publique d'API** : lisez la page [Gestion des clés d'API](/features/settings/api-keys.md) ou [accédez directement à la page de gestion des clés d'API](https://app.dastra.eu/general-settings/api).

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

Pour commencer, vous devez mettre en place le widget dans la liste des formulaires de collecte : dans le menu **Demandes**, cliquez sur **Formulaires de collecte**.

<figure><img src="https://1301193153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvBxs22wUMicv9uWp6C-2584506019%2Fuploads%2Fgit-blob-7ffe2d1f0e7116267a8c81f54f2590ba4e515477%2Frequests-widget-1.png?alt=media" alt="Liste des formulaires de collecte avec le bouton Créer un formulaire"><figcaption><p>La liste des formulaires de collecte</p></figcaption></figure>

Copiez toujours le code depuis l'application : l'adresse du script dépend de la région d'hébergement de votre organisation (`cdn-bleu.dastra.eu` au lieu de `cdn.dastra.eu` sur [Bleu](/security/bleu.md)).

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

```html
<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>
```

## 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)*

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

## Préremplir les champs du formulaire

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 :**

```javascript
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}'])
```

La propriété `refId` est l'identifiant unique de la personne dans votre système (identifiant client, identifiant de session...). Elle s'affiche, en lecture seule, uniquement si le champ **Référence de la demande** fait partie des champs actifs du formulaire.

**Champs personnalisés :**

```javascript
// 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 : préfixez le nom du paramètre par `dsr_`.

```url
https://api.dastra.eu/v1/client/data-subject-request/page?id=<Your widget id>
&key=<your public key>
&dsr_email=test@github.org
&dsr_givenName=Dastonaute
&dsr_refId=123456
&...etc...
```

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

Si votre widget est configuré avec le type d'affichage **Fenêtre modale (popup)**, la fenêtre ne se ferme pas lorsque l'utilisateur clique en dehors. Ce comportement est voulu : le risque de perdre les données saisies est trop important.

Si vous souhaitez malgré tout que le widget se ferme lorsque l'utilisateur clique en dehors de la fenêtre, utilisez le code suivant :

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

{% hint style="warning" %}
Cela supprime l'intégralité du texte saisi par l'utilisateur, sans aucun avertissement. Si le formulaire est long, cela peut arriver lors d'une sélection de texte qui dépasse d'un champ long.
{% endhint %}

## 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.

Il est cependant possible de le faire avec deux appels à `loadCustomerSubjectForm`, un par widget, avec des sélecteurs et des identifiants de widget distincts.

```html
<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 définir les champs initiaux d'un widget dans cette configuration, utilisez la propriété `form.initialData` dans `onLoad` :

```javascript
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()
        })
    }
  })
})
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://doc.dastra.eu/features/requests/integration.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.