Utiliser kelvin°

Comment intégrer le widget dans un wordpress

21/8/2025

—

min

Dans la rénovation énergétique, chaque clic compte. Plus le parcours est simple, plus vos prospects vont jusqu’au bout de la simulation.
Le widget kelvin a été conçu pour ça : permettre à vos visiteurs de saisir une adresse et d’accéder immédiatement au simulateur.

Voyons comment l’intégrer dans un site WordPress.

Introduction

Le widget de recherche kelvin est un module JavaScript qui s’appuie sur l’API officielle adresse.data.gouv.fr.
En clair, il :

propose l’auto-complétion de l’adresse,
affiche les résultats dans une liste déroulante,
redirige automatiquement vers le simulateur kelvin avec les coordonnées GPS du logement.

‍

‍

Fonctionnalités principales

Saisie d’adresse avec auto-complétion
Liste déroulante intuitive
Redirection directe vers le simulateur kelvin
Style personnalisable (CSS)
Messages de debug pour le débogage rapide

‍

Installation

Étape 1 – Créer le conteneur HTML

Ajoutez ce div dans votre page :

<div id="kelvin-address-search-content"></div>

‍

Étape 2 – Initialiser le widget

Ajoutez ensuite le script suivant :

<script src="https://cdn.jsdelivr.net/npm/kelvin-js@0.0.7/dist/kelvin-address-search-widget-v1.0.1.min.js"></script>
<script>
  kelvin.search({
    simulatorUrl: "https://app.go-kelvin.com/simulator/kelvin"
  });
</script>

Exemple complet d’intégration

Voici le code d’une page HTML simple avec le widget intégré :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="kelvin-address-search-content"></div>

    <script src="https://cdn.jsdelivr.net/npm/kelvin-js@0.0.7/dist/kelvin-address-search-widget-v1.0.1.min.js"></script>
    <script>
      kelvin.search({
        simulatorUrl: "https://app.go-kelvin.com/simulator/kelvin"
      });
    </script>
  </body>
</html>

‍

Configuration du widget

Le widget accepte plusieurs options :

simulatorUrl (obligatoire) : URL de votre simulateur kelvin
htmlTargetId (optionnel) : ID du div où injecter le widget
inputPlaceholder (optionnel) : texte du champ de recherche
colors (optionnel) : personnalisation des couleurs

‍

Valeurs par défaut du widget :

htmlTargetId : kelvin-address-search-content
inputPlaceholder : Entrez une adresse en France
colors :
- primary : #4a90e2
- secondary : rgba(0, 0, 0, 0.1)
- text : #333333
- border : #e0e0e0
- hoverBackground : #f0f0f0
- hoverText : #000000

Exemple de configuration avancée :

kelvin.search({
  simulatorUrl: "https://app.go-kelvin.com/simulator/kelvin",
  htmlTargetId: "id-du-div",
  inputPlaceholder: "Recherchez votre adresse",
  colors: {
    primary: '#11EFD1',
    secondary: 'rgba(17, 239, 209, 0.3)',
    text: '#333333',
    border: '#6EF3E0',
    hoverBackground: '#11EFD1',
    hoverText: '#000000'
  }
});

‍

CSS par défaut

<style>
  #kelvin-address-search-content {
    position: relative;
    max-width: 400px;
    font-family: 'Arial', sans-serif;
  }

  #kelvin-address-search-content .kelvin-address-search-input {
    display: inline-block;
    width: 100%;
    padding: 10px 14px;
    border-radius: 6px;
    color: #333333;
    border: 2px solid #e0e0e0;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  #kelvin-address-search-content.open .kelvin-address-search-input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
  }

  #kelvin-address-search-content .kelvin-address-search-input:focus {
    outline: none;
    border-color: #4a90e2;
  }

  #kelvin-address-search-content .kelvin-address-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    font-size: 0.9rem;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 10;
  }

  #kelvin-address-search-content.open .kelvin-address-search-results {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 2px solid #4a90e2;
    border-top: none;
  }

  #kelvin-address-search-content .kelvin-address-search-results .kelvin-address-search-row a {
    padding: 10px 14px;
    color: #333333;
    transition: background-color 0.2s ease;
    text-decoration: none;
    display: block;
    font-weight: normal;
  }

  #kelvin-address-search-content .kelvin-address-search-results .kelvin-address-search-row a:hover {
    background-color: #f0f0f0;
    color: #000000;
    cursor: pointer;
  }
</style>

‍

Customisation avancée (CSS)

Si vous voulez aller plus loin, vous pouvez surcharger les classes CSS du widget dans votre propre feuille de style.

Exemple simple :

<div id="kelvin-address-search-content"></div>
<style>
  #kelvin-address-search-content .kelvin-address-search-input {
    border-radius: 10px;
    border: 2px solid #6EF3E0;
    font-size: 1.1rem;
  }
</style>

‍

Intégration dans WordPress

Cas 1 – WordPress auto-hébergé

Wordpress

Si vous utilisez un site Wordpress hébergé par wordpress.com, vous devez suivre la procédure "Wordpress hébergé sur wordpress.com".

Sinon, vous pouvez suivre la procédure "WordPress auto-hébergé".

Vous pouvez ajouter le widget dans votre Wordpress soit dans un article, ou dans une page.

‍

1) Ouvrez l'éditeur sur l'article ou la page où vous voulez ajouter le widget.

2) Cliquez sur le bouton "+" en haut à gauche de la page.

3) Cherchez et cliquez sur "HTML personnalisé".

4) Un nouveau block apparaîtra avec un champ libre.

5) Copiez le code HTML ci-dessous et collez-le dans le champ.

<div id="kelvin-address-search-content"></div>
<script src="https://cdn.jsdelivr.net/npm/kelvin-js@0.0.7/dist/kelvin-address-search-widget-v1.0.1.min.js"></script>
<script>
  kelvin.search({
    simulatorUrl: "https://app.go-kelvin.com/simulator/kelvin"
  });
</script>

‍

NB: N'oubliez pas de cliquer sur le bouton en haut à droite "Enregistrer".

‍

6) Vérifiez sur la page ou l'article que le widget est bien présent.

Cas 2 – WordPress hébergé sur wordpress.com

Vous pouvez ajouter le widget dans votre Wordpress soit dans un article, ou dans une page. Mais tout d'abord, vous devez installer le plugin "Insert HTML code" dans votre Wordpress.

1) Cliquez sur l'onglet "Extensions" dans le menu latéral

2) Recherchez et installez le plugin "Insert HTML code".

3) N'oubliez pas de cliquer sur le bouton "Activer".

4) Naviguez sur la page du plugin "Insert HTML code".

5) Cliquez sur "Add New HTML Snippet".

6) Remplissez le formulaire.

Pensez à nommer le snippet "kelvin"
Remplissez le HTML Code par:

<div id="kelvin-address-search-content"></div>
<script src="https://cdn.jsdelivr.net/npm/kelvin-js@0.0.7/dist/kelvin-address-search-widget-v1.0.1.min.js"></script>
<script>
  kelvin.search({
    simulatorUrl: "https://app.go-kelvin.com/simulator/kelvin"
  });
</script>