Aller au contenu principal
Bêta

Cette fonctionnalité est en version bêta. Les widgets peuvent être intégrés librement sur tout site.

Intégrations

Générez du code et consultez la documentation pour intégrer les widgets Toolito sur vos sites, sans clé d'intégration.

Générer un code d'exemple

Choisissez un widget et le type d'exemple pour obtenir un snippet prêt à coller sur votre site. Aucune clé n'est requise.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Widget Toolito</title>
</head>
<body>
  <div data-toolito-widget="loan-monthly-payment"></div>
  <script type="module" src="https://www.toolito.io/embed.js"></script>
</body>
</html>

Aperçu (code généré ci-dessus)

L'iframe ci-dessous exécute le même code HTML que le snippet.

Aperçu

Documentation d'intégration

Principe

Intégrez les widgets Toolito sans iframe : ajoutez une balise script pointant vers embed.js et une div avec data-toolito-widget (slug du widget). Aucune clé n'est requise : le widget se charge sur tout domaine.

L'attribut data-toolito-integration-key reste accepté pour compatibilité mais est ignoré par le chargeur.

Attributs (intégration par balise)

AttributObligatoireDescription
data-toolito-widgetOuiSlug du widget (ex. loan-monthly-payment, bmi-calculator).
data-toolito-integration-keyNonObsolète : ignoré. Conservé pour compatibilité avec d'anciens snippets.
data-toolito-color-primaryNonCouleur principale (brand, liens, focus). Valeur CSS (ex. #3366FF).
data-toolito-color-secondaryNonCouleur secondaire (accent, bouton CTA). Valeur CSS (ex. #10B981).
data-toolito-color-result-bgNonCouleur de fond de la zone résultat. Valeur CSS (ex. #D1FAE5).
data-toolito-cta-hideNon"1" ou "true" pour masquer le lien vers Toolito.
data-toolito-cta-textNonTexte personnalisé du bouton CTA.
data-toolito-cta-urlNonURL du bouton CTA.

Exemple minimal

<div data-toolito-widget="loan-monthly-payment"></div>
<script type="module" src="https://www.toolito.io/embed.js"></script>

Avec CTA personnalisé

<div
  data-toolito-widget="bmi-calculator"
  data-toolito-cta-text="En savoir plus"
  data-toolito-cta-url="https://www.toolito.io/widget/bmi-calculator"
></div>
<script type="module" src="https://www.toolito.io/embed.js"></script>

Avec couleurs personnalisées

Utilisez les attributs data-toolito-color-* pour adapter le widget à votre charte.

<div
  data-toolito-widget="loan-monthly-payment"
  data-toolito-color-primary="#3366FF"
  data-toolito-color-secondary="#10B981"
  data-toolito-color-result-bg="#D1FAE5"
></div>
<script type="module" src="https://www.toolito.io/embed.js"></script>

API manuelle

Injectez un widget dynamiquement via window.Toolito.render(container, opts). Arguments de l'objet opts :

ArgumentObligatoireDescription
slugOuiSlug du widget (ex. tip-calculator, bmi-calculator).
integrationKeyNonObsolète : ignoré.
ctaHideNonBooléen : true pour masquer le lien vers Toolito.
ctaTextNonTexte personnalisé du bouton CTA.
ctaUrlNonURL du bouton CTA.
colorPrimaryNonCouleur principale. Valeur CSS (ex. #3366FF).
colorSecondaryNonCouleur secondaire. Valeur CSS (ex. #10B981).
colorResultBgNonCouleur de fond de la zone résultat. Valeur CSS (ex. #D1FAE5).

Exemple complet (avec couleurs et CTA optionnels) :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Widget Toolito</title>
</head>
<body>
  <button id="btn">Afficher le widget</button>
  <div id="mon-widget"></div>
  <script type="module" src="https://www.toolito.io/embed.js"></script>
  <script>
    document.getElementById('btn').addEventListener('click', function() {
      var container = document.getElementById('mon-widget');
      var opts = {
        slug: 'tip-calculator',
        ctaHide: true,
        colorPrimary: '#3366FF',
        colorSecondary: '#10B981',
        colorResultBg: '#D1FAE5',
        ctaText: 'En savoir plus',
        ctaUrl: 'https://www.toolito.io/widget/tip-calculator'
      };
      function doRender() {
        if (window.Toolito && window.Toolito.render) {
          window.Toolito.render(container, opts);
        } else {
          setTimeout(doRender, 50);
        }
      }
      doRender();
    });
  </script>
</body>
</html>

Modal

Ouvrir un widget dans une fenêtre modale. Exemple complet (avec couleurs et CTA optionnels) :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Widget Toolito</title>
  <style>
    .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
    .modal-overlay.is-open { display: flex; }
    .modal { background: #fff; border-radius: 12px; padding: 1.5rem; max-width: 560px; }
    .modal-close { float: right; background: none; border: none; font-size: 1.5rem; cursor: pointer; }
  </style>
</head>
<body>
  <button id="btn-open">Ouvrir le widget</button>
  <div class="modal-overlay" id="modal">
    <div class="modal">
      <button class="modal-close" id="btn-close">×</button>
      <div id="widget-container"></div>
    </div>
  </div>
  <script type="module" src="https://www.toolito.io/embed.js"></script>
  <script>
    var modal = document.getElementById('modal');
    var container = document.getElementById('widget-container');
    document.getElementById('btn-open').onclick = function() {
      container.innerHTML = '';
      var div = document.createElement('div');
      container.appendChild(div);
      var opts = {
        slug: 'bmi-calculator',
        ctaHide: true,
        colorPrimary: '#3366FF',
        colorSecondary: '#10B981',
        colorResultBg: '#D1FAE5',
        ctaText: 'En savoir plus',
        ctaUrl: 'https://www.toolito.io/widget/bmi-calculator'
      };
      function doRender() {
        if (window.Toolito && window.Toolito.render) {
          window.Toolito.render(div, opts);
        } else {
          setTimeout(doRender, 50);
        }
      }
      doRender();
      modal.classList.add('is-open');
    };
    document.getElementById('btn-close').onclick = function() { modal.classList.remove('is-open'); };
    modal.onclick = function(e) { if (e.target === modal) modal.classList.remove('is-open'); };
  </script>
</body>
</html>