Saltar al contenido principal

(Obsoleto) Widget de Llamalitica

Obsoleto

Esta documentación describe un método de integración obsoleto. Por favor, consulta la nueva documentación de integración para implementar la última versión de Llamalitica en tu software.

El widget de Llamalitica es una herramienta potente y versátil que permite integrar fácilmente funcionalidades avanzadas de transcripción, generación de documentos y más en tu sitio web. En este artículo, exploraremos las características del widget y cómo puedes integrarlo en tu proyecto.

Introducción​

Llamalitica ofrece un widget avanzado para la generación y análisis de documentos, permitiendo a los desarrolladores integrar funcionalidades como grabación y transcripción de audio, generación de documentos desde plantillas multiagentes, y mucho más.

Características del Widget​

  • Generación de Documentos: Genera documentos a partir de plantillas predefinidas y datos del usuario.
  • Grabación y Transcripción de Audio: Permite la grabación de notas de audio que se transcriben automáticamente.
  • Selección de Plantillas (Agentes): Selecciona y aplica diferentes agentes para la generación de documentos basados en plantillas.
  • Guardado de Documentos: Guarda documentos generados directamente en tu sistema.
  • Edición Avanzada: Editor de texto enriquecido para modificar los documentos generados.
  • Generación de PDF: Opción para descargar los documentos en formato PDF.
  • Integración con EHR: Capacidad de cargar y utilizar datos de Registros Electrónicos de Salud (EHR).
  • Historial de Casos: Acceso a encuentros pasados para referencia rápida.
  • Temas Claro/Oscuro: Opción para cambiar entre temas claro y oscuro para mejor experiencia de usuario.

Métodos de Integración​

Método 1: Cargando el JS en la Web​

El widget se cargará en un contenedor div con un id personalizable y se configurará con los parámetros necesarios.

Este ejemplo muestra cómo integrar el widget de Llamalitica en una página HTML básica:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Widget embebido de Llamalitica</title>
    <script src="https://widget.cdn.llamalitica.com/latest/widget.umd.js"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
      rel="stylesheet" />
  </head>
  <body style="font-family: 'Montserrat'; display:flex; height: 100vh;">
    <div id="insert-here" style="width: 800px; height:800px;margin:auto;"></div>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        // Create a new instance of the widget
        new LlamaliticaEmbeddedWidget('insert-here', {
          patientMetadata: 'internal_patient_id: 1234567890, name: "Juan Perez", age: 30',
          locale: 'es',
          userToken: 'TU_TOKEN_DE_USUARIO <-- Obtenido desde la petición a la API',
          michiqUuid: 'UUID_DEL_CASO <-- Obtenido desde la petición a la API',
          onSaveDocument: function (document) {
            console.log(document);
          },
          saveDocumentButtonText: 'Guardar en mi sistema',
          config: {
            showUploadFilesButton: true,
            showPastEncounters: true,
            showAudioRecorder: true,
            showThemeToggle: true,
            showInnerAIButton: true,
            showSavePdfButton: true,
            showCopyToClipboardButton: true,
            theme: 'light',
            defaultTemplate: 1,
          },
        });
      });
    </script>
  </body>
</html>

Método 2: Integración en una Aplicación React​

Para integrar el widget en una aplicación React:

  1. Instala el paquete:

    npm install @llamalitica/widget

  2. Importa y utiliza el widget en tu aplicación React:

    import React from 'react';
    import LlamaliticaWidget from '@llamalitica/widget';

    const App = () => {
      return (
        <div>
          <LlamaliticaWidget
            locale="es"
            michiqUuid="UUID_DEL_CASO <-- Obtenido desde la petición a la API"
            patientMetadata="internal_patient_id: 1234567890, name: 'Juan Perez', age: 30"
            userToken="TU_TOKEN_DE_USUARIO <-- Obtenido desde la petición a la API"
            onSaveDocument={(document) => console.log(document)}
            saveDocumentButtonText="Guardar en mi sistema"
            config={{
              showUploadFilesButton: true,
              showPastEncounters: true,
              showAudioRecorder: true,
              showThemeToggle: true,
              showInnerAIButton: true,
              showSavePdfButton: true,
              showCopyToClipboardButton: true,
              theme: 'light',
              defaultTemplate: 1,
            }}
          />
        </div>
      );
    };

    export default App;

Parámetros y Configuración​

Parámetros Obligatorios​

  • userToken: Token de autenticación del usuario.
  • michiqUuid: UUID del caso o paciente.

Parámetros Opcionales​

  • patientMetadata: Metadatos del paciente en formato JSON string.
  • locale: Idioma del widget (por defecto 'es').
  • onSaveDocument: Función callback para guardar el documento.
  • saveDocumentButtonText: Texto personalizado para el botón de guardar.

Configuración del Widget​

El objeto config permite personalizar las funcionalidades del widget:

  • showUploadFilesButton: Muestra el botón para subir archivos.
  • showPastEncounters: Habilita la visualización de encuentros pasados.
  • showAudioRecorder: Muestra el grabador de audio.
  • showThemeToggle: Permite cambiar entre temas claro y oscuro.
  • showInnerAIButton: Muestra el botón de IA interna.
  • showSavePdfButton: Habilita la opción de guardar como PDF.
  • showCopyToClipboardButton: Muestra el botón para copiar al portapapeles.
  • theme: Tema inicial ('light' o 'dark').
  • defaultTemplate: ID de la plantilla por defecto.

Estructura del Documento Generado​

El documento generado tiene la siguiente estructura:

{
  "michiqUuid": "868f8226-94f9-4e98-aa46-ed0e994e740a",
  "generatedAt": "2024-07-28T12:34:56Z",
  "username": "john@doe.com",
  "organizationId": "org-12345",
  "usage": {
    "tokensGenerated": 1500,
    "tokensInput": 1200,
    "runtimeMs": 3500
  },
  "output": {
    "generatedText": "Este es un texto generado automáticamente <strong>que puede contener formato HTML</strong>",
    "userUpdatedText": "Este es un texto generado automáticamente. <i> Pero como usuario puedo modificarlo.</i>",
    "structuredData": {
      "field1": "valor1",
      "field2": "valor2"
    }
  }
}
  • En caso de no indicar el onSaveDocument el botón de guardar no se mostrará, únicamente un botón para copiar el texto generado al portapapeles.

Diagrama general de la integración​

A continuación se muestra un diagrama de secuencia general de cómo se integra el widget de Llamalitica en un sistema:

Preguntas Frecuentes (FAQ)​

¿Cómo obtengo el userToken?​

El userToken y michiqUuid se obtienen a través de la API de Llamalitica. Consulta la documentación de la API para más detalles sobre cómo obtener y utilizar este token.

¿Qué hacer si el widget no carga?​

  1. Verifica la consola del navegador para errores.
  2. Asegúrate de que el userToken sea válido y no haya expirado.
  3. Comprueba que todos los parámetros estén correctamente configurados.
  4. Verifica la conexión a internet y que los archivos del widget se estén cargando correctamente.

¿Cómo personalizo el aspecto del widget?​

El widget se adapta al tema de tu sitio web. Puedes usar el parámetro theme en la configuración para establecer el tema inicial, y el botón de cambio de tema (si está habilitado) permitirá a los usuarios alternar entre los temas claro y oscuro.

¿Puedo usar el widget sin la funcionalidad de grabación de audio?​

Sí, puedes desactivar el grabador de audio estableciendo showAudioRecorder: false en la configuración del widget.

¿Cómo integro el widget con mi sistema de gestión de documentos?​

Utiliza la función onSaveDocument para capturar el documento generado y procesarlo según las necesidades de tu sistema. Esta función recibe el documento completo, incluyendo el texto generado y cualquier modificación realizada por el usuario.