Documentation NextChat SDK

Intégrez un chatbot IA intelligent sur votre site web en moins de 3 minutes avec NextChat SDK.

💡 Info

NextChat SDK est un widget JavaScript léger (~50KB) qui permet d'ajouter un chatbot IA conversationnel sur n'importe quel site web.

🚀 Démarrage Rapide

Intégrez NextChat en 2 lignes de code. Aucune configuration complexe requise.

Étape 1 : Obtenir votre clé API

Créez un compte gratuit sur app.next-chat.io
Obtenez votre clé API publique dans le dashboard

Étape 2 : Ajouter le script

Copiez ce code dans votre page HTML, juste avant </body> :

<script
  src="https://cdn.next-chat.io/nextchat/v1/sdk.min.js"
  data-api-key="pk_live_votre_cle_publique"
  async
></script>

✅ C'est tout !

Le chatbot apparaîtra automatiquement en bas à droite de votre page.

📦 Installation

🌐

CDN (Recommandé)

La méthode la plus simple. Chargement rapide via CDN global.

📦

NPM

Pour les projets React, Vue, Angular et autres frameworks modernes.

⚡

WordPress Plugin

Plugin WordPress prêt à l'emploi. Installation en 1 clic.

Installation via CDN

<!-- Version stable (recommandée) -->
<script
  src="https://cdn.next-chat.io/nextchat/v1/sdk.min.js"
  data-api-key="pk_live_xxx"
  async
></script>

<!-- Version spécifique -->
<script
  src="https://cdn.next-chat.io/nextchat/1.2.5/sdk.min.js"
  data-api-key="pk_live_xxx"
></script>

Installation via NPM

npm install @nextchat/sdk

# ou avec yarn
yarn add @nextchat/sdk

Puis dans votre code JavaScript :

import NextChat from '@nextchat/sdk';

const chat = new NextChat({
  apiKey: 'pk_live_xxx',
  position: 'bottom-right'
});

chat.init();

⚙️ Configuration

Personnalisez le comportement et l'apparence du chatbot selon vos besoins.

Options disponibles

Option	Type	Défaut	Description
`apiKey`	string	requis	Votre clé API publique
`position`	string	'bottom-right'	Position du chatbot
`primaryColor`	string	'#00d9ff'	Couleur principale
`greeting`	string	'Bonjour !'	Message d'accueil
`placeholder`	string	'Tapez votre message...'	Placeholder de l'input

Exemple de configuration complète

<script
  src="https://cdn.next-chat.io/nextchat/v1/sdk.min.js"
  data-api-key="pk_live_xxx"
  data-position="bottom-left"
  data-primary-color="#00d9ff"
  data-greeting="👋 Besoin d'aide ?"
  data-placeholder="Posez-moi une question..."
  data-model="deepseek"
  async
></script>

🎨 Personnalisation

Couleurs et thème

// Via data attributes
<script
  data-primary-color="#00d9ff"
  data-text-color="#1a202c"
  data-bg-color="#ffffff"
  ...
></script>

// Via JavaScript
NextChat.setTheme({
  primaryColor: '#00d9ff',
  textColor: '#1a202c',
  backgroundColor: '#ffffff',
  borderRadius: '12px'
});

Position

Positionnez le chatbot où vous voulez :

bottom-right (par défaut)
bottom-left
top-right
top-left

🔧 Méthodes API

Méthodes principales

init()

Initialise le chatbot.

NextChat.init();

open()

Ouvre la fenêtre de chat.

NextChat.open();

close()

Ferme la fenêtre de chat.

NextChat.close();

sendMessage(message)

Envoie un message programmé.

NextChat.sendMessage('Bonjour, j\'ai besoin d\'aide');

destroy()

Supprime complètement le chatbot du DOM.

NextChat.destroy();

💡 Exemples

Intégration basique

<!DOCTYPE html>
<html>
<head>
  <title>Mon Site</title>
</head>
<body>
  <h1>Bienvenue !</h1>

  <!-- NextChat SDK -->
  <script
    src="https://cdn.next-chat.io/nextchat/v1/sdk.min.js"
    data-api-key="pk_live_xxx"
    async
  ></script>
</body>
</html>

Intégration React

import { useEffect } from 'react';
import NextChat from '@nextchat/sdk';

function App() {
  useEffect(() => {
    const chat = new NextChat({
      apiKey: 'pk_live_xxx',
      position: 'bottom-right'
    });

    chat.init();

    return () => chat.destroy();
  }, []);

  return (
    <div className="App">
      <h1>Mon App React</h1>
    </div>
  );
}

❓ FAQ

Le chatbot est-il gratuit ?

NextChat offre un plan gratuit avec 1000 messages/mois. Parfait pour démarrer. Les plans payants démarrent à 29€/mois.

Quels modèles IA sont disponibles ?

NextChat supporte DeepSeek, GPT-4, GPT-3.5-Turbo, et Gemini. Vous pouvez choisir le modèle dans le dashboard.

Puis-je personnaliser le design ?

Oui, entièrement ! Couleurs, position, messages, tout est personnalisable via les options de configuration.

Le SDK est-il compatible avec tous les navigateurs ?

Oui, NextChat fonctionne sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) et sur mobile.

💬 Obtenir de l'aide

📧

Email

contact@next-chat.io

💬

Chat en direct

Utilisez le chatbot en bas à droite

📊

Status

status.next-chat.io