​
Integración del Widget de Onboarding de Empresas

Esta guía te ayudará a integrar el Widget de Onboarding de Empresas de Trébol en tu sitio web o aplicación, facilitando a tus clientes la carga de documentos y optimizando el proceso de verificación.

​
¿Qué es el Widget?

El Widget de Onboarding de Empresas es un componente web interactivo diseñado para integrarse fácilmente en tu plataforma. Permite a tus clientes cargar documentos directamente al sistema de Trébol, agilizando el proceso de verificación y asegurando una experiencia de usuario fluida y segura. Características principales:
  • Integración sencilla: Se puede añadir con pocas líneas de código.
  • Personalización: Ajusta parámetros según las necesidades de tu flujo de onboarding.
  • Seguridad: Maneja la carga de documentos de manera segura y conforme a estándares.

​
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.
  • Definido el flujo de onboarding adecuado (por ejemplo, mx_persona_moral).

​
Pasos para Integrar el Widget

​
1. Incluir el Script del Widget

Debes añadir el script del widget en la página o pantalla donde deseas que aparezca el botón de carga de documentos. Este script es fundamental para el funcionamiento del widget. Instrucción: Añade el siguiente fragmento de código 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. Instrucción: Añade el siguiente código HTML en la ubicación deseada dentro de tu estructura de página. 
<!-- Componente del Widget de Onboarding de Trébol -->
<trebol-widget
  flowid="mx_persona_moral"
  client="tu-accountid"
  redirecturl="https://tupaginaweb.com/state=tustate"
  tag="etiqueta-para-verificacion">
</trebol-widget>
Descripción de los Atributos:
  • flowid: Define el tipo de flujo de onboarding. Ejemplo:
    • mx_persona_moral: Flujo para personas morales en México.
    • Ajusta según el flujo configurado en tu cuenta de Trébol.
  • client: Tu identificador único (UUID) asignado por 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 y verificar el proceso de carga de documentos. Útil para análisis y seguimiento.

​
Configuración de Parámetros

segúrate de reemplazar los valores de los atributos con la información específica de tu empresa:
  • flowid: Verifica que el flujo seleccionado coincide con el configurado en tu cuenta de Trébol.
  • client: Obtén tu UUID desde el panel de control de Trébol.
  • redirecturl: Define una página de confirmación o estado que maneje la respuesta post-carga.
  • tag: Utiliza etiquetas que faciliten la identificación del proceso, por ejemplo, “registro-inicial” o “actualización-datos”.

​
Ejemplo Completo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Onboarding de Empresa</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 de Tu Empresa</h1>
   <p>Por favor, carga los documentos necesarios para completar tu registro.</p>
   
   <!-- Componente del Widget de Onboarding de Trébol -->
   <trebol-widget
      flowid="mx_persona_moral"
      client="123e4567-e89b-12d3-a456-426614174000"
      redirecturl="https://tusitio.com/confirmacion"
      tag="registro-inicial">
   </trebol-widget>
   
   </body>
</html>
Explicación del Ejemplo:
  • Script: Se incluye en el head con el atributo defer para optimizar la carga.
  • Widget: Se coloca dentro del body, donde se desea que aparezca el botón de carga.
  • Parámetros: Todos los atributos están rellenados con ejemplos reales que deben ser reemplazados por los valores correspondientes a tu empresa.