Comment installer le widget La Bonne Alternance sur son site ?

Intégrez le widget LBA sur votre site, pour afficher les formations et les entreprises qui proposent un apprentissage.

Voici à quoi ressemble le widget La Bonne Alternance. Il permet d'afficher directement sur votre site les formations et les entreprises qui proposent un apprentissage en interrogeant les données de l'API La Bonne Alternance 

Vous devez intégrer le widget avec le périmètre désiré dans une Iframe. Ex :

<iframe src="https://labonnealternance.apprentissage.beta.gouv.fr/${perimètre}" />

Vous devez ensuite paramétrer le widget en ajoutant les paramètres à la fin de l'url, dans l'Iframe. Voici un exemple de paramètres :

?radius=60&romes=F1702,F1705,F1701&scope=all&lat=47&lon=2.2&caller=ID_service_appelant_labonnealternance&return_uri=/&return_logo_url=https://url/image.png

Voici un exemple d'Iframe paramétrée :

<iframe style="height: 660px; width: 360px;max-width: 100%;margin: auto;display: block;" src="https://labonnealternance.apprentissage.beta.gouv.fr/recherche-apprentissage?radius=60&romes=F1702,F1705,F1701&scope=all&lat=47&lon=2.2&caller=ID_service_appelant_labonnealternance&return_uri=/&return_logo_url=https://api.gouv.fr/images/api-logo/dinum.png" />

Vous pouvez utilisez l’outil suivant pour tester les différentes versions possibles du widget :

Le choix d'un périmètre (path) est obligatoire. En l'absence vous serez redirigé vers la homepage du site.

Périmètre / PathDescription
/recherche-apprentissageLa recherche portera sur les formations ET les opportunités d'emploi.
/recherche-emploiLa recherche portera sur les opportunités d'emploi seulement.
/recherche-apprentissage-formationLa recherche portera sur les formations uniquement.
ParamètreDescription
radiusOptionnel. Valeur numérique.
Valeurs autorisées : 10 | 30 | 60 | 100
Le rayon de recherche autour du lieu en km. Valeur par défaut 30.
romesOptionnel. Une liste de codes romes séparés par des virgules.
Ex : A1021 | F1065,F1066,F1067
Maximum 3 romes. Valeur par défaut null
latOptionnel. Coordonnée géographique en degrés décimaux (float)
Valeur par défaut null
La partie lattitude des coordonnées gps.
lonOptionnel. Coordonnée géographique en degrés décimaux (float)
Valeur par défaut null
La partie longitude des coordonnées gps.
callerObligatoire. L'identification du site appelant
A fixer lors de la mise en place avec l’équipe de Labonnealternance.
return_uriOptionnel. Valeur par défaut /
L'uri de retour qui sera notifiée au site appelant.
return_logo_urlOptionnel. Valeur par défaut : logo du site Labonnealternance.pole-emploi.fr
L'url du logo du site vers lequel l'utilisateur revient en cliquant sur le bouton de retour dans Labonnealternance.

Si lat, lon et romes sont correctement renseignés une recherche sera lancée automatiquement en utilisant ces critères. Si radius est correctement renseigné il sera utilisé comme critère de la recherche.

Cliquer sur le logo en haut du formulaire ou d’une liste de résultat permet de signaler à la page appelante une instruction de changement de page.

Si vous ne codez rien cette fonctionnalité n’a pas d’effet.

Pour bénéficier du bouton de retour vous devez ajouter un listener pour l'API postMessage de javascript et coder l’action de navigation :

window.addEventListener('message',function(e){
/*Remplacer par votre code pour gérer la navigation vers la page de votre site correspondante aux paramètres transmis par Labonnealternance dans le message*/

console.log("Type du message goToPage ", e.data.type);
console.log("URI de la page de redirection ", e.data.page);
});
👋
Est-ce que cette page vous a été utile ?