AX - Tarjeta de perfil

Resumen

AX - Tarjeta de perfil es un componente de Experience Cloud que muestra información de usuario o contacto en un formato de tarjeta con estilo, con fotos de perfil, nombres, detalles e imágenes de fondo opcionales en páginas de Experience Sites.

Úsalo para mostrar miembros del equipo, contactos de clientes, representantes de socios o colaboradores de la comunidad con un formato visual coherente. Configura qué campos aparecen, añade imágenes de perfil, personaliza el estilo e incluye botones de acción en Experience Builder.

Perfecto para directorios de equipos, listas de contactos, perfiles de miembros de la comunidad, secciones de «Conoce a tu representante» o cualquier lugar donde tu portal necesite mostrar perfiles profesionales.

Este componente aprovecha slots para una personalización avanzada, lo que lo hace ideal para sitios LWR. Los sitios Aura no admiten este nivel de personalización.

---

Primeros pasos

Usa este sencillo tutorial para aprender los fundamentos del componente Profile Card y empezar a construir tus casos de uso.

---

Tutoriales

Nombre	Descripción
Configurando la tarjeta de perfil para mostrar la información del usuario actual	Configura una tarjeta Avonni para mostrar la información del usuario en Experience Cloud, mejorando la personalización.

---

Ranuras

El componente Avonni Profile Card ofrece una forma flexible y dinámica de presentar una amplia gama de información mediante ranuras. Estas ranuras son áreas designadas dentro del componente donde se pueden insertar otros componentes, lo que permite una amplia personalización y funcionalidad.

Tipos de ranuras

1. Ranura de contenido:

   • El área principal para información detallada.
   • Ideal para añadir elementos variados como texto, listas, imágenes o componentes personalizados.
   • Se puede usar para mostrar datos completos o elementos interactivos.
2. Ranura de encabezado:

   • Dedicada a títulos, encabezados o contenido introductorio.
   • Adecuada para etiquetas de texto, avatares, iconos o cualquier componente que proporcione contexto.
   • Mejora la comprensión inmediata del propósito de la Profile Card.
3. Ranura de acciones:

   • Reservada para elementos interactivos como botones o hipervínculos.
   • Facilita la interacción del usuario, ofreciendo acciones como edición de perfiles y navegación.
   • Aumenta la interactividad de la tarjeta y la participación del usuario.

---

Configuración

🎛️ Propiedades

Nombre	Descripción	Uso
Título y estilo del texto del título	Define el título y su apariencia eligiendo entre una variedad de estilos de texto como H1, H2, H3, H4, P1 y P2.	Utiliza esto para darle a tu tarjeta de perfil un encabezado destacado y con estilo que llame la atención.
Subtítulo y estilo del texto del subtítulo	Añade un subtítulo y personaliza su apariencia, permitiendo información contextual adicional con opciones de estilo.	Usa los subtítulos para proporcionar información adicional, como un puesto o departamento, mejorando la exhaustividad de la tarjeta de perfil.
Fondo del CMS o URL del fondo	Personaliza el fondo eligiendo una imagen del CMS o proporcionando una URL, lo que permite un fondo visualmente enriquecido.	Una imagen de fondo bien elegida puede aportar profundidad y contexto al perfil, mejorando su atractivo visual.
Imagen de avatar del CMS o URL de la imagen de avatar	Define el avatar seleccionando una imagen del CMS o usando una URL, lo que permite un toque personal en la representación del perfil.	Los avatares aportan un toque personal, haciendo que el perfil sea más atractivo y cercano.
Variante y tamaño del avatar	Personaliza la forma y el tamaño del avatar, eligiendo entre variantes como círculo o cuadrado y tamaños que van de x-small a x-large.	Adapta la apariencia del avatar al estilo general de diseño de la tarjeta de perfil, garantizando coherencia visual y atractivo.
Posición del avatar	Coloca el avatar en la tarjeta, eligiendo ubicaciones como arriba a la izquierda, arriba al centro o abajo a la derecha, entre otras.	Ajusta la posición del avatar para lograr un diseño equilibrado y armonioso dentro de la tarjeta de perfil.

🎨 Estilo

---

Ejemplos de casos de uso

Ejemplo 1: Panel destacado de cuenta (contenedor)

Transforma tu sitio de experiencia para socios con una tarjeta de perfil de cuenta pulida y rica en información que coloca los detalles clave de la cuenta, la marca y las acciones en primer plano.

---

Lo que lograrás

• Encabezado de marca: Muestra el nombre y el sector de la cuenta con el logotipo de la empresa para un reconocimiento visual instantáneo
• Acciones contextuales: Inicia un flujo de Nueva oportunidad directamente desde la tarjeta con un solo clic
• Detalle de registro compacto: Muestra los campos de cuenta más relevantes sin saturar la página

---

Antes de empezar

• Campo de logotipo personalizado: Un campo personalizado en el objeto Cuenta para almacenar la URL del logotipo de la empresa
• Flujo de pantalla: Un flujo de pantalla de Nueva oportunidad, listo para iniciarse
• Componente Button: Disponible en tu biblioteca de componentes
• Componente Record Detail: Disponible en tu biblioteca de componentes

---

Cómo configurarlo

1

Añade la Profile Card a tu página

• Arrastra el componente AX – Profile Card a la página de registro de Cuenta de Experience

2

Configura el encabezado de la tarjeta

• Establece el encabezado en {!Item.Name}
• Establece el estilo en Encabezado 2
• Establece el subtítulo en {!Item.Industry}

3

Añade el logotipo de la empresa

• Establece la URL de la imagen de avatar en {!Item.LogoURL__c}
• Establece la variante en Círculo
• Establece el tamaño en Mediano

4

Añade un botón de acción personalizado

• Arrastra el componente Button a la ranura de acciones

5

Añade un diseño compacto de registro

• Arrastra el componente Record Detail a la ranura de contenido

6

Previsualiza tu página

• Revisa la tarjeta en modo de vista previa para confirmar que el diseño, el logotipo y el botón de acción aparecen como se espera

---

Enlaces

AX - Detalle del registroAX - Botón

---

Ejemplo 2: Información del perfil del usuario actual

Ofrece a tus usuarios una bienvenida cálida y personalizada en el momento en que llegan a tu sitio de experiencia, creando conexión y fomentando la adopción de la plataforma desde la primera visita.

---

Lo que lograrás

• Saludo personalizado: Dirígete a cada usuario por su nombre con un mensaje de bienvenida dinámico que resulte humano, no genérico
• Contexto del rol: Muestra el cargo del usuario debajo de su nombre para que compañeros y clientes puedan entender de inmediato con quién interactúan
• Foto de perfil: Recupera automáticamente la foto de perfil del usuario para lograr una sensación pulida y familiar

---

Cómo configurarlo

1

Añade la Profile Card a tu página

• Arrastra el componente AX – Profile Card a la página del sitio de Experience

2

Configura el encabezado de la tarjeta

• Establece el encabezado en Bienvenido, {!User.Record.Name}
• Establece el estilo en Encabezado 2
• Establece el subtítulo en {!User.Record.Title}

3

Configura la imagen de perfil

• Establece la URL de la imagen de avatar en {!User.Record.SmallPhotoUrl}
• Establece la posición del avatar en Centro superior

4

Previsualiza tu página

---

Enlaces

AX - AvatarAX - Sección de acordeón