Installation

Suivez ce guide pour installer le widget Sonario sur votre site web.

Code d'intégration

Récupérer le code

Allez dans Widget > Installation
Copiez le code d'intégration affiché

Le code ressemble à ceci :

<script
  src="https://widget.sonario.app/widget.js"
  data-public-key="pk_xxxxxxxxxxxxxxxx"
  data-server-url="https://api.sonario.app"
  async
></script>

Attributs requis :

data-public-key : Votre clé publique unique
data-server-url : L'URL du serveur API

Installation par plateforme

Site HTML statique

Collez le code juste avant la balise </body> :

<!DOCTYPE html>
<html>
<head>
  <title>Mon site</title>
</head>
<body>
  <!-- Votre contenu -->

  <script
    src="https://widget.sonario.app/widget.js"
    data-public-key="pk_xxxxxxxxxxxxxxxx"
    data-server-url="https://api.sonario.app"
    async
  ></script>
</body>
</html>

Next.js / React

Ajoutez le script dans votre layout :

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://widget.sonario.app/widget.js"
          data-public-key="pk_xxxxxxxxxxxxxxxx"
          data-server-url="https://api.sonario.app"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

WordPress

Installez un plugin comme WPCode ou Insert Headers and Footers
Allez dans Snippets → En-têtes & Pieds de page
Collez le code dans la section Pied de page
Enregistrez les modifications

Shopify

Allez dans Boutique en ligne → Thèmes → Actions → Modifier le code
Ouvrez Layout → theme.liquid
Collez le code avant la balise </body>
Enregistrez les modifications

Clé publique

La clé publique (data-public-key) identifie votre widget de manière unique. Elle a le format pk_ suivi de 32 caractères hexadécimaux.

SDK JavaScript

Une fois le widget chargé, l'objet global Sonario est disponible :

// Ouvrir le widget
Sonario.open();

// Fermer le widget
Sonario.close();

// Basculer l'état
Sonario.toggle();

// Vérifier si ouvert
const isOpen = Sonario.isOpen();

// Afficher/masquer le launcher
Sonario.showLauncher();
Sonario.hideLauncher();

// Écouter les événements
Sonario.on('widget:open', () => console.log('Widget ouvert'));
Sonario.on('widget:close', () => console.log('Widget fermé'));
Sonario.on('unread:changed', (data) => console.log('Non lus:', data.count));

// Exécuter du code quand le widget est prêt
Sonario.onReady(() => {
  console.log('Widget prêt');
});

Boutons personnalisés

Utilisez les attributs data-sonario-* pour déclencher des actions :

<button data-sonario-open>Ouvrir le chat</button>
<button data-sonario-close>Fermer</button>
<button data-sonario-toggle>Basculer</button>

Vérifier l'installation

Ouvrez votre site dans un navigateur
Le widget devrait apparaître dans le coin configuré
Cliquez dessus pour ouvrir le chat
Envoyez un message de test

Vous verrez la conversation apparaître dans votre dashboard Sonario.

Problèmes courants

Vérifiez que le script est bien chargé (Console > Network)
Vérifiez la clé publique du widget

Conflits avec d'autres scripts

Si le widget cause des problèmes :

Chargez-le avec async ou defer
Vérifiez les conflits CSS avec z-index