https://www.tella.tv/video/personnaliser-un-chatbot-avec-chatgpt-cvh7

Pour ajouter des domaines autorisé : https://platform.openai.com/settings/organization/security/domain-allowlist

Le code de démarrage :

<!-- === ChatKit - Version de base à coller dans le footer Webflow === -->
<script src="<https://cdn.platform.openai.com/deployments/chatkit/chatkit.js>" defer></script>

<script>
document.addEventListener("DOMContentLoaded", async () => {
  // Attendre que le web component soit prêt
  await customElements.whenDefined("openai-chatkit");

  // === 1. Créer et insérer le widget ===
  const chatkit = document.createElement("openai-chatkit");
  Object.assign(chatkit.style, {
    position: "fixed",
    right: "20px",
    bottom: "80px",
    width: "380px",
    height: "520px",
    zIndex: "999999",
    display: "none"
  });
  document.body.appendChild(chatkit);

  // === 2. Petit bouton pour ouvrir/fermer le chat ===
  const toggle = document.createElement("button");
  toggle.textContent = "💬";
  Object.assign(toggle.style, {
    position: "fixed",
    right: "20px",
    bottom: "20px",
    width: "56px",
    height: "56px",
    borderRadius: "50%",
    border: "none",
    background: "#111",
    color: "#fff",
    fontSize: "24px",
    cursor: "pointer",
    zIndex: "1000000"
  });
  toggle.onclick = () => {
    chatkit.style.display = chatkit.style.display === "none" ? "block" : "none";
  };
  document.body.appendChild(toggle);

  // === 3. Endpoint Xano pour créer la session ===
  const ENDPOINT_CREATE_SESSION = "<https://x8ki-letl-twmt.n7.xano.io/api:xC5o3de1/create_session>"; // ← ton endpoint ici

  async function getClientSecret() {
    const res = await fetch(ENDPOINT_CREATE_SESSION, { method: "POST" });
    const data = await res.json();
    if (!data.client_secret) throw new Error("Pas de client_secret reçu de Xano");
    return data.client_secret;
  }

  // === 4. Initialiser ChatKit ===
  chatkit.setOptions({
    api: {
      async getClientSecret() {
        return getClientSecret();
      }
    },
    header: {
      title: { text: "Assistant NocodeFactory" }
    },
    theme: {
      colorScheme: "light",
      color: { accent: { primary: "#ab1c1c", level: 2 } },
      radius: "soft"
    },
    startScreen: {
      greeting: "Salut 👋 Je suis ton assistant.",
      prompts: [
        { label: "Discuter d’un projet", prompt: "J’aimerais te parler de mon projet." },
        { label: "Poser une question", prompt: "Explique-moi ce que fait Nocode Factory." }
      ]
    },

    // === 5. Exemple minimal de client_tool ===
    async onClientTool({ name, params }) {
      if (name === "extract_page_content") {
        const text = document.body.innerText.slice(0, 4000);
        return { ok: true, text, length: text.length };
      }
      return { ok: false, error: "Tool inconnu: " + name };
    }
  });
});
</script>

Prompt

Lis attentivement toute la documentation officielle de ChatKit d’OpenAI disponible sur <https://platform.openai.com/docs/guides/chatkit>
 et sur la page du CDN <https://cdn.platform.openai.com/deployments/chatkit/chatkit.js>.

Analyse et comprends en détail :

Toutes les options de chatkit.setOptions() (sections api, theme, header, startScreen, messages, onClientTool, etc.)

Les paramètres supportés par le Web Component <openai-chatkit> (attributs HTML, méthodes, événements)

Les bonnes pratiques d’intégration (domain allowlist, authentification, sécurisation du client_secret, responsive design, etc.)

Les possibilités avancées (personnalisation du thème, ajout de boutons, intégration de fonctions custom via onClientTool, etc.)

Une fois la lecture terminée, je veux que tu me serves de guide technique pour personnaliser complètement mon widget ChatKit basé sur ce script :

<!-- === ChatKit - Version de base à coller dans le footer Webflow === -->
<script src="<https://cdn.platform.openai.com/deployments/chatkit/chatkit.js>" defer></script>

<script>
document.addEventListener("DOMContentLoaded", async () => {
  // Attendre que le web component soit prêt
  await customElements.whenDefined("openai-chatkit");

  // === 1. Créer et insérer le widget ===
  const chatkit = document.createElement("openai-chatkit");
  Object.assign(chatkit.style, {
    position: "fixed",
    right: "20px",
    bottom: "80px",
    width: "380px",
    height: "520px",
    zIndex: "999999",
    display: "none"
  });
  document.body.appendChild(chatkit);

  // === 2. Petit bouton pour ouvrir/fermer le chat ===
  const toggle = document.createElement("button");
  toggle.textContent = "💬";
  Object.assign(toggle.style, {
    position: "fixed",
    right: "20px",
    bottom: "20px",
    width: "56px",
    height: "56px",
    borderRadius: "50%",
    border: "none",
    background: "#111",
    color: "#fff",
    fontSize: "24px",
    cursor: "pointer",
    zIndex: "1000000"
  });
  toggle.onclick = () => {
    chatkit.style.display = chatkit.style.display === "none" ? "block" : "none";
  };
  document.body.appendChild(toggle);

  // === 3. Endpoint Xano pour créer la session ===
  const ENDPOINT_CREATE_SESSION = "TONENDPOINTICI"; // ← ton endpoint ici

  async function getClientSecret() {
    const res = await fetch(ENDPOINT_CREATE_SESSION, { method: "POST" });
    const data = await res.json();
    if (!data.client_secret) throw new Error("Pas de client_secret reçu de Xano");
    return data.client_secret;
  }

  // === 4. Initialiser ChatKit ===
  chatkit.setOptions({
    api: {
      async getClientSecret() {
        return getClientSecret();
      }
    },
    header: {
      title: { text: "Assistant NocodeFactory" }
    },
    theme: {
      colorScheme: "light",
      color: { accent: { primary: "#ab1c1c", level: 2 } },
      radius: "soft"
    },
    startScreen: {
      greeting: "Salut 👋 Je suis ton assistant.",
      prompts: [
        { label: "Discuter d’un projet", prompt: "J’aimerais te parler de mon projet." },
        { label: "Poser une question", prompt: "Explique-moi ce que fait Nocode Factory." }
      ]
    },

    // === 5. Exemple minimal de client_tool ===
    async onClientTool({ name, params }) {
      if (name === "extract_page_content") {
        const text = document.body.innerText.slice(0, 4000);
        return { ok: true, text, length: text.length };
      }
      return { ok: false, error: "Tool inconnu: " + name };
    }
  });
});
</script>

Ensuite, propose-moi :

Un résumé des principales fonctionnalités disponibles via le CDN.

Un guide clair pour personnaliser le chatbot (design, logique, événements).

Des exemples pratiques de code pour les cas d’usage fréquents (dark mode, capture de contexte, intégration backend, etc.).

Tu peux aller chercher la documentation ou les exemples sur la plateforme OpenAI ou dans la doc du CDN si nécessaire. Sois exhaustif.