Partenaires

Widgets Publicitaires

Intégrez les offres d'emploi Jawb.ma sur votre site avec nos formats publicitaires prêts à l'emploi. Copiez le code et collez-le dans votre page.

Comment ça marche ?

Choisissez un format adapté à votre site

Cliquez sur "Copier le code"

Collez le code HTML dans votre page

Carte Native Premium

Format carte avec image, rotation d'annonces et animation shine. Le format phare pour les articles et sidebars.

760px max - 100% responsive

Aperçu en direct

Code HTML

<div id="jawb-native-ad"></div>

<style>
  .jawb-ad-wrap {
    max-width: 760px;
    margin: 18px auto;
    font-family: Arial, Helvetica, sans-serif;
  }

  .jawb-ad {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 16px;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
    text-decoration: none;
    color: #111827;
    position: relative;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

  .jawb-ad:hover {
    transform: translateY(-2px);
    border-color: #16a34a;
    box-shadow: 0 18px 45px rgba(22, 163, 74, 0.18);
  }

  .jawb-ad::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(34,197,94,0.08) 45%, transparent 70%);
    transform: translateX(-100%);
    animation: jawbShine 4s infinite;
    pointer-events: none;
  }

  @keyframes jawbShine {
    0%, 65% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  .jawb-ad-img {
    height: 120px;
    border-radius: 14px;
    background-image: url("https://res.cloudinary.com/drwfvtehe/image/upload/v1782310381/Jawb-ma-Offres-d-emploi-au-Maroc-Recrutement-Casablanca-Rabat-Marrakech-06-24-2026_04_12_PM_txinfi.png");
    background-size: cover;
    background-position: center;
    position: relative;
  }

  .jawb-ad-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(22,163,74,0.35));
    border-radius: 14px;
  }

  .jawb-ad-content {
    position: relative;
    z-index: 2;
  }

  .jawb-ad-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    padding: 5px 10px;
    margin-bottom: 8px;
  }

  .jawb-ad-title {
    font-size: 22px;
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 7px;
    letter-spacing: -0.4px;
  }

  .jawb-ad-title span {
    color: #16a34a;
  }

  .jawb-ad-text {
    font-size: 15px;
    line-height: 1.45;
    color: #4b5563;
    margin: 0 0 12px;
  }

  .jawb-ad-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }

  .jawb-ad-domain {
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
  }

  .jawb-ad-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #16a34a;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    border-radius: 999px;
    padding: 10px 16px;
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.25);
    transition: background .2s ease, transform .2s ease;
  }

  .jawb-ad:hover .jawb-ad-btn {
    background: #15803d;
    transform: scale(1.03);
  }

  .jawb-ad-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    z-index: 5;
  }

  .jawb-ad-close:hover {
    background: #e5e7eb;
    color: #111827;
  }

  @media (max-width: 640px) {
    .jawb-ad {
      grid-template-columns: 1fr;
      padding: 12px;
    }

    .jawb-ad-img {
      height: 150px;
    }

    .jawb-ad-title {
      font-size: 20px;
    }

    .jawb-ad-text {
      font-size: 14px;
    }

    .jawb-ad-btn {
      width: 100%;
      justify-content: center;
    }
  }
</style>

<script>
  (function () {
    var container = document.getElementById("jawb-native-ad");
    if (!container) return;

    if (sessionStorage.getItem("jawb_ad_hidden") === "1") return;

    var ads = [
      {
        badge: "Plateforme emploi MA",
        title: 'Jawb daba, <span>lkhdma katstennak</span>.',
        text: "Trouvez des offres d'emploi au Maroc et postulez rapidement depuis votre t\u00e9l\u00e9phone.",
        cta: "Voir les offres"
      },
      {
        badge: "Annonce sponsoris\u00e9e",
        title: 'Un job au Maroc ? <span>Commencez ici</span>.',
        text: "Casablanca, Rabat, Marrakech... d\u00e9couvrez des opportunit\u00e9s proches de vous en quelques secondes.",
        cta: "Trouver un job"
      },
      {
        badge: "Recrutement Maroc",
        title: 'Des offres simples, rapides, <span>100% mobile</span>.',
        text: "Postulez facilement, suivez les nouvelles annonces et avancez vers votre prochain emploi.",
        cta: "D\u00e9couvrir Jawb.ma"
      }
    ];

    var selected = ads[Math.floor(Math.random() * ads.length)];
    var targetUrl = "https://jawb.ma/?utm_source=native_ad&utm_medium=display&utm_campaign=jawb_widget";

    container.innerHTML = '<div class="jawb-ad-wrap"><a class="jawb-ad" href="' + targetUrl + '" target="_blank" rel="sponsored noopener"><button class="jawb-ad-close" type="button" aria-label="Masquer">\u00d7</button><div class="jawb-ad-img" aria-hidden="true"></div><div class="jawb-ad-content"><div class="jawb-ad-label">\u25cf ' + selected.badge + '</div><h3 class="jawb-ad-title">' + selected.title + '</h3><p class="jawb-ad-text">' + selected.text + '</p><div class="jawb-ad-footer"><div class="jawb-ad-domain">jawb.ma \u00b7 Offres d\u2019emploi au Maroc</div><div class="jawb-ad-btn">' + selected.cta + ' \u2192</div></div></div></a></div>';

    var close = container.querySelector(".jawb-ad-close");
    close.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();
      sessionStorage.setItem("jawb_ad_hidden", "1");
      container.style.display = "none";
    });

    var impressions = Number(localStorage.getItem("jawb_ad_impressions") || "0") + 1;
    localStorage.setItem("jawb_ad_impressions", String(impressions));
  })();
</script>

Bannière Horizontale

Format leaderboard avec gradient vert et animation. Parfait pour le haut ou bas de page.

728px max - Responsive

Aperçu en direct

Code HTML

<div id="jawb-banner-ad"></div>

<style>
  .jawb-ban-wrap {
    max-width: 728px;
    margin: 18px auto;
    font-family: Arial, Helvetica, sans-serif;
  }

  .jawb-ban {
    background: linear-gradient(135deg, #0f172a 0%, #15803d 60%, #16a34a 100%);
    border-radius: 14px;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #fff;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease;
  }

  .jawb-ban:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 35px rgba(22, 163, 74, 0.25);
  }

  .jawb-ban::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 45%, transparent 70%);
    transform: translateX(-100%);
    animation: jawbBanShine 4s infinite;
    pointer-events: none;
  }

  @keyframes jawbBanShine {
    0%, 65% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  .jawb-ban-content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
  }

  .jawb-ban-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 3px;
    line-height: 1.2;
  }

  .jawb-ban-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    line-height: 1.3;
  }

  .jawb-ban-cta {
    background: #fff;
    color: #15803d;
    padding: 11px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    transition: transform .2s, box-shadow .2s;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .jawb-ban:hover .jawb-ban-cta {
    transform: scale(1.04);
  }

  .jawb-ban-badge {
    position: absolute;
    bottom: 6px;
    right: 14px;
    font-size: 10px;
    opacity: 0.6;
    z-index: 2;
  }

  @media (max-width: 600px) {
    .jawb-ban {
      flex-direction: column;
      text-align: center;
      padding: 16px 18px;
      gap: 12px;
    }

    .jawb-ban-cta {
      width: 100%;
      text-align: center;
      display: block;
    }
  }
</style>

<script>
  (function () {
    var c = document.getElementById("jawb-banner-ad");
    if (!c) return;

    var ads = [
      { title: "+500 offres d'emploi au Maroc", sub: "Casablanca, Rabat, Tanger, Marrakech \u2014 Postulez maintenant", cta: "Voir les offres \u2192", url: "https://jawb.ma/offres?utm_source=banner&utm_medium=display" },
      { title: "Cr\u00e9ez votre CV gratuitement", sub: "Mod\u00e8les professionnels, export PDF \u2014 100% gratuit", cta: "Cr\u00e9er mon CV \u2192", url: "https://jawb.ma/deposer-cv?utm_source=banner&utm_medium=display" },
      { title: "Trouvez le candidat id\u00e9al", sub: "Publiez votre offre et recevez des candidatures qualifi\u00e9es", cta: "Publier une offre \u2192", url: "https://jawb.ma/publier?utm_source=banner&utm_medium=display" }
    ];

    var a = ads[Math.floor(Math.random() * ads.length)];
    c.innerHTML = '<div class="jawb-ban-wrap"><a class="jawb-ban" href="' + a.url + '" target="_blank" rel="sponsored noopener"><div class="jawb-ban-content"><div class="jawb-ban-title">' + a.title + '</div><div class="jawb-ban-sub">' + a.sub + '</div></div><div class="jawb-ban-cta">' + a.cta + '</div><span class="jawb-ban-badge">jawb.ma</span></a></div>';
  })();
</script>

Lien Contextuel In-Article

Format texte discret avec bordure verte qui s'intègre naturellement dans le contenu éditorial.

100% largeur - Adaptatif

Aperçu en direct

Code HTML

<div id="jawb-inline-ad"></div>

<style>
  .jawb-inl-wrap {
    max-width: 760px;
    margin: 20px auto;
    font-family: Arial, Helvetica, sans-serif;
  }

  .jawb-inl {
    border-left: 4px solid #16a34a;
    padding: 16px 20px;
    background: #f0fdf4;
    border-radius: 0 12px 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    transition: background .2s, box-shadow .2s;
  }

  .jawb-inl:hover {
    background: #dcfce7;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.1);
  }

  .jawb-inl-text {
    font-size: 14.5px;
    color: #374151;
    line-height: 1.5;
  }

  .jawb-inl-text strong {
    color: #0f172a;
  }

  .jawb-inl-link {
    font-size: 13px;
    font-weight: 700;
    color: #16a34a;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    background: #16a34a;
    color: #fff;
    border-radius: 999px;
    transition: background .2s, transform .2s;
  }

  .jawb-inl-link:hover {
    background: #15803d;
    transform: scale(1.03);
  }

  .jawb-inl-badge {
    font-size: 10px;
    color: #6b7280;
    margin-top: 6px;
  }

  @media (max-width: 600px) {
    .jawb-inl {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    .jawb-inl-link {
      width: 100%;
      justify-content: center;
    }
  }
</style>

<script>
  (function () {
    var c = document.getElementById("jawb-inline-ad");
    if (!c) return;

    var ads = [
      { text: "<strong>Vous cherchez un emploi ?</strong> Consultez les derni\u00e8res offres sur Jawb.ma", link: "Voir les offres", url: "https://jawb.ma/offres?utm_source=inline&utm_medium=display" },
      { text: "<strong>Recruteurs :</strong> publiez votre offre et atteignez +10 000 candidats qualifi\u00e9s", link: "Publier une offre", url: "https://jawb.ma/publier?utm_source=inline&utm_medium=display" },
      { text: "<strong>Salaire trop bas ?</strong> D\u00e9couvrez les grilles salariales 2026 au Maroc", link: "Consulter le guide", url: "https://jawb.ma/guides?utm_source=inline&utm_medium=display" }
    ];

    var a = ads[Math.floor(Math.random() * ads.length)];
    c.innerHTML = '<div class="jawb-inl-wrap"><div class="jawb-inl"><div><div class="jawb-inl-text">' + a.text + '</div><div class="jawb-inl-badge">Sponsoris\u00e9 par Jawb.ma</div></div><a href="' + a.url + '" class="jawb-inl-link" target="_blank" rel="sponsored noopener">' + a.link + ' \u2192</a></div></div>';
  })();
</script>

Barre Sticky Bottom

Barre fixe en bas de page avec bouton fermer. Taux de visibilité maximal sans gêner la lecture.

100% largeur - Fixe en bas

Aperçu en direct

Code HTML

<div id="jawb-sticky-ad"></div>

<style>
  .jawb-stk {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 2px solid #16a34a;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    font-family: Arial, Helvetica, sans-serif;
    animation: jawbSlideUp .35s ease;
  }

  @keyframes jawbSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .jawb-stk-text {
    font-size: 14px;
    color: #374151;
  }

  .jawb-stk-text strong {
    color: #0f172a;
  }

  .jawb-stk-cta {
    background: #16a34a;
    color: #fff;
    padding: 9px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, transform .2s;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
  }

  .jawb-stk-cta:hover {
    background: #15803d;
    transform: scale(1.03);
  }

  .jawb-stk-close {
    position: absolute;
    top: -12px;
    right: 16px;
    border: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  .jawb-stk-close:hover {
    background: #f3f4f6;
    color: #111827;
  }

  @media (max-width: 600px) {
    .jawb-stk {
      flex-wrap: wrap;
      gap: 10px;
      padding: 12px 16px;
    }

    .jawb-stk-text {
      font-size: 13px;
      text-align: center;
      flex: 1 1 100%;
    }

    .jawb-stk-cta {
      width: 100%;
      text-align: center;
      display: block;
    }
  }
</style>

<script>
  (function () {
    var c = document.getElementById("jawb-sticky-ad");
    if (!c) return;

    if (sessionStorage.getItem("jawb_stk_hidden") === "1") return;

    c.innerHTML = '<div class="jawb-stk"><button class="jawb-stk-close" aria-label="Fermer">\u00d7</button><span class="jawb-stk-text"><strong>+500 offres d\u2019emploi</strong> au Maroc vous attendent</span><a href="https://jawb.ma/offres?utm_source=sticky&utm_medium=display" class="jawb-stk-cta" target="_blank" rel="sponsored noopener">Explorer les offres \u2192</a></div>';

    c.querySelector(".jawb-stk-close").addEventListener("click", function (e) {
      e.preventDefault();
      sessionStorage.setItem("jawb_stk_hidden", "1");
      c.style.display = "none";
    });
  })();
</script>

Grille de Cartes Offres

Affiche 3 offres sous forme de mini-cartes élégantes. Parfait pour les pages d'accueil partenaires.

100% largeur - Grid responsive

Aperçu en direct

Code HTML

<div id="jawb-cards-ad"></div>

<style>
  .jawb-cards-wrap {
    max-width: 760px;
    margin: 20px auto;
    font-family: Arial, Helvetica, sans-serif;
  }

  .jawb-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
  }

  .jawb-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

  .jawb-card:hover {
    transform: translateY(-3px);
    border-color: #16a34a;
    box-shadow: 0 12px 30px rgba(22, 163, 74, 0.12);
  }

  .jawb-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(34,197,94,0.06) 45%, transparent 70%);
    transform: translateX(-100%);
    animation: jawbCardShine 5s infinite;
    pointer-events: none;
  }

  @keyframes jawbCardShine {
    0%, 70% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  .jawb-card-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    padding: 4px 9px;
    border-radius: 6px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .jawb-card-title {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
    line-height: 1.25;
  }

  .jawb-card-company {
    font-size: 13px;
    color: #16a34a;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .jawb-card-loc {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .jawb-cards-footer {
    text-align: center;
    margin-top: 14px;
  }

  .jawb-cards-more {
    font-size: 13px;
    color: #16a34a;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    transition: background .2s, color .2s;
  }

  .jawb-cards-more:hover {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
  }

  .jawb-cards-powered {
    font-size: 10px;
    color: #d1d5db;
    text-align: right;
    margin-top: 8px;
  }
</style>

<script>
  (function () {
    var c = document.getElementById("jawb-cards-ad");
    if (!c) return;

    var ads = [
      { title: "D\u00e9veloppeur React.js", company: "StartupTech", location: "Casablanca", badge: "CDI", url: "https://jawb.ma/offres?q=react&utm_source=cards&utm_medium=display" },
      { title: "Responsable Marketing", company: "MediaGroup", location: "Rabat", badge: "CDI", url: "https://jawb.ma/offres?q=marketing&utm_source=cards&utm_medium=display" },
      { title: "Data Analyst", company: "DataCorp", location: "Tanger", badge: "Stage", url: "https://jawb.ma/offres?q=data&utm_source=cards&utm_medium=display" }
    ];

    var html = '<div class="jawb-cards-wrap"><div class="jawb-cards">';
    ads.forEach(function (a) {
      html += '<a href="' + a.url + '" class="jawb-card" target="_blank" rel="sponsored noopener"><span class="jawb-card-badge">' + a.badge + '</span><div class="jawb-card-title">' + a.title + '</div><div class="jawb-card-company">' + a.company + '</div><div class="jawb-card-loc"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>' + a.location + '</div></a>';
    });
    html += '</div><div class="jawb-cards-footer"><a href="https://jawb.ma/offres?utm_source=cards&utm_medium=display" class="jawb-cards-more" target="_blank" rel="sponsored noopener">Voir toutes les offres \u2192</a></div><div class="jawb-cards-powered">Propuls\u00e9 par jawb.ma</div></div>';
    c.innerHTML = html;
  })();
</script>

Monétisez votre audience avec Jawb.ma

Nos widgets publicitaires vous permettent d'afficher des offres d'emploi pertinentes sur votre site tout en offrant un service utile à vos visiteurs. Les formats sont 100% responsive, respectueux de l'expérience utilisateur et s'intègrent naturellement dans votre design.

Pour un partenariat personnalisé ou des formats sur mesure, contactez notre équipe.