Personalizar seu agente

Quando você cria um agente para um site, ele usa o conteúdo do site de hospedagem para gerar respostas. O Microsoft Dataverse indexa o conteúdo do site e as tabelas configuradas. O Copilot Studio resume o conteúdo indexado e as tabelas para gerar respostas.

Os usuários de sites autenticados obtêm respostas personalizadas e resumidas alinhadas com suas funções da Web. Melhore o modelo de conteúdo para usuários de sites autenticados refinando os dados com estas etapas:

1. No Power Pages, acesse Configurar espaço de trabalho.

2. Em Copilot, selecione Adicionar agente.

3. Em Refinar seus dados, selecione Fazer alterações.

4. Selecione Escolher controle de pesquisa das tabelas para escolher ou limpar tabelas.

   • Você pode selecionar várias tabelas nesta seção. Certifique-se de que cada tabela escolhida seja usada no local.
   • Nas páginas subsequentes, especifique a página onde a tabela é utilizada para gerar o URL de citação.

5. Selecione Avançar.

6. Em Escolher tabelas, selecione a tabela que contém as colunas e o link da página que você deseja selecionar. Uma tabela será exibida somente se tiver pelo menos uma coluna multilinha.

   Você pode selecionar somente uma tabela de cada vez.

7. Em Adicionar link da página, selecione a página na qual a tabela é usada.

   Observação

   • Certifique-se de selecionar a página correta. Caso contrário, o bot fornecerá uma URL de citação incorreta para as respostas.
   • A página deve ser usada id como parâmetro da cadeia de consulta. Se você usar qualquer outro nome de parâmetro, a URL de citação não funcionará corretamente.

8. Em Escolher colunas, selecione as colunas usadas na página. Somente colunas com texto de várias linhas estão disponíveis para seleção.

9. Selecione Próximo e revise sua seleção.

10. Selecione Salvar para enviar as alterações.

Personalizar a aparência do agente

Você pode personalizar o estilo do agente substituindo as classes padrão de Folha de Estilos em Cascata (CSS). Para fazer isso, adicione um style elemento ao modelo de cabeçalho e substitua os valores seguindo estas etapas:

1. Abra o editor de código do site.

2. Na navegação do Explorer, expanda a pasta de modelos da Web.

3. Abra Header.html.

4. Adicione seu elemento style ou script.

   

5. Substitua os estilos apropriados.

Widget do agente

Ícone recolhido do agente:

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

Dica de ferramenta:

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

Imagem do ícone:

<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>

Elementos do agente

As amostras de CSS nesta seção fornecem exemplos que mostram como personalizar cada um dos elementos numerados do chatbot na captura de tela a seguir.

1. Cabeçalho

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

2. Configurações de altura e largura

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

3. Janela do agente

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

4. Bolha de um agente

Cor em segundo plano:

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

Cor do texto:

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

5. Bolha do usuário

Cor em segundo plano:

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

Cor do texto:

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

6. Links de referência

.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. Configurações de mensagens de privacidade

Cor em segundo plano:

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

Cor do texto:

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

Informações relacionadas

• Visão geral dos recursos da plataforma AI e do Copilot no Power Pages
• Gerar respostas de dados públicos usando a Pesquisa do Bing
• IA responsável: perguntas frequentes para agente do local