Configuration rapide

Ce tutoriel vous guide pas à pas pour configurer votre widget Sonario et l'intégrer à votre site.

Prérequis

Un compte Sonario actif
Accès au code de votre site web

Un widget est automatiquement créé lors de la création de votre organisation.

Connectez-vous au Dashboard Sonario
Dans le menu latéral, cliquez sur Widget
Vous accédez aux paramètres de votre widget

Étape 2 : Personnaliser l'apparence

Personnalisez l'apparence de votre widget :

Couleurs

Couleur primaire : Couleur des boutons et éléments d'accent
Couleur de fond : Arrière-plan du widget

Messages

Message d'accueil : Premier message affiché au visiteur
Placeholder : Texte dans le champ de saisie

Position

Choisissez où afficher le widget :

Coin inférieur droit (par défaut)
Coin inférieur gauche

Étape 3 : Récupérer le code d'intégration

Dans les paramètres du widget, allez dans Installation
Copiez le code d'intégration

Le code ressemble à ceci :

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

Étape 4 : Intégrer à votre site

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_votre_cle_publique"
    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_votre_cle_publique"
          data-server-url="https://api.sonario.app"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

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.

Prochaines étapes

Boîte de réception

Gérer les conversations entrantes

Chatbot IA

Configurer les réponses automatiques

Widget SDK

Personnalisation avancée (développeurs)