As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

# Personalizar visualizações do espaço de trabalho do atendente do Amazon Connect usando HTML e JSX
<a name="customize-views-jsx-sg"></a>

Você pode personalizar a aparência dos layouts dos recursos de visualização. Para fazer isso, utilize HTML ou JSX ao enviar os parâmetros de entrada para o bloco [Mostrar exibição](show-view-block.md).

Conclua as etapas a seguir para ver um exemplo simples de como você pode utilizar HTML ou JSX com um bloco [Mostrar exibição](show-view-block.md).

1. Crie um fluxo com um bloco [Mostrar exibição](show-view-block.md).

1. Abra a página Propriedades do bloco [Mostrar exibição](show-view-block.md). 

1. Em **Exibir**, selecione **Detalhe** na lista suspensa. 

1.  Na seção **Seções**, escolha **Definir JSON**. 

1. Copie e cole o código JSON a seguir. Esse código mostra como as expressões HTML ou JSX são processadas.

   **Exemplo de HTML**

   ```
   {
   "TemplateString": 
        "<TextContent>Steps:<ol><li>Customer provides incident information</li><li>Customer provides receipts and agrees with 
            amount</li> <li>Customer receives reimbursement</li></ol></TextContent>"
   }
   ```

   **Exemplo de JSX**

   ```
   {
   "TemplateString":
   "Please provide an introduction to the customers. Ask them how their day is going
   Things to say:
   Hello, how are you today? My name is Bob, who am I speaking to?"
   }
   ```