Intégrer un assistant sur un site web

La mise en ligne se résume essentiellement à un copier-coller. Vous ajoutez trois éléments à votre page — le script d’exécution Seekdown, un élément conteneur et un court extrait pour le démarrer — et c’est tout. Voici l’extrait exact que le produit génère pour vous.

Avant de commencer

• Ajoutez le domaine du site aux origines autorisées.
• Générez une clé API si le mode de sécurité est API.
• Munissez-vous de l’ID de l’assistant.

Extrait de code

<div id="seekdown-assistant-root"></div>

<!-- Include the public Seekdown runtime -->
<script src="https://saas.seekdown.ai/js/seekdown-assistant.js"></script>

<!-- Initialize the assistant with your assistantId and accessToken -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    if (window.skdwn?.startAssistant) {
      let seekdownAssistantOptions = {
        assistantId: 'your-assistant-id',
        accessToken: 'your-api-key-or-identity-access-token',
      };

      skdwn.startAssistant(seekdownAssistantOptions);
    } else {
      console.error('skdwn.startAssistant is not available.');
    }
  });
</script>

Où placer l’extrait

• Placez le <script> d’exécution et le <div> conteneur juste avant la balise de fermeture </body>, pour que la page soit chargée avant le démarrage de l’assistant.
• Le conteneur <div id="seekdown-assistant-root"></div> doit exister sur la page — l’assistant s’y monte.
• Si votre site applique une Content-Security-Policy stricte, autorisez le script et la connexion vers saas.seekdown.ai, sinon le script d’exécution ne se chargera pas.

Options d’initialisation

startAssistant(options) reçoit un objet d’options. Seules quelques-unes sont obligatoires — les autres vous permettent d’adapter l’assistant à son public et à son apparence :

Événements du cycle de vie

startAssistant(options, events?) accepte un second argument facultatif pour vous brancher sur son cycle de vie :

• onStarted() — se déclenche une fois que l’assistant est monté et qu’il a (si l’option est activée) restauré la conversation précédente. Utilisez-le pour masquer un indicateur de chargement ou suivre l’événement « assistant prêt ».
• onError(error, info) — se déclenche si l’initialisation échoue ; info.componentStack fournit le contexte. Utilisez-le pour afficher une solution de repli ou réessayer.

<script>
  skdwn.startAssistant(
    {
      assistantId: 'your-assistant-id',
      accessToken: 'your-api-key',
      userId: 'customer-42',
      userInformation: { plan: 'pro', locale: 'en-US' },
      additionalContext: 'Signed-in user is on the Pro plan at Acme.',
      config: { settings: { baseTheme: 'dark' } },
    },
    {
      onStarted: function () { console.log('Assistant ready'); },
      onError: function (err, info) { console.error(err, info.componentStack); },
    }
  );
</script>

Plusieurs assistants sur une même page

Vous pouvez faire fonctionner plusieurs assistants sur la même page en même temps — par exemple un champ de recherche dans l’en-tête et un chat de support sous forme de bouton flottant. La règle est simple : chargez le script d’exécution une seule fois, donnez à chaque assistant son propre conteneur, et appelez startAssistant une fois par assistant avec un container. Démarrer l’un n’arrête jamais les autres.

<!-- Load the runtime once -->
<script src="https://saas.seekdown.ai/js/seekdown-assistant.js"></script>

<!-- One container (with a unique id) per assistant -->
<div id="assistant-search"></div>
<div id="assistant-support"></div>

<script>
  const base = { accessToken: 'your-api-key', serviceURL: 'https://saas.seekdown.ai' };

  // Header search assistant
  skdwn.startAssistant({
    ...base,
    assistantId: 'as-search',
    container: '#assistant-search',
    config: { settings: { baseTemplate: 'overlay' } },
  });

  // Floating support chat
  skdwn.startAssistant({
    ...base,
    assistantId: 'as-support',
    container: '#assistant-support',
    config: { settings: { floatingActionButton: { useFloatingActionButton: true } } },
  });
</script>

Chaque instance est entièrement isolée — sa propre connexion, sa configuration, ses templates et son état — elles peuvent donc partager un assistantId ou en utiliser des différents sans interférer.

Cibler un assistant précis. Le script d’exécution expose une petite API sur window.skdwn :

// Open the support chat from your own button
const support = window.skdwn.instanceFor('#assistant-support');
window.skdwn.instance = support;                 // point the context at it
support.helpers.toggleShowFloatingWindow(true);  // helpers act on the current context

Vérifier le résultat

Ouvrez la page et vérifiez que l’assistant apparaît et répond.

Dépannage

• Si le widget n’apparaît pas, vérifiez l’URL du script, le conteneur et la console du navigateur.
• Si l’accès est bloqué, vérifiez les origines autorisées et le jeton.

Documentation associée

• Configurer les origines autorisées
• Dépanner l’intégration