Intégrer la Chatbox TALKR dans votre site

1️⃣

Récupérez votre Bot ID

Connectez-vous à votre espace TALKR, ouvrez votre bot et copiez l'identifiant (Bot ID) depuis les paramètres. C'est cet ID qui relie la chatbox à votre agent IA.

2️⃣

Personnalisez le design

Modifiez les variables CSS pour adapter les couleurs, les polices et le border-radius à votre charte graphique. Tout se passe dans le bloc :root.

3️⃣

Collez le code

Ajoutez le snippet HTML/CSS/JS dans votre page web, juste avant la balise </body>. La chatbox apparaît en bas à droite de votre site.

🎨 Variables CSS — Couleurs & Typographie

Remplacez les valeurs ci-dessous par les couleurs et polices de votre marque :

:root {
  /* ═══ COULEURS ═══ */
  --primary: #7B2FBE;         /* Couleur principale (header, boutons, bulles user) */
  --primary-hover: #6a25a6;   /* Hover sur bouton envoyer */
  --secondary: #2CC4D1;       /* Couleur secondaire (avatar) */
  --dark: #001B39;             /* Couleur sombre (dégradé header) */

  --bg: #f4f5f7;               /* Fond de page / fond derrière la chatbox */
  --white: #ffffff;            /* Fond de la chatbox */
  --gray-100: #f0f1f3;         /* Fond des bulles bot */
  --gray-300: #d1d5db;         /* Bordures, scrollbar */
  --gray-500: #6b7280;         /* Texte secondaire */

  /* ═══ TYPOGRAPHIE ═══ */
  --font-body: 'Inter', sans-serif;      /* Police du corps de texte */
  --font-title: 'Poppins', sans-serif;   /* Police des titres */

  /* ═══ DIMENSIONS ═══ */
  --radius: 1rem;              /* Border-radius général */
  --chat-width: 420px;         /* Largeur de la chatbox */
  --chat-height: 680px;        /* Hauteur de la chatbox */
}

🔤 Charger vos propres polices

Si vous utilisez des polices différentes (ex: Roboto + Montserrat), ajoutez-les via Google Fonts puis mettez à jour les variables :

<!-- Dans votre <head> -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">

<style>
:root {
  --font-body: 'Roboto', sans-serif;
  --font-title: 'Montserrat', sans-serif;
}
</style>

🎯 Exemples de thèmes

Voici quelques combinaisons de couleurs prêtes à l'emploi :

TALKR (défaut)

--primary: #7B2FBE;
--secondary: #2CC4D1;
--dark: #001B39;

Corporate Blue

--primary: #2563eb;
--secondary: #60a5fa;
--dark: #1e3a5f;

Nature Green

--primary: #059669;
--secondary: #34d399;
--dark: #064e3b;

Bold Red

--primary: #dc2626;
--secondary: #f87171;
--dark: #450a0a;

Ce code crée un bouton flottant qui ouvre la chatbox au clic. Il inclut tout le CSS et le JS nécessaires — aucune dépendance externe requise à part Google Fonts.

<!-- ═══ CHATBOX TALKR — Widget flottant ═══ -->

<!-- 1. Polices Google (remplacez par les vôtres) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap" rel="stylesheet">

<style>
/* ═══ VARIABLES — Personnalisez ici ═══ */
:root {
  --chat-primary: #7B2FBE;
  --chat-primary-hover: #6a25a6;
  --chat-secondary: #2CC4D1;
  --chat-dark: #001B39;
  --chat-bg: #ffffff;
  --chat-gray-100: #f0f1f3;
  --chat-gray-300: #d1d5db;
  --chat-gray-500: #6b7280;
  --chat-radius: 1rem;
  --chat-font-body: 'Inter', sans-serif;
  --chat-font-title: 'Poppins', sans-serif;
}

/* ═══ BOUTON FLOTTANT ═══ */
.talkr-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--chat-primary);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  z-index: 9998;
  transition: transform .2s, box-shadow .2s;
}
.talkr-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

/* ═══ CHATBOX CONTENEUR ═══ */
.talkr-chatbox {
  display: none;
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: 400px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 120px);
  background: var(--chat-bg);
  border-radius: var(--chat-radius);
  box-shadow: 0 12px 48px rgba(0,0,0,.18);
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  font-family: var(--chat-font-body);
  animation: talkrSlideUp .3s ease;
}
.talkr-chatbox.is-open { display: flex; }

@keyframes talkrSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ HEADER ═══ */
.talkr-chatbox__header {
  background: linear-gradient(135deg, var(--chat-primary), var(--chat-dark));
  color: #fff;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.talkr-chatbox__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--chat-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.talkr-chatbox__title {
  font-family: var(--chat-font-title);
  font-weight: 700; font-size: 1rem;
}
.talkr-chatbox__subtitle { font-size: .75rem; opacity: .8; }
.talkr-chatbox__status {
  display: inline-block; width: 8px; height: 8px;
  background: #34d399; border-radius: 50%; margin-right: .35rem;
}
.talkr-chatbox__close {
  margin-left: auto; background: rgba(255,255,255,.15);
  border: none; border-radius: 50%; width: 34px; height: 34px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.talkr-chatbox__close:hover { background: rgba(255,255,255,.28); }
.talkr-chatbox__close svg { width: 16px; height: 16px; fill: #fff; }

/* ═══ MESSAGES ═══ */
.talkr-chatbox__messages {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.talkr-msg {
  max-width: 82%; padding: .7rem 1rem;
  border-radius: var(--chat-radius);
  font-size: .9rem; line-height: 1.45;
  animation: talkrFadeIn .25s ease;
}
@keyframes talkrFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.talkr-msg--bot {
  align-self: flex-start;
  background: var(--chat-gray-100);
  color: var(--chat-dark);
  border-bottom-left-radius: 4px;
}
.talkr-msg--user {
  align-self: flex-end;
  background: var(--chat-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.talkr-msg--typing {
  align-self: flex-start; background: var(--chat-gray-100);
  border-bottom-left-radius: 4px; display: flex; gap: 4px; padding: .9rem 1.2rem;
}
.talkr-msg--typing span {
  width: 8px; height: 8px; background: var(--chat-gray-500);
  border-radius: 50%; animation: talkrBounce .6s infinite alternate;
}
.talkr-msg--typing span:nth-child(2) { animation-delay: .15s; }
.talkr-msg--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes talkrBounce { to { transform: translateY(-6px); opacity: .4; } }

/* ═══ INPUT ═══ */
.talkr-chatbox__input {
  padding: .75rem 1rem; border-top: 1px solid var(--chat-gray-300);
  display: flex; gap: .5rem;
}
.talkr-chatbox__input input {
  flex: 1; border: 1px solid var(--chat-gray-300);
  border-radius: 2rem; padding: .6rem 1rem;
  font-family: var(--chat-font-body); font-size: .9rem;
  outline: none; transition: border-color .2s;
}
.talkr-chatbox__input input:focus { border-color: var(--chat-primary); }
.talkr-chatbox__input button {
  background: var(--chat-primary); color: #fff; border: none;
  border-radius: 50%; width: 40px; height: 40px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.talkr-chatbox__input button:hover { background: var(--chat-primary-hover); }
.talkr-chatbox__input button:disabled { background: var(--chat-gray-300); cursor: not-allowed; }
.talkr-chatbox__input button svg { width: 18px; height: 18px; fill: #fff; }

/* Scrollbar */
.talkr-chatbox__messages::-webkit-scrollbar { width: 5px; }
.talkr-chatbox__messages::-webkit-scrollbar-thumb { background: var(--chat-gray-300); border-radius: 4px; }
</style>

<!-- 2. HTML du widget -->
<button class="talkr-fab" id="talkrFab" aria-label="Ouvrir le chat">💬</button>

<div class="talkr-chatbox" id="talkrChat">
  <div class="talkr-chatbox__header">
    <div class="talkr-chatbox__avatar">🤖</div>
    <div>
      <div class="talkr-chatbox__title">Mon Assistant</div>
      <div class="talkr-chatbox__subtitle">
        <span class="talkr-chatbox__status"></span>En ligne
      </div>
    </div>
    <button class="talkr-chatbox__close" id="talkrClose" aria-label="Fermer">
      <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
    </button>
  </div>
  <div class="talkr-chatbox__messages" id="talkrMessages"></div>
  <div class="talkr-chatbox__input">
    <input type="text" id="talkrInput" placeholder="Tapez votre message..." autocomplete="off">
    <button id="talkrSend" aria-label="Envoyer">
      <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
    </button>
  </div>
</div>

<!-- 3. JavaScript -->
<script>
(function() {
  // ══ CONFIG — Remplacez par votre Bot ID ══
  const BOT_ID = 'VOTRE_BOT_ID';
  const API_URL = `https://api-production.talkr.ai/demo-lead/bots/${BOT_ID}/api/telephony`;

  // ══ STATE ══
  let session = null, tracking = null, sending = false;

  // ══ DOM ══
  const fab      = document.getElementById('talkrFab');
  const chatbox  = document.getElementById('talkrChat');
  const closeBtn = document.getElementById('talkrClose');
  const msgs     = document.getElementById('talkrMessages');
  const input    = document.getElementById('talkrInput');
  const sendBtn  = document.getElementById('talkrSend');

  // ══ TOGGLE ══
  fab.addEventListener('click', () => {
    chatbox.classList.add('is-open');
    fab.style.display = 'none';
    input.focus();
    if (!session) init();
  });
  closeBtn.addEventListener('click', () => {
    chatbox.classList.remove('is-open');
    fab.style.display = 'flex';
  });

  // ══ HELPERS ══
  function addMsg(text, type) {
    const d = document.createElement('div');
    d.className = 'talkr-msg talkr-msg--' + type;
    d.textContent = text;
    msgs.appendChild(d);
    msgs.scrollTop = msgs.scrollHeight;
  }
  function showTyping() {
    const d = document.createElement('div');
    d.className = 'talkr-msg talkr-msg--typing';
    d.id = 'talkrTyping';
    d.innerHTML = '<span></span><span></span><span></span>';
    msgs.appendChild(d);
    msgs.scrollTop = msgs.scrollHeight;
  }
  function hideTyping() {
    const el = document.getElementById('talkrTyping');
    if (el) el.remove();
  }
  function setEnabled(v) {
    input.disabled = !v;
    sendBtn.disabled = !v;
    sending = !v;
  }

  // ══ API ══
  async function callAPI(msg) {
    const body = {};
    if (!session) { body.message = msg || ''; }
    else {
      body.message = msg;
      body.session = session;
      if (tracking) body.tracking = tracking;
      body.variables = { userresponse: msg };
    }
    const res = await fetch(API_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body)
    });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    return res.json();
  }

  function extractResponse(data) {
    const messages = data?.data?.messages || [];
    const botAnswer = data?.variables?.bot_answer || '';
    const responses = data?.data?.responses || [];
    if (data.session) session = data.session;
    if (responses.length > 0 && responses[0].tracking) tracking = responses[0].tracking;
    const texts = [];
    for (const m of messages) { if (m.content) texts.push(m.content); }
    if (botAnswer && botAnswer !== texts[texts.length - 1]) texts.push(botAnswer);
    return texts;
  }

  // ══ SEND ══
  async function send() {
    const text = input.value.trim();
    if (!text || sending) return;
    addMsg(text, 'user');
    input.value = '';
    setEnabled(false);
    showTyping();
    try {
      const data = await callAPI(text);
      hideTyping();
      const botTexts = extractResponse(data);
      for (let i = 0; i < botTexts.length; i++) {
        if (i > 0) await new Promise(r => setTimeout(r, 600));
        addMsg(botTexts[i], 'bot');
      }
    } catch(e) {
      hideTyping();
      addMsg('Erreur de connexion.', 'error');
    }
    setEnabled(true);
    input.focus();
  }

  async function init() {
    showTyping();
    try {
      const data = await callAPI('');
      hideTyping();
      const texts = extractResponse(data);
      for (let i = 0; i < texts.length; i++) {
        if (i > 0) await new Promise(r => setTimeout(r, 600));
        addMsg(texts[i], 'bot');
      }
    } catch(e) { hideTyping(); addMsg('Impossible de se connecter.', 'error'); }
    input.focus();
  }

  sendBtn.addEventListener('click', send);
  input.addEventListener('keydown', e => { if (e.key === 'Enter') send(); });
})();
</script>

📐 Changer la taille

Modifiez la largeur et la hauteur de la chatbox :

.talkr-chatbox {
  width: 450px;     /* plus large */
  height: 700px;    /* plus haute */
}

📍 Changer la position

Déplacez le bouton et la chatbox à gauche :

.talkr-fab {
  right: auto;
  left: 24px;        /* bouton à gauche */
}
.talkr-chatbox {
  right: auto;
  left: 24px;        /* chatbox à gauche */
}

🖼️ Avatar personnalisé

Remplacez l'emoji par votre logo :

<!-- Remplacez le contenu de l'avatar -->
<div class="talkr-chatbox__avatar">
  <img src="/votre-logo.png"
       alt="Logo"
       style="width:100%;
              height:100%;
              object-fit:cover;
              border-radius:50%;">
</div>

🌙 Mode sombre

Ajoutez un thème dark avec quelques variables :

:root {
  --chat-bg: #1a1a2e;
  --chat-gray-100: #2a2a3e;
  --chat-gray-300: #3a3a4e;
  --chat-gray-500: #9ca3af;
  --chat-dark: #0f0f1a;
}
.talkr-chatbox__input input {
  background: #2a2a3e;
  color: #fff;
}

✅

Bot ID configuré

Remplacez VOTRE_BOT_ID par l'identifiant réel de votre bot dans le code JavaScript.

✅

Polices chargées

Assurez-vous que les polices Google Fonts déclarées dans les variables CSS sont bien chargées dans votre <head>.

✅

Couleurs harmonisées

Vérifiez que les couleurs de la chatbox matchent votre charte graphique et offrent un contraste suffisant (WCAG AA).

✅

Mobile responsive

La chatbox s'adapte automatiquement aux petits écrans grâce à max-width et max-height. Testez sur mobile avant le déploiement.

Intégrez la chatbox TALKR à votre image

3 étapes pour intégrer votre chatbox

Récupérez votre Bot ID

Personnalisez le design

Collez le code

Personnalisez votre design

🎨 Variables CSS — Couleurs & Typographie

🔤 Charger vos propres polices

🎯 Exemples de thèmes

Code complet prêt à copier

📋 Widget chatbox flottant (bas à droite)

Aller plus loin dans la personnalisation