Crea una página web de eventos con tu marca en 20 minutos con Power Pages y Dynamics 365 Customer Insights – Journeys
Hace algunos años, era responsable de dos sitios de Power Pages (en aquel momento llamados Dynamics Portals) conectados a Dynamics 365 Customer Insights – Journeys (antes conocido como Dynamics 365 Marketing). En aquel entonces, adaptar y personalizar un portal de eventos era todo un desafío. Requería mucho tiempo y esfuerzo para conseguir algo que se viera bien y mantuviera la identidad de marca.
Hoy, después de varios cambios de nombre y muchas actualizaciones, Microsoft ha llevado estas herramientas a un punto en el que pude configurar un portal, personalizarlo y conectarlo con mi entorno de Dynamics 365 Customer Insights – Journeys en solo 20 minutos.
¿Lo mejor? Tras algunos experimentos, descubrí que puedes hacerlo casi todo simplemente copiando y pegando un fragmento de código — sin conocimientos de programación.
Por eso decidí crear esta guía para que tú también puedas configurar tu página de eventos personalizada sin necesidad de saber código. 😊
Me he basado en la guía oficial de Microsoft:
Crear un portal de registro de eventos con Power Pages
…pero tuve que pelear un poco con la herramienta para entender cuál era la forma más rápida y práctica de hacerlo. Este artículo es el resultado de ese proceso.
TL;DR
- Usa la plantilla de portal de eventos de Power Pages.
- Personaliza el encabezado, fondo y pie de página con tu logo e imágenes.
- Sustituye la lógica de registro predeterminada por el fragmento de formulario incrustado desde Customer Insights – Journeys.
- En CIJ, agrega tu dominio y el sitio de Power Pages en la configuración de Gestión de eventos.
- Crea un evento, publícalo y listo: tu página de eventos personalizada estará en línea 🚀
¿Qué necesitarás?
Si quieres hacerlo en tiempo récord, conviene prepararte con antelación. Te recomiendo tener listo lo siguiente a mano:
- El logotipo de tu empresa (mejor si tiene fondo transparente, formato PNG)
- Una imagen de portada que refleje la identidad visual de tu marca
- El nombre de tu empresa y un texto de encabezado
- Una licencia de Power Apps / Power Pages (puedes empezar con una prueba gratuita)
- Un Omega Speedmaster o un Rolex Daytona para medir el tiempo (opcional… el reloj de tu PC también sirve 😁)
⚠️ Importante: Esta guía es válida y funcional en la fecha de publicación.
Cómo construirlo
Dividiremos el proceso en dos partes:
- Configuración de Power Pages
- Configuración de Dynamics 365 Customer Insights – Journeys
1. Configurar Power Pages
Crear el sitio
Empieza en Power Pages Get Started.
- Selecciona el entorno correcto en la esquina superior derecha.
- Elige Comenzar con una plantilla.
- Escoge la plantilla de portal de eventos.
- Asigna un nombre y un idioma.
- Haz clic en Listo en la esquina inferior derecha.
Puedes cambiar la dirección web más adelante para usar tu propio dominio si lo deseas (en otro artículo explicaré cómo hacerlo).
Sustituir encabezado, fondo y logotipo
Al principio el sitio puede verse algo básico:
Haz un Ctrl + F5 para refrescar y debería verse así:
Haz clic en Editar fondo para subir una imagen de portada.
Para editar el texto principal, haz clic directamente sobre el título:
En el pie de página, haz clic sobre el logo de Contoso y sustitúyelo por el tuyo:
Si el logo se ve demasiado grande, ajusta su ancho: el diseño se adapta automáticamente.
Para cambiar el logo del encabezado y el nombre del sitio, recomiendo usar Editar código (actualmente es más fiable que hacerlo desde el diseñador).
En Visual Studio Code abre la carpeta content snippets, donde encontrarás:
- Logo URL (2)
- Site name (3)
Actualiza la ruta del logo y el nombre del sitio. Guarda (Ctrl+S) y recarga.
Ahora tu portal ya tiene la marca de tu empresa.
Adaptar la página de registro
Actualmente, la página de registro del portal no muestra correctamente los formularios publicados desde Customer Insights – Journeys. Pero si reemplazamos su lógica con el código de incrustación del formulario, funcionará perfectamente.
Primero, obtén tu ID de organización desde la configuración de Power Pages.
Después, abre Editar código y luego Visual Studio Code.
Abre la carpeta web pages → Register to Event y sustituye el contenido HTML por el siguiente código (reemplazando ORGANIZATIONID por tu ID real):
💡 Nota: La parte
chede las URL que aparecen a continuación depende de su región. Utiliza las URL del fragmento de código de inserción del formulario generado en su propio entorno si difieren. Para obtener más información sobre su región: Regiones de centros de datos de Microsoft Power Platform.
{% assign readableEventId = request.params["readableEventId"] | escape %}
{% fetchxml eventDetail %}
<fetch>
<entity name="msevtmgt_event">
<attribute name="msevtmgt_readableeventid" />
<attribute name="msevtmgt_marketingformid" />
<attribute name="msevtmgt_name" />
<filter>
<condition attribute="msevtmgt_readableeventid" operator="eq" value="{{readableEventId}}"></condition>
</filter>
</entity>
</fetch>
{% endfetchxml %}
{% assign record = eventDetail.results.entities.first %}
<div class="row sectionBlockLayout text-start" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
<div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
<div class="col-lg-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 250px;">
<div
data-form-id='{{record.msevtmgt_marketingformid.id}}'
data-form-api-url='https://public-che.mkt.dynamics.com/api/v1.0/orgs/ORGANIZATIONID/eventmanagement'
data-cached-form-url='https://assets-che.mkt.dynamics.com/ORGANIZATIONID/digitalassets/forms/{{record.msevtmgt_marketingformid.id}}'
data-readable-event-id='{{readableEventId}}'>
</div>
<script src='https://cxppusa1formui01cdnsa01-endpoint.azureedge.net/che/FormLoader/FormLoader.bundle.js'></script>
</div>
</div>
</div>
Guarda los cambios y recarga el sitio.
Ahora la página mostrará correctamente el formulario incrustado desde Customer Insights – Journeys.
Personalizar las tarjetas de eventos
Desde el diseñador de Power Pages, puedes personalizar las tarjetas de la página principal:
- Cambiar el diseño
- Mostrar otros campos del evento
- Filtrar solo eventos próximos
Hacer el portal público
Cuando el portal esté listo:
- Haz clic en el título del sitio.
- Selecciona Administrar visibilidad del sitio.
- Marca la opción Público y confirma.
Así tu audiencia podrá acceder y registrarse en tus eventos.
2. Configurar el portal en Dynamics 365 Customer Insights – Journeys
Añadir el dominio
- En Configuración → Dominios, crea un nuevo registro.
- Añade la URL de tu sitio de Power Pages.
- Marca la opción Validación de formularios externos.
No hace falta tocar el DNS.
Haz clic en Siguiente → Verificar → Listo.
Agregar el sitio web de Power Pages
- En Configuración → Gestión de eventos → Sitios de Power Pages, añade tu portal.
- En URL de página de registro, indica la ruta
/Register-to-Event.
Crear y publicar el evento
Crea un nuevo evento y selecciona Portal de eventos con Power Pages como método de registro.
Publica y obtendrás una URL de registro en tu nuevo portal.
Conclusión
Ahora tendrás:
- Un portal con tu marca
- Que muestra los eventos publicados en Dynamics 365 Customer Insights – Journeys
- Y permite registrarse directamente desde el portal
Yo mismo medí mi tiempo al configurarlo: 15 minutos y 14 segundos ⏱️
¿Podrás batirlo? 😄
👉 Envíame tu tiempo o tus dudas y/o etiquétame en LinkedIn.
Hagamos que esta sea la implementación más rápida de un producto Microsoft. 🚀