Connecter un site HTML

Connecter un site HTMLLe cas le plus simple : trois balises et deux conteneurs, aucun outillage. Comptez vingt minutes.Cette page vaut aussi pour un site généré (Hugo, Jekyll, Eleventy, Astro en sortie statique) et pour n’importe quel CMS où l’on peut éditer un gabarit commun.La page complèteTout tient dans le gabarit partagé du site, juste avant </body> :

html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mon site</title>
</head>
<body>
  <main>
    <h1>Bienvenue</h1>

    <!-- Le formulaire de contact, dans la page -->
    <div data-inodesk-form="contact"></div>

    <!-- Le formulaire d'inscription à la newsletter -->
    <div data-inocampagne-form></div>
  </main>

  <!-- 1. La mesure -->
  <script src="https://messagerie.inovertix.com/inotrack.js"
          data-site="INOTRK_PUB_votre_cle_publique"
          data-endpoint="https://messagerie.inovertix.com/api/inotrack"
          defer></script>

  <!-- 2. La relation client -->
  <script src="https://messagerie.inovertix.com/inodesk.js"
          data-site="INODSK_PUB_votre_cle_publique"
          data-endpoint="https://messagerie.inovertix.com/api/inodesk"
          defer></script>

  <!-- 3. La newsletter -->
  <script src="https://messagerie.inovertix.com/inocampagne.js"
          data-marque="INOCMP_PUB_votre_cle_publique"
          data-endpoint="https://messagerie.inovertix.com/api/inocampagne/public"
          defer></script>
</body>
</html>

À noter

defer n’est pas décoratif. Sans lui, chaque script bloque le rendu de la page. Avec lui, ils s’exécutent après l’analyse du document, et le visiteur n’attend rien.

Les trois scripts partagent le même transport : clé publique dans l’URL, corps en text/plain, aucune requête préliminaire. Un intégrateur qui en a branché un connaît déjà les autres.Ce que fait chaque balise

Balise	Ce qu’elle apporte	Ce qu’elle demande
`inotrack.js`	Pages vues, sessions, provenance, clics suivis, tunnel	Rien de plus que la balise
`inodesk.js`	Bulle de contact, formulaires, mur d’avis	Un conteneur si vous voulez le formulaire dans la page
`inocampagne.js`	Formulaire d’inscription, popup facultative	Un conteneur `data-inocampagne-form`

Suivre un clicN’importe quel élément portant data-inotrack :

html

<a href="/tarifs" data-inotrack="Voir les tarifs">Nos tarifs</a>

Le formulaire sans la bulle flottanteSi vous ne voulez que le formulaire intégré :

html

<script src="https://messagerie.inovertix.com/inodesk.js"
        data-site="INODSK_PUB_votre_cle_publique"
        data-endpoint="https://messagerie.inovertix.com/api/inodesk"
        data-launcher="off"
        defer></script>

Plusieurs formulaires d’inscriptionVous pouvez poser plusieurs <div data-inocampagne-form></div> sur la même page : chacun est rendu indépendamment. C’est utile pour un article long — un formulaire au milieu, un en bas.Les trois choses à savoir

Attention

Les clés publiques sont visibles, et ce n’est pas un défaut. Ce qui les protège, c’est le contrôle d’origine : elles ne sont acceptées que depuis les domaines déclarés dans CONTROL. Une clé recopiée sur un autre site reçoit 403 origin_not_allowed. Déclarez donc vos domaines avec et sans www, en https, et n’oubliez pas la préproduction.

Attention

Une clé _SEC_ n’a rien à faire dans une page HTML. Les clés secrètes servent aux appels serveur → serveur. Une clé secrète dans une URL est d’ailleurs refusée par CONTROL (401 secret_key_in_url).

À noter

Rien ne casse votre site. Les trois scripts échouent en silence : pas de clé, pas de réseau, domaine non déclaré — la page continue de fonctionner exactement pareil. Le corollaire est qu’une intégration ratée ne se voit pas : d’où la recette ci-dessous.

Guides détaillés

Mesure : INOTRACK — brancher un site · référence de l’API

Relation client : INODESK — site statique · mur d’avis et référencement · référence de l’API

Newsletter : INOCAMPAGNE — site HTML statique · référence de l’API

Surveillance : INOWATCH — brancher une tâche

La recette finale

Les clés répondent. Trois ping, un par module :

bash

curl -sS "https://messagerie.inovertix.com/api/inotrack/ping?k=INOTRK_PUB_votre_cle_publique"
curl -sS "https://messagerie.inovertix.com/api/inodesk/ping?k=INODSK_PUB_votre_cle_publique"
curl -sS "https://messagerie.inovertix.com/api/inocampagne/public/ping?k=INOCMP_PUB_votre_cle_publique"

Chacun renvoie {"ok":true,…} avec le bon nom de site ou de marque.

Les domaines sont déclarés dans CONTROL, avec et sans www, en https.

Les trois balises sont dans le gabarit commun, pas seulement sur la page d’accueil.

La console est propre. Ouvrez les outils de développement, onglet Réseau : les trois scripts renvoient 200, et /config aussi. Un 403 sur /config, c’est presque toujours un domaine oublié.

La navigation remonte dans INOTRACK → Analytics, en moins d’une minute.

Le formulaire crée une demande avec une référence, et l’email de confirmation arrive.

L’inscription fonctionne : adresse réelle, email de confirmation, lien cliqué, profil passé en opt-in.

Sur téléphone aussi. Le panneau du widget passe en plein écran ; vérifiez-le sur un vrai appareil, pas seulement en mode responsive du navigateur.