Widget 0DATA — Intégration embed

Guide rapide

Integration en 3 etapes

Copier le snippet

Ajoutez le tag <script> ci-dessous juste avant la fermeture de </body> dans votre page HTML.

Configurer les options

Passez les parametres via l'attribut data-* ou un objet JavaScript window.zeroDataWidget pour personnaliser l'affichage.

Publier

Deployez votre page. Le widget se charge automatiquement et affiche les donnees en direct sans rechargement.

Snippet

Le code a copier

Copiez-collez ce bloc dans votre page HTML, de preference juste avant </body>.

HTML

<!-- 0DATA Embed Widget -->
<div id="zero-data-widget"
     data-theme="dark"
     data-currency="USD"
     data-limit="10"></div>

<script>
  window.zeroDataWidget = {
    theme:     'dark',
    currency:  'USD',
    limit:     10,
    autoLoad:  true
  };
</script>

<script src="https://it.08.ma/widget.js"
        async defer></script>

Le widget supporte le chargement async et defer : il ne bloquera jamais le rendu de votre page.

Configuration

Options disponibles

Tous les parametres sont optionnels. Le widget fonctionne avec des valeurs par defaut intelligentes.

data-theme string Theme du widget : dark (defaut) ou light.

data-currency string Devise d'affichage : USD, EUR, BTC, etc. Defaut : USD.

data-limit number Nombre maximum d'elements affiches (1-50). Defaut : 10.

data-refresh number Intervalle de rafraichissement en secondes. Defaut : 30. Min : 5.

data-lang string Langue de l'interface : fr, en, es, de. Defaut : fr.

data-compact boolean Mode compact. Si true, masque les details et n'affiche que les valeurs principales. Defaut : false.

Exemple

Integration avancee

Avec configuration complete via JavaScript, controle du conteneur et ecouteurs d'evenements.

HTML

<!-- Conteneur personnalise -->
<div id="my-widget"
     data-theme="dark"
     data-currency="EUR"
     data-limit="5"
     data-refresh="15"
     data-lang="fr"
     data-compact="true">
  <!-- Fallback affiche tant que le widget charge -->
  <p>Chargement des donnees...</p>
</div>

<script>
  // Configuration globale (optionnelle, surcharge les data-*)
  window.zeroDataWidget = {
    theme:    'dark',
    currency: 'EUR',
    limit:    5,
    refresh:  15,
    lang:     'fr',
    compact:  true
  };

  // Ecouter les evenements du widget
  document.addEventListener('zeroData:ready', function(e) {
    console.log('Widget 0DATA pret', e.detail);
  });

  document.addEventListener('zeroData:update', function(e) {
    console.log('Donnees mises a jour', e.detail);
  });
</script>

<script src="https://it.08.ma/widget.js"
        async defer></script>

Compatibilite

Fonctionne partout

Le widget 0DATA est concu pour fonctionner sur tous les navigateurs modernes et s'integre dans n'importe quel environnement.

Sites statiques HTML — pas de build, pas de bundler requis
CMS et constructeurs de pages — WordPress, Webflow, Wix, Squarespace
Frameworks JavaScript — React, Vue, Angular, Svelte (via le conteneur div)
Emails et newsletters — version restreinte compatible
Applications mobiles — rendu via WebView

Integrer 0DATA en une ligne