Aller au contenu principal

Interview du jour

Intégrer le Interview design du jour sur votre site web

Interview du jour publie une nouvelle sélection chaque jour. L'adresse de l'image ne change jamais, mais la photo qu'elle affiche est renouvelée : vous ajoutez le code une seule fois et vos visiteurs voient automatiquement la sélection du jour.

Comment ça fonctionne

Chaque jour, une nouvelle image est publiée à une adresse fixe. Votre page charge cette adresse et affiche donc toujours la sélection en cours ; un clic conduit vos visiteurs vers Interview du jour où l'article complet est présenté.

Vous préférez un script ? Ajoutez un conteneur et un script : le widget dessine le style choisi avec data-dotd-variant (image, cta ou card), dans la langue de l'adresse du script lorsque cette langue est disponible. Si vous ne pouvez pas exécuter de scripts, utilisez la version HTML de la même variante.

Variante A : image seule

L'image du jour, liée à Interview du jour. L'option la plus légère.

Aperçu en direct

<a href="https://interviewoftheday.com/fr/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/design-interview-of-the-day/today.png" alt="Interview design du jour présentant une conversation approfondie avec un leader du secteur" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="interviewoftheday.com" data-dotd-variant="image"></div>
<script async src="https://interviewoftheday.com/feature.js?lang=fr"></script>

Variante B : image et appel à l'action

L'image du jour avec un appel à l'action en dessous.

Aperçu en direct

<a href="https://interviewoftheday.com/fr/" target="_blank" rel="noopener" style="display:block;max-width:100%;color:inherit;text-decoration:none;text-align:center">
  <img src="https://competition.adesignaward.com/design-interview-of-the-day/today.png" alt="Interview design du jour présentant une conversation approfondie avec un leader du secteur" loading="lazy" style="display:block;max-width:100%;height:auto;margin:0 auto">
  <span style="display:block;margin-top:.5em;font:600 15px/1.3 system-ui,sans-serif">Découvrir l'Interview design du jour</span>
</a>
<div data-dotd="interviewoftheday.com" data-dotd-variant="cta"></div>
<script async src="https://interviewoftheday.com/feature.js?lang=fr"></script>

Variante C : carte Bootstrap

Une carte Bootstrap avec l'image, le titre de la sélection, un court paragraphe et un bouton d'appel à l'action. Votre page doit intégrer Bootstrap.

Aperçu en direct

<div class="card" style="max-width:24rem">
  <a href="https://interviewoftheday.com/fr/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-interview-of-the-day/today.png" class="card-img-top" alt="Interview design du jour présentant une conversation approfondie avec un leader du secteur" loading="lazy"></a>
  <div class="card-body">
    <h5 class="card-title">Interview design du jour</h5>
    <p class="card-text">A' Design Award présente chaque jour un entretien avec un designer de classe mondiale, un architecte ou un professionnel créatif en tant qu'Interview design du jour, explorant son parcours, sa philosophie du design, son processus créatif et sa vision de l'avenir du design.</p>
    <a href="https://interviewoftheday.com/fr/" class="btn btn-danger" target="_blank" rel="noopener">Découvrir l'Interview design du jour</a>
  </div>
</div>
<div data-dotd="interviewoftheday.com" data-dotd-variant="card"></div>
<script async src="https://interviewoftheday.com/feature.js?lang=fr"></script>

Option 3 : JSON

Pour les développeurs, les applications et l'automatisation. Le JSON contient le nom, la description, l'adresse de l'image, les liens et la date. Les requêtes cross-origin sont autorisées.

fetch("https://interviewoftheday.com/feature.json?lang=fr")
  .then(function (r) { return r.json(); })
  .then(function (d) {
    // d.name, d.feature, d.paragraph, d.image, d.url, d.date ...
  });

Exemple de réponse

{
    "domain": "interviewoftheday.com",
    "name": "Interview du jour",
    "feature": "Interview design du jour",
    "paragraph": "A' Design Award présente chaque jour un entretien avec un designer de classe mondiale, un architecte ou un professionnel créatif en tant qu'Interview design du jour, explorant son parcours, sa philosophie du design, son processus créatif et sa vision de l'avenir du design.",
    "description": "Interview du jour présente chaque jour des entretiens avec des designers de classe mondiale, des architectes et des professionnels créatifs reconnus par le très prestigieux A' Design Award and Competition, explorant les parcours, les expériences professionnelles, les philosophies du design, les processus créatifs, les projets et les perspectives des designers de premier plan sur l'avenir du design.",
    "call_to_action": "Découvrir l'Interview design du jour",
    "date": "2026-11-08",
    "language": "fr",
    "image": "https://competition.adesignaward.com/design-interview-of-the-day/today.png",
    "image_alt": "Interview design du jour présentant une conversation approfondie avec un leader du secteur",
    "url": "https://interviewoftheday.com/fr/",
    "feature_url": "https://competition.adesignaward.com/design-interview-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/design-interviews-of-the-days.php",
    "embed_url": "https://interviewoftheday.com/fr/mise-en-avant/"
}

Bon à savoir

  • Conservez le lien autour de l'image afin que vos visiteurs puissent découvrir la sélection complète.
  • Utilisez toujours l'adresse d'image indiquée ci-dessus et ne stockez pas de copie, pour que votre page reste à jour.
  • L'image est responsive : elle ne dépasse jamais la largeur de son conteneur.
  • Besoin d'aide ou d'un format personnalisé ? N'hésitez pas à nous contacter.

Citation design du jour

Citation design du jour

DesignAdage