Integre Aura Home en el sitio de un cliente

Este tutorial recorre una integración de marca blanca sencilla, en la que el sitio web del cliente mantiene el control del diseño mientras Aura Home gestiona el runtime del asistente.

1. Prepare el espacio en la página

Cree un contenedor estable donde debe aparecer el asistente.

<section class="assistant-panel">
  <div id="aura-home"></div>
</section>

2. Inicialice una integración transparente

Comience solo con el chat y el perfil. Así, la página del cliente mantiene el control de la navegación, el pie de página, los precios y las secciones legales.

const aura = AuraHome.init({
  container: "#aura-home",
  baseUrl: "https://your-aura-home-runtime.example/",
  sections: {
    chat: true,
    profile: true,
    navbar: false,
    footer: false,
    exploreTools: false,
    onboarding: false,
    pricing: false,
    legalPages: false
  }
});

3. Aplique el estilo de marca

Solicite al runtime un tema aprobado y use variables CSS para realizar cambios seguros a nivel de marca. Use una hoja de estilo alojada solo cuando se requieran ajustes más amplios.

aura.updateConfig({
  theme: {
    id: "cadisa",
    mode: "dark",
    cssVariables: {
      "--color-brand-primary": "#2F6FED",
      "--color-brand-primary-hover": "#1F56C6",
      "--color-brand-accent": "#8AB4F8",
      "--aura-chat-header-background": "#0b1f4d",
      "--aura-chat-title-font-family": "'Montserrat', system-ui, sans-serif",
      "--aura-card-accent": "#2F6FED",
      "--aura-card-action-background": "#2F6FED",
      "--aura-card-focus-ring": "#8AB4F8"
    }
  }
});

4. Conecte la identidad empresarial

Use un callback para que los tokens se soliciten solo cuando sea necesario y nunca se incluyan en cadenas de consulta.

AuraHome.init({
  container: "#aura-home",
  baseUrl: "https://your-aura-home-runtime.example/",
  auth: {
    mode: "oidc",
    getToken: async () => customerIdentity.getIdToken()
  }
});

5. Coordine el ciclo de vida

Espere el evento de disponibilidad antes de quitar los estados de carga del sitio anfitrión, e inspeccione los metadatos de apariencia resueltos cuando el equipo de soporte necesite confirmar la revisión de tema activa.

const unsubscribe = aura.on("ready", () => {
  document.body.classList.add("aura-home-ready");
});

const unsubscribeAppearance = aura.on("appearanceResolved", (event) => {
  console.log(event.payload?.themeRevision);
});

// Later, when the host no longer needs the embed:
unsubscribe();
unsubscribeAppearance();
aura.destroy();

6. Lista de verificación del lanzamiento

Verifique que la URL del runtime se abra en una pestaña del navegador.
Confirme que la configuración del runtime permita el origen del cliente.
Confirme que el theme.id solicitado esté permitido o publique el perfil visual en el Appearance Editor del panel.
Confirme que appearanceResolved informe el estado esperado de las tarjetas de resultados y el themeRevision.
Confirme que el callback de token devuelva un token OIDC/JWT válido cuando la autenticación empresarial esté habilitada.
Pruebe la altura del contenedor en computadoras de escritorio y dispositivos móviles.
Confirme que no aparezcan secretos en las URL, las variables CSS, los atributos HTML ni los registros.