# Builder
Nesta seção da documentação, você saberá como acessar seu projeto criacional, conhecer as ferramentas do simulador do assistente virtual e como são feitas as configurações.
## **Acessando o Builder**
O primeiro passo é acessar. Para isso, há duas maneiras:
1. Pela página inicial do assistente clicando no **primeiro ícone**, em formato de **fluxograma**:
2\. Ou clicando no **segundo ícone**, de **edição do assistente**, e em seguida no botão **acessar builder** localizado do lado esquerdo da tela:
{% hint style="info" %}
Caso você crie um novo assistente, o grid estará vazio. Veja na próxima seção como proceder para criar uma ação ou nó.
{% endhint %}
## **Configurando o builder de um assistente novo**
Para criar uma ação, ou nó, basta dar um duplo clique em qualquer lugar da tela, como mostra o gif abaixo:
Em seguida, aparecerá o painel de configuração do nó, à direita, por onde você poderá inserir suas informações necessárias.
{% hint style="info" %}
O limite de nós sequenciais sem input do usuário é de 20. Qualquer fluxo com mais de 20 nós sequenciais sem input do usuário será travado.
{% endhint %}
## **Navegando pela barra principal**
Na barra principal do builder, você encontrará:
* **Versões:** todas as versões do builder e opção para adicionar uma nova;
* **Variáveis de ambiente:** todas as variáveis e opção de adicionar uma nova;
* **Templates:** todos os templates já criados;
* **Exportar builder:** ao finalizar o seu assistente, você poderá exportar o arquivo em JSON;
* **Configurações:** configure o builder como desejar através dos comandos que aparecem;
* **Fluxo de inatividade:** configure o tempo que o bot aguardará por uma interação do usuário durante a conversa, antes de seguir para o fluxo de abandono. Clique aqui e consulte a documentação.
## Simulador
O simulador serve para para testar seu assistente, permitindo acompanhar cada etapa do processo dos nós. Ao clicar nele, o teste será iniciado, conforme demonstrado abaixo:
Na simulação, você pode testar os canais Widget e Whatsapp.
Caso você queira **iniciar o teste a partir de um lugar específico** do fluxo, **clique no nó que deseja iniciar o teste.** Acima dele aparecerá uma lista de ícones, o último é "**testar a partir deste nó"**
Após selecionar essa opção, o teste iniciará, conforme mostra o gif:
## **Ferramentas do simulador**
### Breakpoint
O Breakpoint, localizado ao lado do ícone do WhatsApp, serve para **pausar a execução e simular o seu fluxo nó a nó**, permitindo acompanhar o andamento de cada um por vez.
Para utilizar o recurso, basta ativar a opção **breakpoint** e seguir o fluxo.
{% hint style="info" %}
É necessário uma interação com o bot para que a funcionalidade ative ou desative.
{% endhint %}
### Fluxo de nós
Durante o teste de interação, é possível visualizar o fluxo de nós executados a partir de cada mensagem processada e editá-los um a um. Para isso, siga as instruções:
1. Clique no símbolo **`>`** localizado no lado direito do simulador;
2. Uma tela com os nós se expandirá à direita;
3. Ao clicar em cima de um nó específico, as configurações de edição serão exibidas e você pode editar as informações que desejar;
Veja um exemplo abaixo:
Ao lado do **fluxo de nós**, é possível ver outros recursos disponíveis:
Esses recursos são:
* **Contexto:** Visualizar variáveis do contexto do atendimento
* **Atendimento:** Visualizar informações sobre o atendimento
* **Eventos:** Visualizar informações dos eventos disparados durante a simulação
* **Console:** Observar os erros de expressões que acontecem ao decorrer de um fluxo. Para acionar e corrigir, basta clicar que será direcionado para o nó do ocorrido.
{% hint style="info" %}
Serão considerados erros de expressões aqueles que são executados pelo builder, ou seja, erros de programação em geral: códigos colocados dentro de \ ou nos pontos de entradas e destinos de um nó.
{% endhint %}
Alguns exemplos de erros possíveis de acontecer:
* Manipulação de variável não definida;
* Comparações do tipo " $varnaodefinida == 'string' ", pois são retornadas como falso, e não como erro;
* Uso de funções inexistentes;
* Uso de funções em variáveis não definidas;
{% hint style="info" %}
O aviso não sairá após corrigir o erro, só durante a execução do próximo teste no simulador, quando passar no nó onde o erro acontecia.
{% endhint %}
## **Teclas de atalho**
| Atalhos | Função |
| ---------------------- | --------------------------------------- |
| **`ctrl + shift + s`** | Salva todas as abas do Builder |
| **`ctrl + s`** | Salva a aba que está sendo editada |
| **`ctrl + d`** | Abrir ou recarregar a tela do simulador |
| **`ctrl + f`** | Abre a pesquisa de nós |
| **`ctrl e +`** | Zoom: para aproximar |
| **`ctrl e -`** | Zoom: para distanciar |
| **`ctrl e 0`** | Zoom: para voltar ao padrão |
| **`alt + C`** | Copiar nó |
| **`alt + V`** | Colar nó copiado anteriormente |
| **`delete`** | Deleta um nó |
| **`ctrl + b`** | Ocultar/exibir menu de fluxos |
| **`ctrl + alt + q`** | Ocultar/exibir fluxo ativo |
| **`ctrl + alt + w`** | Ocultar/exibir simulador |
| **`ctrl + alt + e`** | Ocultar/exibir Zoom |
| **`ctrl + alt + r`** | Ocultar/exibir pesquisa de nós |
| **`ctrl + q`** | Ocultar tudo |
## Expansão e redução da tela
Ao clicar no botão de expansão, você terá muito mais controle sobre a área do grid, podendo expandir uma altura ou largura de 2 nós nas quatro direções (topo, esquerda, direita e inferior).
{% hint style="info" %}
Utilize o `crop` para reajustar os elementos e a área do grid, assim você tem muito mais controle sobre a posição. O crop respeitará sempre a disposição dos elementos, ele nunca irá cortar qualquer elemento do usuário.
{% endhint %}
### **Minimap**
Para facilitar a visualização do builder e otimizar o tempo de trabalho, você pode também utilizar o minimap.
## Copia e cola
É possível copiar ou colar nós com destinos dentro de um mesmo grid ou até em instâncias diferentes. Para isso, é preciso permitir o acesso a área de transferência do seu navegador, após a liberação você pode selecionar a seta no canto superior direito do nó e escolher entre as opções "copiar" ou "duplicar". Para colar, basta clicar no local que deseja com o botão direito do mouse e selecionar a opção "colar". Outra alternativa é utilizar os atalhos do teclado:
* **Alt + c** = para copiar o nó selecionado
* **Alt + v** = para colar o nó no centro da tela
**Obs:** certifique-se de que a permissão do clipboard esteja ativa:
.png?alt=media\&token=81a1f1a5-016e-46cf-9900-19a49ad90606)
## **Exportar e importar Builder**
Você poderá exportar todo o Builder programado. Basta seguir os seguintes passos:
1. Na barra superior, selecione “exportar builder”.
2. Escolha a versão que deseja exportar e aguarde o download.
{% hint style="info" %}
Após clicar em uma das versões, será feito um download da versão em questão com o nome export\_builder\_{assistant\_id}\_{assistant\_version\_id}. A extensão do arquivo exportado é **JSON**.
{% endhint %}
## Exportar fluxo
Caso deseje exportar o fluxo atual, basta clicar no botão de download na barra de ferramentas localizada no canto superior do builder.
Feito isso, irá começar o download de um arquivo `json` contendo os nós e configurações do fluxo. **Isso é particularmente útil para criar modelos e reaproveitá-los em outros assistentes**.
## Criar fluxos
Além de exportar, você também pode importar o JSON de um outro fluxo que foi exportado anteriormente. Basta adicionar o arquivo no símbolo + localizado no canto superior esquerdo do builder.
{% hint style="warning" %}
Ao criar um fluxo a partir de um arquivo exportado, as condições de saída que apontavam para o fluxo original ficarão sem a definição do destino, e será preciso reconfigurar.
{% endhint %}
### **Pastas de fluxos**
Uma outra funcionalidade são as pastas de fluxos, que ficam visíveis do lado esquerdo da tela. Elas servem para **organizar de forma agrupada o conjunto de fluxos que você criar**.
