> ## Documentation Index > Fetch the complete documentation index at: https://docs.fintoc.com/llms.txt > Use this file to discover all available pages before exploring further. # Integración Web (ANTIGUA) > Referencia para integrar el Widget en tu aplicación o página web ### Integración con HTML plano Para integrar el Widget, solo necesitas incluir el script de Fintoc en tu HTML. El script de Fintoc debe estar en cada página donde se necesite usar el Widget. ```html theme={null} ``` **window\.onload** Recuerda que, al importar un `script` de JavaScript, si intentas usar funciones antes de que el navegador cargue el `script`, se generará un error. Puedes resolver esto usando el evento nativo del navegador `window.onload`. ### Integración como módulo ES ¡También puedes usar el Widget como un módulo ES a través de `npm`! ¡Solo usa nuestra librería `@fintoc/fintoc-js`! ```shell theme={null} npm install @fintoc/fintoc-js ``` ¡La librería exporta un método *async* `getFintoc` que retorna el objeto `Fintoc`! ```javascript theme={null} import { getFintoc } from '@fintoc/fintoc-js'; // You can read more about the parameters below const options = { ... }; const main = async () => { const Fintoc = await getFintoc(); const widget = Fintoc.create(options); widget.open(); } main(); ``` ## Cómo funciona Al incluir el `script` de Fintoc en tu aplicación (o después de usar el método `getFintoc` de la librería `@fintoc/fintoc-js`), tendrás acceso a la clase `Fintoc`, que te permitirá crear conexiones con una institución financiera desde dentro de tu aplicación. ```javascript Javascript theme={null} const widget = Fintoc.create({ holderType, product, publicKey, webhookUrl, country, institutionId, username, widgetToken, onSuccess, onExit, onEvent, }) ``` Nota: recuerda llamar al método `.open()` para abrir el widget. | Parámetro | Tipo | Descripción | | ------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | publicKey | string | El `publicKey` se usa para identificar tu aplicación o página web dentro de Fintoc. Los Links creados con un `publicKey` se asignarán a la organización o usuario propietario de dicho `publicKey`.
Este token determinará si estás usando el entorno de sandbox o de producción. Recuerda que el `publicKey` del sandbox comienza con `pk_test_`, mientras que el de producción comienza con `pk_live_`. | | holderType | string | El parámetro `holderType` puede ser `business` o `individual`, y determina el tipo de cuenta que se conectará a Fintoc. **Para el producto de payment initiation siempre debes usar `individual` como holder\_type.** | | product | string | El parámetro `product` puede ser `movements`, `subscriptions`, `invoices` o `payments`, y determina el producto y el tipo de **Link** que se creará. | | country | string | El parámetro `country` debe ser el código `ISO 3166-1 alfa-2` del país al que estás intentando conectarte. Puede ser `cl` o `mx`. Por defecto es `cl`. | | institutionId | string | \* \*Opcional\*\*. El parámetro `institutionId` corresponde al `id` de [una institución financiera](/es/docs/payments/overview-payment-initiation/payment-initiation-countries-and-institutions). Si se incluye, dicha institución se preseleccionará. Por ejemplo, el valor `cl_banco_estado` haría que el widget se abra con Banco Estado por defecto. Antes de preseleccionar una institución, verifica su disponibilidad usando el [endpoint de listar instituciones](/es/reference/main-resources/institutions/institutions-list) | | username | string u objeto | \* \*Opcional\*\*. El `username` rellena previamente el campo de nombre de usuario al realizar un pago.

Los atributos del objeto username [se muestran abajo](/es/docs/resources/widget/widget-web-integration#username-object). Si se envía un string, tomará el valor por defecto para el atributo editable. | | webhookUrl | string | \* \*Solo se usa para los productos `movements` e `invoices`\*\*; si estás integrando `payments` o `subscriptions` no lo necesitas.

El parámetro `webhookUrl` corresponde a la URL que recibirá una solicitud con el nuevo **Link** después de su creación exitosa, incluyendo su **link\_token**. | | widgetToken | string | El parámetro `widgetToken` corresponde al token creado por el backend que inicializa y configura el widget.

Actualmente, solo los productos `payments` y `subscriptions` usan un parámetro `widgetToken`. | | onSuccess | function | El parámetro `onSuccess` corresponde a un callback que será llamado después de que el flujo finalice exitosamente. | | onExit | function | El parámetro `onExit` corresponde a un callback que será llamado después de que un usuario cierre el Widget prematuramente. | | onEvent | function | El parámetro `onEvent` corresponde a un callback que será llamado cada vez que un usuario ejecute una acción significativa en el Widget. | **Usa los callbacks y eventos del Widget correctamente** **Nunca** uses los callbacks `onSuccess`, `onExit` o `onEvent` para obtener el estado del recurso que se está creando. Deberías usar estos callbacks **solo** para manejar el flujo de tu aplicación frontend, **mientras esperas la confirmación del backend**, ya sea vía Webhooks o intercambiando algún exchange token. Los eventos del frontend también pueden usarse para generar métricas sobre el uso general del widget, pero **nunca** debes confiar únicamente en ellos para asumir que un recurso fue creado o falló en crearse. ### Objeto Username Para rellenar previamente un nombre de usuario y cambiar los valores por defecto, puedes enviar un objeto con los siguientes atributos ```Text JSON theme={null} username = { value: "123456789", editable: true } ``` **Usar la opción de pre-llenado aumenta la conversión de pagos** Nuestras pruebas han demostrado que usar el pre-llenado puede aumentar la conversión en alrededor de un 3% | Atributo | Tipo | Descripción | | :------- | :----- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | | value | string | El nombre de usuario que se rellenará previamente en el widget. En Chile debes ingresar el RUT del usuario y en México debes ingresar su número de teléfono. | | editable | bool | Si el campo es editable o no en el widget. Por defecto está configurado como `true`. | ## Métodos del objeto Widget Una vez que se crea un objeto `widget`, puedes usar sus métodos para interactuar con él. Los métodos disponibles son `open`, `close` y `destroy`. | Método | Descripción | | :--------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | widget.open() | El método `open` abre el Widget cuando es llamado. | | widget.close() | El método `close` cierra el widget cuando es llamado. **No destruye la instancia del widget**, solo lo oculta del usuario. Puedes llamar al método `open` después del método `close` y el widget se mostrará nuevamente. | | widget.destroy() | El método `destroy` remueve la instancia del Widget de tu aplicación. Si quieres reabrir el widget después de llamar al método `destroy`, deberás crear otra instancia del Widget usando `Fintoc.create()`. | **Cómo usar el método `widget.destroy()`** Al usar `Fintoc.create(args)`, se embebe un `iframe` dentro de tu aplicación. A veces (principalmente al desarrollar una SPA), puedes necesitar remover este `iframe`. Esto se puede hacer usando el método `destroy`. Si luego necesitas reabrir el widget, deberás crear una nueva instancia usando el método `Fintoc.create(args)` una vez más.