waazi_sdk 0.13.0

SDK Flutter pour intégrer le support client Waazi dans votre application mobile. Centre d'aide, chat en temps réel, signalement de bugs.

Waazi SDK for Flutter

Le SDK Flutter pour integrer le support client Waazi dans votre application mobile Android et iOS.

Fonctionnalites

Fonctionnalite	Description
Centre d'aide	Articles, recherche, categories, feedback utilisateur
Chat en temps reel	Conversations avec vos agents, envoi d'images, indicateur de frappe
Bug Reporting	Shake to report, capture d'erreurs automatique, screenshots
Notifications push	Integration FCM native
Dark mode	S'adapte au theme de votre app (clair/sombre)
Theming	Couleurs et branding configures depuis le dashboard Waazi

Prerequis

• Flutter >= 3.16.0
• Dart >= 3.0.0
• Android : minSdkVersion 21, compileSdkVersion 35
• iOS : iOS 13+
• Un compte Waazi et une publishable key

Installation

Ajoutez le package dans votre pubspec.yaml :

dependencies:
  waazi_sdk: ^0.12.0

Puis lancez :

flutter pub get

Configuration Android

Dans android/app/build.gradle, assurez-vous d'avoir :

android {
    compileSdkVersion 35

    defaultConfig {
        minSdkVersion 21
    }
}

Configuration iOS

Dans ios/Podfile, assurez-vous d'avoir :

platform :ios, '13.0'

Demarrage rapide

1. Initialiser le SDK

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Waazi.initialize(
    publishableKey: 'pk_live_waazi_xxxxxxxx',
  );

  runApp(
    WaaziOverlay(child: MyApp()),
  );
}

WaaziOverlay enveloppe votre MaterialApp et affiche automatiquement un bouton flottant pour ouvrir le support.

2. Identifier l'utilisateur

Appelez identify apres le login de votre app pour associer les conversations a l'utilisateur :

await Waazi.identify(
  userId: 'user_123',
  email: '[e-mail]',
  name: 'Amadou Diallo',
  phone: '[phone]',
);

3. Ouvrir le support

// Messenger complet (accueil + messages + centre d'aide)
Waazi.showMessenger(context);

// Centre d'aide uniquement
Waazi.showHelpCenter(context);

// Nouvelle conversation avec message pre-rempli
Waazi.showNewConversation(context, initialMessage: "J'ai un probleme avec...");

Dark mode

Le widget Waazi s'adapte au theme de votre app. Passez le brightness via WaaziOverlay :

WaaziOverlay(
  brightness: isDark ? Brightness.dark : Brightness.light,
  child: MaterialApp(
    themeMode: isDark ? ThemeMode.dark : ThemeMode.light,
    theme: ThemeData.light(),
    darkTheme: ThemeData.dark(),
    home: MyHomePage(),
  ),
)

Si brightness n'est pas specifie, le widget suit le theme de l'app hote.

Bug Reporting

// Activer le shake to report (secouer le telephone pour signaler un bug)
Waazi.enableShakeToReport();

// Capture automatique des erreurs non gerees
WaaziErrorCapture.enable();

// Ajouter du contexte aux rapports de bugs
Waazi.setContext('screen', 'checkout');
Waazi.setContext('cartTotal', 15000);

// Reporter un bug manuellement
await Waazi.reportBug(description: 'Le bouton ne fonctionne pas');

Notifications push (FCM)

Prerequis : configurez Firebase dans votre app et fournissez vos credentials Firebase sur votre dashboard Waazi.

import 'package:firebase_messaging/firebase_messaging.dart';

// 1. Creer le channel Android (a appeler une fois au demarrage)
await Waazi.setupPushChannel();

// 2. Enregistrer le token FCM
final token = await FirebaseMessaging.instance.getToken();
if (token != null) {
  await Waazi.registerPushToken(token);
}

// 3. Re-enregistrer si le token change
FirebaseMessaging.instance.onTokenRefresh.listen((newToken) {
  Waazi.registerPushToken(newToken);
});

// 4. Gerer le tap sur une notification (app en background)
FirebaseMessaging.onMessageOpenedApp.listen((message) {
  if (Waazi.isWaaziPush(message)) {
    Waazi.handlePushMessage(message);
  }
});

// 5. Gerer le cas ou l'app est ouverte depuis une notification (app fermee)
final initialMessage = await FirebaseMessaging.instance.getInitialMessage();
if (initialMessage != null && Waazi.isWaaziPush(initialMessage)) {
  Waazi.handlePushMessage(initialMessage);
}

Event tracking

Envoyez des evenements personnalises pour suivre le comportement utilisateur :

Waazi.trackEvent('purchase', metadata: {
  'amount': 15000,
  'currency': 'XOF',
});

Configuration avancee

await Waazi.initialize(
  publishableKey: 'pk_live_waazi_xxxxxxxx',
  config: WaaziConfig(
    apiUrl: 'https://api.custom-domain.com', // pour self-host
    enableHelpCenter: true,
    enableMessaging: true,
    enableBugReport: true,
    locale: 'fr', // langue (fr, en)
  ),
);

Personnalisation du launcher

Ajustements simples via WaaziConfig

await Waazi.initialize(
  publishableKey: 'pk_live_waazi_xxxxxxxx',
  config: WaaziConfig(
    fabSize: 48,              // taille du bouton (defaut: 56)
    fabIcon: Icons.support,   // icone custom (defaut: chat_bubble_rounded)
    fabBottom: 160,           // marge du bas (defaut: 24)
    fabRight: 20,             // marge droite (defaut: 24)
    fabLeft: null,            // marge gauche (defaut: null)
    fabTop: null,             // marge du haut (defaut: null)
    fabElevation: 4,          // ombre (defaut: 8)
    showLauncher: true,       // false pour masquer le bouton
  ),
);

Surcharge du theme

Surchargez les couleurs et la police du widget Waazi :

WaaziOverlay(
  theme: WaaziThemeData(
    primaryColor: Colors.indigo,
    fontFamily: 'Poppins',
  ),
  child: MyApp(),
)

Launcher entierement custom

Remplacez le bouton flottant par votre propre widget. Vous avez le controle total sur le positionnement :

WaaziOverlay(
  launcher: (unreadCount, onTap) => Positioned(
    right: 20,
    bottom: 160,
    child: FloatingActionButton(
      onPressed: onTap,
      backgroundColor: Colors.indigo,
      child: Badge(
        isLabelVisible: unreadCount > 0,
        label: Text('$unreadCount'),
        child: Icon(Icons.headset_mic),
      ),
    ),
  ),
  child: MyApp(),
)

Pas de launcher — declenchement custom

// Dans WaaziConfig
await Waazi.initialize(
  publishableKey: 'pk_...',
  config: WaaziConfig(showLauncher: false),
);

// Puis enveloppez comme d'habitude
WaaziOverlay(child: MyApp())

// Ouvrir depuis n'importe quel bouton de votre app
ElevatedButton(
  onPressed: () => Waazi.showMessenger(context),
  child: Text('Aide'),
)

Visibilite du launcher par ecran

Par defaut, le launcher est visible sur tous les ecrans. Vous pouvez controler sa visibilite dynamiquement.

Toggle manuel

// Masquer le launcher (ex: pendant le checkout)
Waazi.setLauncherVisibility(false);

// Le re-afficher
Waazi.setLauncherVisibility(true);

// Exemple: visible uniquement si l'utilisateur est connecte
if (user.isAuthenticated) {
  Waazi.setLauncherVisibility(true);
} else {
  Waazi.setLauncherVisibility(false);
}

WaaziRouteObserver — automatique selon la route

Branchez WaaziRouteObserver sur votre router pour afficher/masquer le launcher automatiquement au changement de page.

Whitelist — visible uniquement sur certaines routes :

// Avec GoRouter
GoRouter(
  observers: [
    WaaziRouteObserver(showOn: {'/home', '/profile', '/settings'}),
  ],
  routes: [...],
);

// Avec Navigator classique
MaterialApp(
  navigatorObservers: [
    WaaziRouteObserver(showOn: {'/home', '/profile', '/settings'}),
  ],
);

Blacklist — visible partout sauf certaines routes :

GoRouter(
  observers: [
    WaaziRouteObserver(hideOn: {'/checkout', '/payment', '/onboarding'}),
  ],
  routes: [...],
);

Note : utilisez showOn OU hideOn, pas les deux en meme temps. Les noms de routes correspondent aux name definis dans vos routes.

Deconnexion

Au logout de votre app, appelez logout pour dissocier l'utilisateur :

await Waazi.logout();

Exemple

Un projet d'exemple complet est disponible dans le dossier example/.

cd example
flutter run

Support

• Documentation : waazi.io
• Issues : GitLab Issues
• Email : [e-mail]

Licence

MIT - voir le fichier LICENSE pour plus de details.

Developpe par Kreezus.