Compartilhar via

Personalizar seu copiloto

  • Artigo

Ao criar um copiloto para um site, o copiloto usa o conteúdo do site de hospedagem para criar respostas. O Microsoft Dataverse Indexa o conteúdo do site e as tabelas configuradas e o Copilot Studio resume o conteúdo indexado e as tabelas para criar respostas.

Os usuários de sites autenticados recebem respostas personalizadas e resumidas que são alinhadas com suas funções Web. A fim de melhorar o modelo de conteúdo para usuários de site autenticados, refine os dados seguindo estas etapas:

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

  2. Em Copilot, selecione Adicionar copiloto.

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

  4. Selecione Escolher controle de pesquisa as tabelas para selecionar ou desmarcar a seleção de tabelas.

    • Você pode selecionar várias tabelas nesta seção. Certifique-se de que cada tabela selecionada seja usada no site.
    • Nas páginas subsequentes, especifique a página onde a tabela será 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 a lista de colunas usadas na página. Somente colunas que têm texto multilinha 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 copiloto

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

  1. Vá para 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 de style

    Captura de tela do Visual Studio, destacando a pasta de modelos da Web, o arquivo de Header.html e o elemento de estilo com um seletor CSS.

  5. Substitua os estilos apropriados.

Widget do Copilot

Captura de tela do widget do chatbot.

Ícone recolhido do Copilot:

.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;
}

Elementos do Copilot

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.

Captura de tela de um chatbot com elementos individuais destacados e numerados.

1. Cabeçalho

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

2. Altura e largura

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

3. Janela do Copilot

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

4. Bolha do copiloto

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

.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. Mensagem 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;
}