Instalar el widget

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).

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.

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>

Intro al API de Trébol

Guías por caso de uso

Instalar el widget

Requisitos previos

Pasos para integrar el widget

1. Incluir el script del widget

2. Agregar el componente del widget

Ejemplo completo

Siguientes pasos

Personalizar el widget

Estados del expediente

​Requisitos previos

​Pasos para integrar el widget

​1. Incluir el script del widget

​2. Agregar el componente del widget

​Ejemplo completo

​Siguientes pasos

Personalizar el widget

Estados del expediente

Requisitos previos

Pasos para integrar el widget

1. Incluir el script del widget

2. Agregar el componente del widget

Ejemplo completo

Siguientes pasos