Comment on page
Intégration technique
Cet article vous présente comment intégrer le widget d'exercice de droit dans une page web
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.
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
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>
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>
<script>
dastra.push(['set','dsr:refId','{your custom userId}'])
</script>
Vous pouvez remplacer le nom de la colonne refId par le nom de propriété suivante :
- refId : the unique identifier of the user
- familyName
- givenName
- email
- city
- zipCode
- countryCode
- address
- phoneNumber
- message
- additionalDatas*
*Pour le cas spécifique des champs personnalisés, vous devez faire référence au nom additionalDatas :
<script>
var payload = {
customFieldSlug1: 'test',
customFieldSlug2: 'test'
};
// You can use this synthax for setting global custom fields as an object
dastra.push(['set','dsr:additionalDatas', payload]);
// Or directly for a single field, use the prefix @
dastra.push(['set','dsr:@customFieldSlug1', 'test']);
</script>
Les champs additionnels seront automatiquement fusionnés.
Dans cette configuration, les champs prérenseignés apparaitront en lecture seule sous une forme grisée.
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_givenName=Dastonaute
&dsr_refId=123456
&...etc...
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.
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>
dastra = dastra || [];
// Widget 1 initialization
dastra.push(function () {
dastra.loadCustomerSubjectForm({
selector: "#widget-1",
widgetId: 991, // YOUR_WIDGET_ID_
onLoad: function (form) {
// Initialization
},
});
});
// Widget 2 initialization
dastra.push(function () {
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();
});
},
});
});
Dernière mise à jour 1mo ago