> For the complete documentation index, see [llms.txt](https://docs.sapios.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sapios.com.br/construindo-e-treinando/elementos.md). # Elementos Nesta sessão estaremos abordando elementos de um bloco/componente e o que cada coisa faz no fluxo. Estaremos utilizando blocos simples como exemplos a serem mostrados. ## O que são Blocos/Componentes? Os blocos/Componentes, são espaços retangulares com cores diferentes que possuem diferentes funcionalidades de acordo com o fluxo, alguns mais simples, como editores de textos e perguntas até blocos mais complexos contendo inserção e armazenamento de informações de usuário. ![](https://2650713497-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LG0TpyWA_K1jpXPXCDh%2F-MV1W6JiLXwIzXgEZpfm%2F-MV2VxYMu1H5zyvAIiHV%2FCOMP.png?alt=media\&token=72b71fd1-b927-4ac0-a4d0-914a7046cff1) Um bloco é composto por 5 elementos que ficam visíveis ao usuário: * **Titulo do Componente:** É o titulo de identificação do componente, pode ser editado em [suas propriedades](https://docs.sapios.com.br/construindo-e-treinando/blocos-1/blocos-de-intreracao#enviar-mensagem). * **Linha de Entrada:** É o espaço de entrada que conecta o componente a um bloco anterior a este, pode armazenar tanto uma quanto múltiplas linhas caso tenha um bloco de perguntas antes dele. * **Linha de Saída:** É o espaço de saída a qual fará conexão com um próximo componente, geralmente possui mais de uma saída caso seja um bloco de condição ou pergunta. ![](https://2650713497-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LG0TpyWA_K1jpXPXCDh%2F-MVGRTyazgntwBff_OUL%2F-MVGZCbeaXeyqRex66e5%2Fflow.PNG?alt=media\&token=f6ca520a-f7a8-481d-a510-b4906c489e34) * **Rótulo de Identificação do Componente:** É a identificação do componente e sua função. Ao contrário do titulo do componente, isso não é editável. * **ID do Componente:** Número do componente colocado, como mostra a ordem caso haja outros componentes. O número aumenta a medida que novos componentes são inseridos como mostrado na imagem acima. Não são todos os blocos que necessitam de conexão direta, alguns passam por um bloco que direciona a ação para outra parte do fluxo no caso dos blocos [**Ir para o Node**](https://docs.sapios.com.br/construindo-e-treinando/blocos-1/blocos-de-fluxo#para-o-node) e [**Alvo**](https://docs.sapios.com.br/construindo-e-treinando/blocos-1/blocos-de-fluxo#node-alvo)**.** ![](https://2650713497-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LG0TpyWA_K1jpXPXCDh%2F-MVGRTyazgntwBff_OUL%2F-MVGen23wwTH0VbMrR2w%2FNODE.png?alt=media\&token=fdc62dd4-e54e-40cb-9d2d-e7eddc16cabc) Conforme mostrado no bloco acima, o bloco Ir Para o Node inicia um direcionamento de uma ação do fluxo o qual pode não estar a frente no fluxo, mas sim em um lugar distante de onde a ação está localizada e que pudesse levar a alguma divergência na compreensão do fluxo. Uma vez que os componentes se encontram conectados ao canvas, o fluxo passa a funcionar corretamente. Ao finalizar as ações referentes aos componentes, basta salvar o fluxo e publicá-lo. ![](https://2650713497-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LG0TpyWA_K1jpXPXCDh%2F-MVGRTyazgntwBff_OUL%2F-MVGgeg7SFmt4_UD-RkR%2FFINAL.png?alt=media\&token=982cd873-14f4-40cd-92aa-a3e722361836) Para acessar o chat a fim de verificar suas alterações clique na caixa de chatbot no canto inferior direito da tela e iniciar o fluxo. ## Botões Botões estão disponíveis quando você configura um componente de **Pergunta** ou **Condição** com múltiplas escolhas, as quais o usuário terá que selecionar a qual se enquadra melhor em seu contexto.
É possível habilitar a opção de múltipla escolha no bloco de **Pergunta** por suas propriedades em [**Prazos e Condições**](https://docs.sapios.com.br/construindo-e-treinando/blocos-1/blocos-de-intreracao#propriedades-do-bloco-pergunta)**.** ![](https://2650713497-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LG0TpyWA_K1jpXPXCDh%2F-MVGo679rWeOYb1H8QOt%2F-MVGp86_mAnIrR2g3UqS%2Fesco.png?alt=media\&token=6dd7c051-4fd6-4f90-99ed-523d7fb6f596) Caso utilize o bloco **Condição** será necessário que insira um condição com base em uma string dada pelo próprio componente. Você pode utilizar variáveis para compor a sua string. ![](https://2650713497-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LG0TpyWA_K1jpXPXCDh%2F-MVGo679rWeOYb1H8QOt%2F-MVGpGB849By148x4gKP%2Fcond.PNG?alt=media\&token=68da9c21-c9b9-4501-8267-b8ebad8d4391) {% hint style="info" %} Lembre-se sempre de atualizar suas alterações salvando e publicando o seu fluxo conforme [mostrado acima](https://docs.sapios.com.br/construindo-e-treinando/elementos#o-que-sao-blocos-componentes). {% endhint %} ## Mídia Você pode incluir mídias como animações, vídeos e áudios em URL por componentes no fluxo, verificando as propriedades do componente selecionado e se o mesmo suporta o tipo de ação que deseja incluir.
Dos componentes em que suportam URLs de mídia, os principais são: * [Enviar Mensagem;](/construindo-e-treinando/blocos-1.md) * [Hero Card;](https://docs.sapios.com.br/construindo-e-treinando/blocos-1/cartoes#hero-card) * [Carrossel;](https://docs.sapios.com.br/construindo-e-treinando/blocos-1/cartoes#carrossel) * [Cartão de Mídia;](https://docs.sapios.com.br/construindo-e-treinando/blocos-1/cartoes#cartao-de-midia) * [Cartão Adaptativo;](https://docs.sapios.com.br/construindo-e-treinando/blocos-1/cartoes#cartao-adaptativo)