Para criar fluxos mais complexos com o Merlin você pode adicionar códigos através do componente “Código Javascript”.

Por dentro o componente se apresenta da seguinte forma:

- Na parte superior (”Nome”) você pode nomear o seu código para facilitar a visualização do fluxo no board. Este nome não interfere no funcionamento do código, ou seja, é apenas para organização do gestor;
- Na caixa preta (”Código”) será onde seu código será colado. Nós possuímos na Wiki alguns tutoriais que envolvem a elaboração de códigos para auxiliar nos casos de usos mais comuns;
- No botão abaixo (”Variáveis”) você pode adicionar variáveis já existentes no fluxo como “Nome”, “Telefone”, “E-mail”. Enfim, tudo vai depender do objetivo do código criado.
Dica: Para trazer a variável já existente ao código do Merlin digitamos a seguinte linha: Merlin.getVariable(‘nome_da_variavel’)
Como exemplo para este tutorial temos um fluxo onde o código detecta o idioma do navegador do usuário e o salva em uma variável do fluxo.

- Para fazer isso adicionamos o componente “código javascript”. E, dentro do componente (na parte escura) vamos colar o código abaixo:
var navLang = navigator.language;
Merlin.setVariable('idioma_navegador', navLang);
-
O código acima está identificando o idioma do navegador (navlang) e salvando-o no fluxo como a variável “idioma_navegador”.
-
Sendo assim, na prática, para salvar variáveis no Merlin através de código ele se dispõe da seguinte forma:
Merlin.setVariable('nomedavariavel', valordavariavel);
- Para finalizar o fluxo trazemos o resultado para o usuário. Para fazer isso adicionamos uma caixa de texto.

Por dentro o componente fica da seguinte forma:

- Em amarelo temos um texto padrão. Você pode escrevê-lo como desejar