Skip to main content

Documentation Index

Fetch the complete documentation index at: https://gotrebol.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

Esta guía explica cómo embeber el widget de onboarding de Trébol en tu sitio o aplicación. Para entender qué es el widget y cuándo conviene usarlo, consulta Cómo funciona Vía Widget.

​
Requisitos previos

Antes de comenzar, asegúrate de tener:
  • Acceso al código fuente de tu sitio web o aplicación.
  • Un identificador único de cliente (UUID) proporcionado por Trébol.
  • Configurada una URL de redirección válida para después de la carga de documentos.
  • El id_slug del flujo que configuraste (ver Crear el flujo).

​
Pasos para integrar el widget

​
1. Incluir el script del widget

Añade el script del widget en la página donde deseas que aparezca el botón de carga de documentos. Agrega el siguiente fragmento dentro de la etiqueta <head> o antes del cierre de la etiqueta <body> de tu HTML. 
<!-- Script del widget de onboarding de Trébol -->
<script src="https://onboarding.gotrebol.com/widget/trebol-button.js" defer></script>
  • defer: asegura que el script se cargue después de que el HTML haya sido procesado, mejorando el rendimiento.
  • CDN: el script se carga desde el CDN de Trébol, garantizando disponibilidad y actualizaciones automáticas.

​
2. Agregar el componente del widget

Inserta el componente del widget en el lugar específico de tu página donde deseas que aparezca el botón de carga de documentos. 
<!-- Componente del widget de onboarding de Trébol -->
<trebol-widget
  flowid="tu-id-slug"
  client="tu-accountid"
  redirecturl="https://tupaginaweb.com/state=tustate"
  tag="etiqueta-para-verificacion">
</trebol-widget>
Descripción de los atributos:
  • flowid: el id_slug del flujo que configuraste. Ver Crear el flujo.
  • client: tu identificador único (UUID) asignado por Trébol. Obténlo desde el panel de control de Trébol. Reemplaza "tu-accountid" con tu UUID real.
  • redirecturl: URL a la que se redirigirá al usuario una vez completada la carga de documentos. Asegúrate de que esta URL sea válida y accesible.
  • tag: etiqueta personalizada para identificar el proceso de carga de documentos. Útil para análisis y seguimiento.

​
Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Onboarding</title>
  <!-- Script del widget de onboarding de Trébol -->
  <script src="https://onboarding.gotrebol.com/widget/trebol-button.js" defer></script>
</head>
<body>

  <h1>Bienvenido al onboarding</h1>
  <p>Por favor, carga los documentos necesarios para completar tu registro.</p>

  <!-- Componente del widget de onboarding de Trébol -->
  <trebol-widget
    flowid="tu-id-slug"
    client="123e4567-e89b-12d3-a456-426614174000"
    redirecturl="https://tusitio.com/confirmacion"
    tag="registro-inicial">
  </trebol-widget>

</body>
</html>

​
Siguientes pasos

Personalizar el widget

Configura colores, logo, políticas y textos del widget.

Estados del expediente

Cómo monitorear el progreso del expediente del usuario final.