Retour au blog
Technique7 min1 mars 2026

Integrer le widget Waazi sur votre site web et votre app mobile Flutter

Guide technique pas-a-pas pour integrer le widget de chat Waazi sur votre site web et dans votre application mobile Flutter. Code, personnalisation et bonnes pratiques.

Derniere mise a jour :

En bref

Pour integrer Waazi, ajoutez le widget web via un snippet JavaScript juste avant </body> (init avec votre projectId), ou installez le SDK Flutter natif (waazi_sdk) pour vos apps iOS et Android. Les deux synchronisent les conversations en temps reel dans le dashboard. Vous pouvez personnaliser couleurs, position et langue, et identifier vos clients via waazi('identify', ...).

Deux SDK, une experience unifiee

Waazi propose deux SDK pour integrer le support client directement dans vos produits :

  • Widget Web : un script JavaScript leger pour votre site web
  • SDK Flutter : un package natif pour vos apps iOS et Android

Dans les deux cas, les conversations sont synchronisees en temps reel dans votre dashboard Waazi. Vos agents voient tout au meme endroit, que le client ecrive depuis le site web ou l'app mobile.

Widget Web : integration en 30 secondes

Installation basique

Ajoutez ce snippet juste avant la balise de votre site :

html
<script>
  (function(w,a,z){
    w.WaaziWidget=z;w[z]=w[z]||function(){
    (w[z].q=w[z].q||[]).push(arguments)};
    var s=a.createElement('script');
    s.async=1;s.src='https://cdn.waazi.io/widget.js';
    a.head.appendChild(s);
  })(window,document,'waazi');

  waazi('init', { projectId: 'VOTRE_PROJECT_ID' });
</script>

C'est tout. Le widget apparait en bas a droite de votre site.

Personnalisation

Vous pouvez personnaliser l'apparence et le comportement :

javascript
waazi('init', {
  projectId: 'VOTRE_PROJECT_ID',
  position: 'bottom-right',      // ou 'bottom-left'
  locale: 'fr',                   // 'fr', 'en'
  theme: 'auto',                  // 'light', 'dark', 'auto'
  primaryColor: '#0D9488',        // votre couleur de marque
  greeting: 'Bonjour ! Comment pouvons-nous vous aider ?',
  avatar: '/team-avatar.png',     // avatar de l'equipe
});

Identifier vos clients

Si votre site a un systeme d'authentification, identifiez le client pour enrichir sa fiche :

javascript
waazi('identify', {
  email: 'client@example.com',
  name: 'Amadou Diallo',
  phone: '+225 07 00 00 00',
  plan: 'premium',
  // ajoutez vos propres attributs
  orderId: 'CMD-12345',
});

Frameworks JavaScript

Le widget fonctionne avec tous les frameworks. Voici des exemples specifiques :

React / Next.js :

tsx
// components/WaaziWidget.tsx
'use client'
import { useEffect } from 'react'

export function WaaziWidget() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://cdn.waazi.io/widget.js'
    script.async = true
    script.onload = () => {
      window.waazi?.('init', { projectId: 'VOTRE_PROJECT_ID' })
    }
    document.head.appendChild(script)
  }, [])

  return null
}

WordPress :

Ajoutez le snippet dans Apparence > Editeur de theme > footer.php, ou utilisez un plugin comme "Insert Headers and Footers".

SDK Flutter : support natif dans votre app

Installation

Ajoutez le package dans votre pubspec.yaml :

yaml
dependencies:
  waazi_sdk: ^1.0.0

Configuration

Initialisez le SDK au demarrage de votre app :

dart
import 'package:waazi_sdk/waazi_sdk.dart';

void main() {
  Waazi.init(
    projectId: 'VOTRE_PROJECT_ID',
    locale: 'fr',
  );
  runApp(MyApp());
}

Afficher le widget de chat

dart
import 'package:waazi_sdk/waazi_sdk.dart';

class SupportPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Support')),
      body: WaaziChatWidget(
        theme: WaaziTheme.auto,
        locale: 'fr',
      ),
    );
  }
}

Ou utilisez le bouton flottant :

dart
Scaffold(
  floatingActionButton: WaaziFAB(
    onUnreadCount: (count) {
      // Mettez a jour votre badge
    },
  ),
  body: YourContent(),
);

Identifier l'utilisateur

dart
Waazi.identify(
  email: 'client@example.com',
  name: 'Fatou Sow',
  phone: '+221 77 000 00 00',
  attributes: {
    'plan': 'premium',
    'city': 'Dakar',
  },
);

Notifications push

Le SDK gere automatiquement les notifications push. Configurez simplement Firebase Cloud Messaging (FCM) dans votre projet :

dart
Waazi.configurePush(
  fcmToken: await FirebaseMessaging.instance.getToken(),
);

Bonnes pratiques

  1. Identifiez toujours vos clients quand ils sont connectes — cela enrichit leur fiche et evite de poser des questions redondantes
  2. Personnalisez le message d'accueil selon la page ou l'ecran
  3. Activez le chatbot pour gerer les questions frequentes automatiquement
  4. Testez sur mobile — verifiez que le widget n'obstrue pas le contenu important

Prochaines etapes

  • Consultez la documentation complete pour l'API REST et les webhooks
  • Decouvrez comment configurer des chatbots avances avec l'IA de Waazi
  • Explorez les integrations CRM pour synchroniser vos contacts

Pret a essayer Waazi ?

14 jours d'essai gratuit. Aucune carte bancaire requise.

Commencer gratuitement

A lire aussi

Guide pratique

Comment centraliser votre SAV sur WhatsApp, email et chat web avec Waazi

Vos clients vous contactent sur WhatsApp, par email, via le chat de votre site. Decouvrez comment unifier tous ces canaux dans une seule interface pour ne plus jamais perdre un message.

Comparatif

Waazi vs Intercom, Crisp et Zendesk : quelle solution de support pour l'Afrique ?

Comparatif detaille des solutions de support client. Pourquoi les outils occidentaux ne sont pas adaptes au marche africain, et comment Waazi change la donne.

Business

5 raisons d'adopter un outil de support client adapte a l'Afrique de l'Ouest

Les outils de support client occidentaux ne sont pas conçus pour le marche africain. Decouvrez pourquoi un outil adapte comme Waazi fait toute la difference.