---
sourceDocument: Criar ou modificar aplicações do Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development

 Release :

    - xanadu

ft:locale :

    - pt-BR

ft:publication_title :

    - Criar ou modificar aplicações do Xanadu

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

# Desenvolver um componente para Virtual Agent

# Desenvolver um componente para Virtual Agent {#ariaid-title1}

* Versão de lançamento: Xanadu
* 
* Atualizado 1 de ago. de 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 min. de leitura

Crie um componente Virtual Agent personalizado para coletar informações de entrada ou exibir na interface do cliente Virtual Agent.

## Tipos de Virtual Agent componentes {#va-components__section_xk5_rfd_lmb}

Para desenvolver um componente para Virtual Agent, adicione propriedades e ações específicas para interagir com a interface do cliente Virtual Agent. As propriedades necessárias dependem do tipo de componente que você está criando.  

Componente de resposta

:   Um componente de resposta fornece apenas informações ao usuário e não coleta entrada ou lida com a interação do usuário. Por exemplo, um controle de cartão que não requer entrada do usuário e está na conversa apenas uma vez.

    Adicione uma propriedade ao seu componente de resposta para lidar com os dados enviados pelo servidor Virtual Agent.  
    {#va-components__table_dql_lqd_lmb__entry__2}

    | Propriedade | Descrição |
    |-|-|
    | dadosdecontrole | Dados iniciais que o servidor Virtual Agent envia para o seu componente conforme o tópico é executado. Tipo de dados: objeto JSON |
    [Tabela 1. Propriedades do componente de saída]

    {#va-components__table_dql_lqd_lmb}

Componente de entrada

:   Um componente de entrada exibe informações e/ou coleta entradas do usuário. Ele inclui a mesma propriedade que o componente de saída para lidar com os dados enviados pelo servidor, mas tem mais estados possíveis e requer interação do usuário.

    {#va-components__table_k3t_nqd_lmb__entry__2}

    | Propriedade | Descrição |
    |-|-|
    | dadosdecontrole | Dados iniciais que o servidor Virtual Agent envia para o seu componente conforme o tópico é executado. Tipo de dados: objeto JSON |
    | responseValue | Dados enviados para o componente a partir da resposta do usuário, diretamente do cliente ou do servidor, se houver uma atualização. Use somente em componentes que exigem entrada do usuário. Tipo de dados: objeto JSON |
    | forceCloseControl | Sinalizador que indica se o componente pode aceitar entrada. Quando verdadeiro, o controle é fechado e o usuário não pode interagir com ele. Monitore as mudanças no cliente para atualizar este valor. Use somente em componentes que exigem entrada do usuário. Tipo de dados: booliano |
    [Tabela 2. Propriedades do componente de entrada]

    {#va-components__table_k3t_nqd_lmb}

    Use esta ação para emitir dados da interação do usuário.  
    {#va-components__table_pdz_frd_lmb__entry__2}

    | Ação | Descrição |
    |-|-|
    | VA_CONTROL#VALOR_ENVIADO | Dados de resposta do cliente a serem enviados para o servidor. Use somente em componentes que exigem entrada do usuário. Tipo de dados: objeto JSON |
    [Tabela 3. Ações do componente de entrada]

    {#va-components__table_pdz_frd_lmb}

## Estados do componente de entrada {#va-components__section_ggf_zhd_lmb}

Como eles aceitam dados, os componentes de entrada devem lidar com vários estados. O fluxo de estado geralmente é o seguinte:

1. Virtual Agent mostra o componente personalizado no estado aguardando entrada.
2. O usuário interage com o componente para fornecer entrada.
3. O componente fecha e envia a propriedade `responseValue` para o servidor.
4. O servidor executa a lógica do lado do servidor e envia o componente com a entrada do usuário de volta para o cliente.

{#va-components__ol_ew1_2vk_lmb}  

Aguardando entrada

:   O estado inicial de um componente que aguarda a interação do usuário. A propriedade `controlData` está definida, mas a propriedade `forceControlClosed` é falsa. Este exemplo mostra um componente do controle deslizante no estado aguardando entrada.

    Neste exemplo, se o usuário não tiver fornecido um `responseValue` e o controle não estiver fechado, o controle deslizante e o botão de entrada serão exibidos.  

        const {controlClosed, sliderVal, sliderMin, sliderMax} = state;
        return (<div class={{"slider-chat": true}}>
            {responseValue ? null :  <Fragment>
            <div class={{"slider-label": true}}>{label}</div>
            {controlClosed ? null : <Fragment>
                <div class={{"slider-container": true}}>
                            <input on-change={onSliderChange} type="range" min={sliderMin} max={sliderMax} value={sliderVal} class={{"slider": true}} />
                    <div class={{"slider-value": true}}>
                            {unitIcon && 
                             <div class={{"unit-icon": true}}><img src={unitIcon} /></div>
                             } 
                             {sliderVal} {unitName}
                        </div>
                <div class={{"button-container":true}}>
                    <now-button variant="primary" label={buttonText || 'Confirm'} />
                 </div></div></Fragment>}

Entrada de manipulação

:   No exemplo anterior, o controle deslizante usa um componente `de botão agora`, no qual o usuário clica para confirmar a entrada e enviá-la para o servidor. Quando o usuário clica no botão, a ação `VA_CONTROL#VALUE_SENT` é acionada com a carga `responseValue`.

        'NOW_BUTTON#CLICKED': (data) => {
            const {updateState, dispatch, state: {sliderVal}} = data;
            updateState({controlClosed: true});
            dispatch('VA_CONTROL#VALUE_SENT', {
                value: {
                    sliderVal
                }
            }); 
        }

Encerrado

:   Um componente que está fechado não pode mais aceitar a entrada do usuário. Os componentes geralmente são fechados porque:

    * O usuário respondeu ao componente. O componente é encerrado e a conversa continua.
    * O usuário encerrou o bate-papo. O servidor não espera por uma resposta.
    {#va-components__ul_pts_spf_mmb}

    Por exemplo, o componente do controle deslizante somente renderiza o prompt original quando está no estado fechado.

    ![Componente fechado que não está mais aguardando a entrada do usuário.]()

Enviando resposta

:   Depois que o usuário responde, o controle é renderizado novamente no lado do usuário da conversa com o valor da propriedade `responseValue`.

    Por exemplo, o controle deslizante usa este snippet para renderizar a resposta.  

        {responseValue && <div className="response-container slider-value">
           {unitIcon && 
           <div className="unit-icon"><img src={unitIcon} /></div>
           } 
           {returnVal} {unitName}
        </div>}

## Adicionando o componente a Designer do Virtual Agent {#va-components__section_vmx_c3d_lmb}

Depois de desenvolver o componente e implantá-lo em sua instância, adicione-o a Designer do Virtual Agent usando um controle e uma definição personalizados. Para obter mais informações, consulte [Controles personalizados do Virtual Agent](https://www.servicenow.com/docs/access?context=custom-controls&version=xanadu&pubname=xanadu-conversational-interfaces&ft:locale=en-US).
* **[Adicionar propriedades com as quais se comunicar Virtual Agent](https://servicenow-prod.fluidtopics.net/6eHt1HafKTmB5dwr64b5SA)**   
  Para desenvolver um componente para Virtual Agent, adicione propriedades e ações específicas para interagir com a interface do cliente Virtual Agent. As propriedades necessárias dependem do tipo de componente que você está criando.
* **[Testar um componente para Virtual Agent](https://servicenow-prod.fluidtopics.net/jqfWrF39z5966cTjXJBlbg)**   
  Teste o componente personalizado Virtual Agent antes de implantá-lo na instância.