Page carrière — Intégration dans votre site Web

Vous pouvez afficher votre site carrière Nextal à l’intérieur de votre propre site Web avec un <iframe> : les candidats consultent vos offres sans quitter vos pages.

Cette page s’adresse à la personne qui entretient votre site Web. Avant de l’utiliser, activez IFrame dans votre site Web dans Page carrière → Configuration.

Le code d’intégration

Remplacez VOTRE-ENTREPRISE par l’adresse de votre site carrière, et fr par en si vos candidats doivent arriver en anglais.

<iframe id="nextal-careers"
        src="https://VOTRE-ENTREPRISE.nextal.co/fr?iframe=true"
        style="width:100%;border:0;display:block;min-height:600px"
        scrolling="no" loading="lazy"></iframe>

<script>
(function () {
  var frame = document.getElementById('nextal-careers');
  window.addEventListener('message', function (e) {
    if (e.origin !== 'https://VOTRE-ENTREPRISE.nextal.co') return;
    if (e.source !== frame.contentWindow) return;
    var d = e.data;
    if (!d || d.source !== 'nextal-career-site') return;
    if (typeof d.height === 'number') frame.style.height = d.height + 'px';
    if (d.type === 'navigate') {
      var top = frame.getBoundingClientRect().top + window.pageYOffset - 80;
      window.scrollTo({ top: top, behavior: 'smooth' });
    }
  });
})();
</script>

Le paramètre ?iframe=true retire le logo, le sélecteur de langue et le pied de page du site carrière, pour que l’intégration s’insère dans votre page au lieu d’avoir l’air d’un second site Web.

Pourquoi le script est nécessaire

Un <iframe> n’ajuste jamais sa hauteur à son contenu : le navigateur le laisse à la hauteur que vous lui avez donnée. Et comme le site carrière est servi à une adresse différente de la vôtre, votre page n’a pas le droit de le mesurer.

Le site carrière se mesure donc lui-même et envoie le nombre à votre page. Le script ci-dessus écoute ce message et applique la hauteur. Sans le script, l’intégration fonctionne exactement comme aujourd’hui, mais elle conserve la hauteur fixe que vous lui avez donnée : une longue liste d’offres se retrouve avec une barre de défilement interne, et une courte description d’offre laisse un grand espace vide en dessous.

Les deux vérifications au début de l’écouteur — e.origin et e.source — garantissent que votre page ne se redimensionne que pour des messages provenant réellement de votre site carrière. Conservez-les.

Si l’intégration se trouve loin dans votre page

Rien de particulier à faire. Le site carrière continue de se mesurer même lorsque l’intégration se trouve encore sous l’écran du visiteur : sa hauteur est donc déjà correcte au moment où celui-ci y descend. Il ne la voit jamais à la mauvaise taille et n’a jamais à s’en éloigner puis y revenir pour que l’affichage se corrige.

Ce que contiennent les messages

Votre page reçoit un petit objet chaque fois que quelque chose change :

Champ	Signification
`source`	Toujours `nextal-career-site`. Permet d’ignorer les messages de tout autre élément de votre page.
`type`	`ready` au premier chargement, `height` quand le contenu grandit ou rapetisse, `navigate` quand le candidat ouvre une autre page dans l’intégration.
`height`	La hauteur en pixels. Envoyée avec chaque message : vous pouvez donc ignorer `type` si seul le redimensionnement vous intéresse.
`path`	La page où se trouve le candidat dans l’intégration, par exemple `/fr/job-details/barista/68f2…`.

Revenir à l’intégration lors d’un changement de page

Quand un candidat clique sur une offre dans une longue liste, la description qui la remplace est généralement beaucoup plus courte : l’intégration rapetisse, et sans aide le candidat se retrouve à regarder ce qui se trouve en dessous sur votre page.

C’est le rôle de la portion navigate du script : elle ramène votre page vers le haut de l’intégration. Le - 80 est une marge en pixels ; augmentez-la si votre site a un en-tête fixe ou collant qui masquerait le haut de l’intégration, et diminuez-la si vous préférez que l’intégration se place tout en haut de l’écran.

Réglages à vérifier

min-height — conservez-en une sur l’<iframe> (600 px dans l’exemple). Ce n’est pas un ornement : c’est la hauteur utilisée avant l’arrivée du premier message, et celle à laquelle le cadre revient si un message se perdait. Fixez-la autour de la hauteur de votre page la plus courte, pour éviter tout saut au chargement.
scrolling="no" — empêche le navigateur d’afficher une barre de défilement dans le cadre pendant l’ajustement de la hauteur.
Bouton Postuler dans un iframe — avec le redimensionnement automatique, Même onglet redevient généralement le bon choix : le formulaire de candidature a maintenant la place de s’afficher dans l’intégration. Les options « nouvel onglet » restent utiles si vous gardez délibérément une intégration courte.

Intégrer uniquement le formulaire de candidature

Si vous souhaitez afficher le formulaire d’une seule offre sur une de vos pages plutôt que tout le site carrière, intégrez-le directement. L’adresse du formulaire d’une offre est :

https://VOTRE-ENTREPRISE.nextal.co/fr/iframe/job-application/ID-DE-L-OFFRE

Le même script en ajuste la hauteur — rien d’autre ne change.

Si l’intégration ne se redimensionne pas

Rien ne se passe. Vérifiez que l’adresse dans e.origin correspond exactement au src de votre iframe, https:// compris. Une différence reste silencieuse, par conception.
Une hauteur est déjà inscrite sur la balise iframe, même avec !important. Laissez-la en place. Une hauteur écrite dans l’attribut style de la balise — par exemple style="height: 2070px !important" — est remplacée par le script dès l’arrivée du premier message, priorité comprise. Il n’y a rien à nettoyer avant d’ajouter le script.
L’intégration grandit mais ne rapetisse jamais. Quelque chose sur votre page impose une hauteur qui l’emporte sur le script — le plus souvent une règle de la feuille de styles ou du thème de votre site qui fixe une height sur l’iframe et la marque !important. C’est le seul cas qui vaut la peine d’être cherché : retirez la règle, ou enlevez-en le !important.
La page sursaute au chargement. Augmentez la min-height pour la rapprocher de la hauteur de votre page la plus longue.