Widget - Requêter et restituer les offres d’emploi

Présentation

Ce widget permet de bénéficier d’une interface préconstruite pour requêter et afficher sur une cartes les offres d'emploi issues de l’API Offres d’emploi.

Le widget s'appuie sur StencilJS qui utilise la technologie Web Component.

Il s'agit d'une première version du widget, des évolutions sont possibles. N'hésitez pas à nous faire part de vos retours.

 

Pré-requis

Le widget est couplé à l’API Offres d’emploi. Il est donc nécessaire de remplir les conditions suivantes :

  1. Se créer un compte sur l’Emploi Store Développeurs
  2. Demander l'accès à l’API Offres d’emploi
  3. Être en mesure de faire des appels sur l’API Offres d’emploi :

 

Récupération du widget

Le widget est disponible à l’url suivante : https://www.emploi-store-dev.fr/widget/pe-offres-emploi/pe-offres-emploi.js

Afin d'intégrer le widget dans votre application, vous devez mettre un lien vers cette librairie.

 

Exemple 1:

Intégration du widget sur une application html classique :

<!DOCTYPE html>
<html lang="fr">
<head>
 <script src="https://www.emploi-store-dev.fr/widget/pe-offres-emploi/pe-offres-emploi.js"></script>
</head>
<body>
 <pe-offres-emploi></pe-offres-emploi>
 <script>
     var macarte = document.querySelector('pe-offres-emploi');
     macarte.options = {};
     macarte.token = "mon token widget offre";
 </script>
</body>
</html>

 

Exemple 2:

Intégration du widget sur une application Angular :

<!DOCTYPE html>
<html lang="fr">
<head>
 <script src="https://www.emploi-store-dev.fr/widget/pe-offres-emploi/pe-offres-emploi.js"></script>
</head>
<body>
 <pe-offres-emploi [options]="options" [token]="token"></pe-offres-emploi> </body>
</html>

 

Paramétrage du widget

Une version par défaut propose une recherche d'offres d'emploi avec les champs suivants :

  • Mots clés
  • Commune
  • Type de contrat
  • Tri
  • Temps de travail

Le fonctionnement de ces critères de recherche est disponible sur la documentation de l'API Offres d'emploi. Nous détaillerons prochainement comment paramétrer le widget avec ces critères.

Lorsque vous utilisez le widget sans paramétrage spécifique, voici une illustration de son affichage :

widget_offres.PNG