Skip to main content

Guide d’installation du widget

Ajoutez TapToChat à votre site web en quelques minutes. Aucune compétence en développement requise.

Démarrage rapide

3 étapes simples :

  1. 1

    Créez un compte et un widget

    Récupérez votre identifiant de widget unique dans le tableau de bord

  2. 2

    Copiez votre code d’installation

    Choisissez HTML, React, Next.js ou WordPress

  3. 3

    Collez-le avant </body>

    Ajoutez le code à votre site web et c’est terminé !

Méthodes d’installation

HTML / Sites statiques

Pour les sites statiques, le HTML brut ou tout site où vous pouvez ajouter des scripts.

<!-- TapToChat Widget -->
<script>
  (function(w,d,s,o,f,js,fjs){
    w['TapToChat']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
    js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
  }(window, document, 'script', 'taptochat', 'https://taptochat.io/widget/embed.js'));
  taptochat('init', { widgetId: 'YOUR_WIDGET_ID' });
</script>
<!-- End TapToChat Widget -->

React

Pour les applications React (Create React App, Vite, etc.).

// Add to your App.js or main component
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://taptochat.io/widget/embed.js';
    script.async = true;
    script.id = 'taptochat';
    document.body.appendChild(script);

    script.onload = () => {
      if (window.TapToChat) {
        window.TapToChat('init', {
          widgetId: 'YOUR_WIDGET_ID'
        });
      }
    };

    return () => {
      const scriptEl = document.getElementById('taptochat');
      if (scriptEl) scriptEl.remove();
      const widgetEl = document.getElementById('taptochat-widget');
      if (widgetEl) widgetEl.remove();
    };
  }, []);

  return <div className="App">{/* Your app */}</div>;
}

Next.js

Pour Next.js 13+ avec l’App Router.

// Create app/components/TapToChatWidget.tsx
'use client'

import { useEffect } from 'react'

export function TapToChatWidget() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://taptochat.io/widget/embed.js'
    script.async = true
    script.id = 'taptochat'
    document.body.appendChild(script)

    script.onload = () => {
      if (window.TapToChat) {
        window.TapToChat('init', {
          widgetId: 'YOUR_WIDGET_ID'
        })
      }
    }

    return () => {
      const scriptEl = document.getElementById('taptochat')
      if (scriptEl) scriptEl.remove()
      const widgetEl = document.getElementById('taptochat-widget')
      if (widgetEl) widgetEl.remove()
    }
  }, [])

  return null
}

// Then in your app/layout.tsx:
import { TapToChatWidget } from './components/TapToChatWidget'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <TapToChatWidget />
      </body>
    </html>
  )
}

WordPress

Pour les sites WordPress. Ajoutez-le à functions.php ou utilisez une extension comme « Insert Headers and Footers ».

// Add to functions.php
function taptochat_widget() {
  ?>
  <!-- TapToChat Widget -->
  <script>
    (function(w,d,s,o,f,js,fjs){
      w['TapToChat']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
      js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
      js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'taptochat', 'https://taptochat.io/widget/embed.js'));
    taptochat('init', { widgetId: 'YOUR_WIDGET_ID' });
  </script>
  <?php
}
add_action('wp_footer', 'taptochat_widget');

Options de configuration

Personnalisez votre widget en passant des options supplémentaires à la fonction init :

TapToChat('init', {
  widgetId: 'YOUR_WIDGET_ID',  // Required
  position: 'bottom-right',     // Optional: 'bottom-right' or 'bottom-left'
  color: '#3B82F6'              // Optional: Any hex color code
});
OptionTypeDescription
widgetIdstringVotre identifiant de widget unique (obligatoire)
positionstringPosition du widget : 'bottom-right' ou 'bottom-left'
colorstringCouleur principale au format hexadécimal (par ex. '#3B82F6')

Bonnes pratiques

À placer avant </body>

Ajoutez le script juste avant la balise body fermante, pour des performances optimales et pour garantir que le DOM est bien chargé.

Chargement asynchrone

Le widget se charge de façon asynchrone : il ne bloque pas le rendu de votre page et ne ralentit pas votre site.

Testez d’abord en préproduction

Testez le widget dans un environnement de développement ou de préproduction avant de le déployer en production.

Gardez le widget actif

Vérifiez que votre widget est bien réglé sur « Actif » dans les paramètres du tableau de bord pour qu’il s’affiche sur votre site.

Dépannage

Le widget ne s’affiche pas ?

  • •Vérifiez que votre widget est réglé sur « Actif » dans le tableau de bord
  • •Vérifiez que l’identifiant de widget de votre code correspond à celui du tableau de bord
  • •Videz le cache de votre navigateur et forcez le rechargement (Ctrl+Shift+R ou Cmd+Shift+R)
  • •Consultez la console du navigateur à la recherche d’erreurs JavaScript

Toujours un problème ?

Contactez notre équipe support à support@taptochat.io ou utilisez le widget de chat de cette page.

Prêt à vous lancer ?

Créez votre compte gratuit et ajoutez le chat en direct à votre site web en quelques minutes.

Commencer l’essai gratuitVoir la démo