Guide : Intégrer UBIK avec un iframe

curl -X GET "https://app.ubik-agent.com/api/v1/tools/VOTRE_ID_OUTIL/embed-info?external_user_id=user_456" \
     -H "X-API-KEY: VOTRE_CLE_API"

import React, { useState, useEffect } from 'react';

const EmbeddedTool = ({ toolId }) => {
  const [embedInfo, setEmbedInfo] = useState(null);

  useEffect(() => {
    // Dans une vraie application, ceci récupérerait les données depuis votre backend
    const fetchEmbedInfo = async () => {
      try {
        const response = await fetch(`/api/get-tool-embed-info?toolId=${toolId}`);
        const data = await response.json();
        setEmbedInfo(data);
      } catch (error) {
        console.error("Échec de la récupération des informations d'intégration:", error);
      }
    };

    fetchEmbedInfo();
  }, [toolId]);

  if (!embedInfo) {
    return <div>Chargement de l'outil...</div>;
  }

  // Ajoutez le jeton d'accès en tant que paramètre de requête.
  // Note : Si vous avez généré un jeton scopé utilisateur via /auth/token, utilisez-le ici à la place.
  const iframeSrc = `https://app.ubik-agent.com/embed/tools/${embedInfo.id}?jwt=${embedInfo.access_token}`;

  return (
    <iframe
      src={iframeSrc}
      title={embedInfo.name}
      width="100%"
      height="600px"
      frameBorder="0"
    />
  );
};

export default EmbeddedTool;