Cómo agregar un portafolio NFT a su sitio web o aplicación (2026)

Una cartera NFT permite a los usuarios ver NFTs propiedad de una dirección de billetera directamente dentro de su producto. Esto se usa comúnmente para perfiles de usuario, paneles, acceso privado y páginas comunitarias.

En esta guía, cubrimos dos formas admitidas de agregar una cartera NFT usando Gizmolab interfaz de usuario:

1. Agregue el portafolio NFT con código usando el componente UI Gizmolab
2. Incruste el portafolio NFT como un widget sin código personalizado

Ambas opciones utilizan el mismo Gizmolab UI NFT Portafolio, para que puedas elegir según el nivel de control que necesites.

Qué incluye una cartera NFT

el Gizmolab UI NFT Portafolio El componente proporciona la siguiente funcionalidad de forma predeterminada:

• Ver NFTs propiedad de una dirección de billetera
• Soporte para billeteras conectadas e ingreso manual de direcciones
• Cuadrícula NFT paginada con un tamaño de página fijo de 12
• Carga de esqueletos, estado vacío y manejo de errores
• Imagen alternativa para NFTs con metadatos faltantes

Este comportamiento es idéntico ya sea que instale el componente con código o lo incruste como un widget.

Opción 1: Agregar una cartera NFT con código

Esta opción está destinada a equipos que crean aplicaciones Web3 personalizadas utilizando React o Next.js.

Cuándo utilizar esta opción

• Estás creando un producto o panel completo Web3
• Quieres un control total sobre el diseño y el estilo
• Planea ampliar la cartera NFT con lógica personalizada

Pila de tecnología utilizada

El portafolio Gizmolab UI NFT se construye utilizando:

• Dynamic para conectividad de billetera
• wagmi useCuenta() para el estado de la billetera
• Alquimia SDK para recuperar NFTs por propietario
• Consulta de reacción de TanStack para almacenamiento en caché y paginación
• viem para validación de direcciones y formato de suma de verificación
• shadcn/ui componentes para bloques de construcción de UI

Toda esta lógica ya está conectada dentro del componente UI Gizmolab.

Paso 1: instalar dependencias

Instale las dependencias requeridas para la versión EVM.

npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector wagmi viem @tanstack/react-query alchemy-sdk

Paso 2: agregue los componentes de interfaz de usuario necesarios

Instale los componentes de la interfaz de usuario de shadcn utilizados por el portafolio.

npx shadcn@latest agregar botón esqueleto de entrada de tarjeta

Paso 3: agregar variables de entorno

Crear un .env archivo y agregue su clave Alchemy API.

ALCHEMY_API_KEY=your_mainnet_key

Paso 4: renderizar el componente de cartera NFT

Importe y renderice el portafolio NFT desde Gizmolab interfaz de usuario.

Una vez renderizado, el componente admite automáticamente:

• Modo billetera conectada
• búsqueda de direcciones públicas
• NFT paginación usando Alchemy pageKey
• Estados de carga, vacío y error

No se requiere lógica de recuperación de datos adicional.

Comportamiento de UX incluido de forma predeterminada

El componente ya maneja casos extremos de producción:

• Las direcciones de billetera no válidas se rechazan antes de recuperarlas
• NFTs sin imágenes usa un marcador de posición
• La paginación está limitada a 12 NFTs por página.
• Los usuarios pueden cambiar entre el modo billetera y dirección

Opción 2: agregar una cartera NFT como widget para insertar

Esta opción está diseñada para equipos que desean agregar un portafolio NFT sin escribir código de aplicación.

Cuándo utilizar esta opción

• Está utilizando un CMS, Webflow, Framer o un sitio estático
• Quieres lanzar rápidamente
• No necesitas una personalización profunda de la interfaz de usuario

Cómo funciona el widget para insertar

Gizmolab La interfaz de usuario proporciona un widget de cartera NFT alojado que se puede incrustar mediante un iframe.

El widget integrado incluye:

• Conexión de billetera
• Entrada manual de dirección
• NFT paginación
• La misma interfaz de usuario y lógica que el componente basado en código

Ejemplo de fragmento para insertar

<iframe
  src="https://ui.gizmolab.io/embed/nft-portfolio"
  width="100%"
  height="720"
  loading="lazy"
></iframe>

Puedes incrustar este widget dentro:

• páginas de marketing
• Páginas de perfil
• Portales comunitarios
• Paneles de administración
• Sitios de documentación

Opciones de configuración de widgets

Dependiendo de su configuración, la inserción puede admitir:

• Dirección de billetera predeterminada
• Modo de solo lectura
• Restricciones de altura y diseño
• Alineación del tema

Esto permite que los equipos no técnicos envíen una cartera NFT sin participación de ingeniería.

Código versus inserción: ¿cuál debería elegir?

Puede comenzar con el widget de inserción y migrar al componente basado en código más adelante sin cambiar la experiencia del usuario.

Notas de SEO

Si la visibilidad de la búsqueda es importante:

• Utilice el opción basada en código para páginas indexables como /portfolio/[address]
• Agregue contenido descriptivo encima del portafolio
• Incluya contenido de preguntas frecuentes debajo del componente
• Utilice incrustaciones principalmente para marketing o vistas autenticadas.

Preguntas frecuentes

Conclusión

hay dos formas compatibles para agregar una cartera NFT usando la interfaz de usuario Gizmolab:

• Instale el componente Portafolio NFT con código para un control total
• Incorpore el widget de cartera NFT para una implementación instantánea

Ambas opciones utilizan la misma implementación de nivel de producción.

Si necesita una configuración personalizada, soporte para múltiples cadenas o un producto Web3 completamente integrado, Gizmolab puede construirlo para ti.