Compartir a través de

Personalizar el agente

Cuando crea un agente para un sitio web, utiliza el contenido del sitio de alojamiento para generar respuestas. Microsoft Dataverse Indexa el contenido del sitio y las tablas configuradas. Copilot Studio resume el contenido y las tablas indexadas para generar respuestas.

Los usuarios autenticados del sitio obtienen respuestas personalizadas y resumidas alineadas con sus roles web. Mejore el modelo de contenido para los usuarios autenticados de la ubicación refinando los datos con estos pasos:

  1. En Power Pages, vaya a Configurar espacio de trabajo.

  2. En Copilot, seleccione Agregar agente.

  3. En Refinar sus datos, seleccione Realizar cambios.

  4. Seleccione Elegir control de búsqueda de tablas para elegir o borrar tablas.

    • Puede seleccionar varias tablas en esta sección. Asegúrese de que todas las tablas que elija se utilicen en el sitio.
    • En las páginas posteriores, especifique la página donde se utiliza la tabla para generar la URL de la cita.

  5. Seleccione Siguiente.

  6. En Elegir tablas, seleccione la tabla que contiene las columnas y el vínculo de la página que desea seleccionar. Una tabla solo aparece si tiene al menos una columna de varias líneas.

    Puede seleccionar una única tabla a la vez.

  7. En Agregar vínculo a la página, seleccione la página en la que se usa la tabla.

    Nota

    • Asegúrese de seleccionar la página correcta. De lo contrario, el bot proporciona una URL de cita incorrecta para las respuestas.
    • La página debe usar id como el parámetro de la cadena de consulta. Si utiliza cualquier otro nombre de parámetro, la URL de la cita no funciona correctamente.

  8. En Elegir columnas, seleccione las columnas utilizadas en la página. Solo las columnas con texto de varias líneas están disponibles para su selección.

  9. Seleccione Siguiente y revise su selección.

  10. Seleccione Guardar para enviar los cambios.

Personalizar la apariencia del agente

Puede personalizar el estilo del agente invalidando las clases predeterminadas de hoja de estilo en cascada (CSS). Para ello, agregue un componente style a la plantilla de encabezado y anule los valores siguiendo estos pasos:

  1. Abrir el editor de código del sitio.

  2. En la navegación del Explorador, expanda la carpeta web-templates.

  3. Abra Header.html.

  4. Agregue su componente style o script.

    Captura de pantalla de Visual Studio, resaltando la carpeta de plantillas web, el archivo Header.html, y el elemento estilo con un selector CSS.

  5. Anule los estilos apropiados.

Widget de agente

Captura de pantalla del widget de bot de chat

Icono del agente colapsado:

.pva-embedded-web-chat-widget {
    background-color: #484644;
    border: 1px solid #FFFFFF;
}

Información sobre herramientas:

.pva-embedded-web-chat-widget .pva-embedded-web-chat-widget-tooltip-text {
    background: white;
    color: #323130;
}

Icono de imagen:

<script>
document.addEventListener('DOMContentLoaded', function() {
   var buttons = document.getElementsByClassName("pva-embedded-web-chat-widget");
    buttons[0].innerHTML = '<img src="<image URL>" height= "70px" width = "70px" />';
}, false);
</script>

Nota

Reemplace <image URL> por la URL de origen de la imagen real. Use una ruta de acceso externa o cargue una imagen en la tabla Archivo web y use su dirección URL.

Elementos del agente

Los ejemplos de CSS de esta sección muestran cómo personalizar cada uno de los elementos numerados del bot de chat en la siguiente captura de pantalla.

Captura de pantalla de un bot de chat con elementos individuales destacados y numerados.

1. Encabezado

.pages-chatbot-header
{
    background: #77a145;
    color: #ffffff;
}

2. Configuración de ancho y alto

.pva-embedded-web-chat[data-minimized='false'] {
    height: 80%;
    width: 25%;
    max-width: 400px;
    max-height: 740px;
}

3. Ventana del agente

.pva-embedded-web-chat-window {
    background: white;
}

4. Burbuja de un agente

Color de fondo:

.webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
    background-color: #77a145 !important;
    border-radius: 5px !important;
}

Color de texto:

.webchat__bubble:not(.webchat__bubble--from-user) p {
    color: #ffffff;
}

5. Burbuja del usuario

Color de fondo:

.webchat__bubble.webchat__bubble--from-user .webchat__bubble__content {
    background-color: #797d81 !important;
    border-radius: 5px !important;
}

Color de texto:

.webchat__bubble.webchat__bubble--from-user p {
    color: #ffffff;
}

.webchat__link-definitions__badge {
    color: blue !important;
}

.webchat__link-definitions__list-item-text {
    color: blue !important;
}

.webchat__render-markdown__pure-identifier {
    color: blue !important;
}

7. Configuración de mensajes de privacidad

Color de fondo:

.pva-privacy-message {
    background: #797d81;
}

Color de texto:

.pva-privacy-message p {
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
}
  • Last updated on