Acessar artigos

1. Introdução

Essa documentação tem como objetivo explicar as funções básicas do tagscript, bem como demonstrar com exemplos a sua funcionalidade.

2. URL base

Para os usuários, a URL base é:

https://custom.tagcenter.io/

Ao acessar a url acima, selecione o projeto desejado e clique no botão " + ".

Selecione a opção Bot e em seguida TagScript Bot.

Onde a seta está apontando ficará o código do bot, ou seja, os comandos serão escritos nesse campo.

Onde está o retângulo são os botões de operações, da direita para a esquerda: Play (inicia o bot), Salvar (salva as alterações feita no código para que o bot seja atualizado), Lixeira (exclui o script).

Onde a seta está apontando é o campo do nome do script, o ideal é você altera-lo de acordo com a função dele.

Ex: Bot - Receptivo / Bot - Qualificação / Bot - Controle de acessos

Onde está o retângulo são os scripts criados e salvos desse projeto.

Ao clicar em Chatbot você tem acesso a alguns scripts de exemplo.

É possível simular seu bot antes de coloca-lo em produção, através do nosso simulador.

Com o código escrito, aperte o botão do Play, ele irá abrir um simulador ao lado esquerdo da tela, faça uma interação com o bot e ele reproduzirá o seu script. Ao fim da simulação, aperte o Stop para fecha-lo.

Vídeo de apoio.

3. Mandar mensagem

  • Mensagem Simples

Para mandar mensagem é necessário chamar a função message() que recebe como parâmetro a mensagem que será enviada após o primeiro contato com o usuário. É importante que a mensagem esteja dentro das aspas (simples ou dupla).

Exemplo:

MESSAGE('Olá! ✅');

Para testar a resposta do bot, é necessário clicar no botão "Editar" e depois no botão de play. Então você envia a primeira mensagem e, após esta, ele receberá um Olá! do bot, como consta na imagem abaixo.

  • Quebra de Linha

A mensagem também pode ser escrita com quebra de linha, para isso é necessário adicionar no texto "\n" no local que se deseja que ocorra a quebra.

Exemplo:

  • Uso de Variáveis

função message() também permite o uso de variáveis que já foram definidas - ou não. Para conseguir usálas é necessário acessá-las usando o "data.{variável}".

Exemplo:

MESSAGE('Olá! ✅ ' + data.Nome + '\n Me chamo Fulana e irei te atender hoje!');

Nesse exemplo, a variável data.Nome não está definida no chatbot, portanto irá retornar um valor indefinido.

Essa variável pode ter o seu valor passado manualmente, como consta abaixo.

data.Nome = "Fernanda"
MESSAGE('Olá! ✅ \n Me chamo ' + data.Nome + ' e irei te atender hoje!');

Também é possível atualizar a variável com algum retorno do próprio usuário, o que será ensinado no próximo tópico.

4. Fazer Perguntas

TagScript possui uma função QUESTION() que recebe como parâmetro a pergunta que será feita (obrigatório), a variável que receberá a resposta (obrigatório), o tipo da variável (obrigatório), as opções de respostas (opcional) e caso as opções passe de 3, aceita um outro parâmetro que será a mensagem que constará na janela para escolher entre as opções. Vamos começar mostrando o exemplo mais simples.

  • Pergunta Simples

Para perguntar ao usuário o seu nome, com a variável Nome (pode customizar com a palavra que desejar) armazenando a resposta do usuário, a função QUESTION() deverá ser passada da maneira abaixo.

Exemplo:

QUESTION(
  'Qual o seu nome?',
  'Nome',
  'string'
);

Caso queira enviar uma mensagem com o nome da pessoa, deverá chamar a função MESSAGE passando como variável "data.Nome".

QUESTION(
  'Qual o seu nome?',
  'Nome',
  'string'
);
message(
  'Olá ' + data.Nome + ' 😀' + '\n Muito bom te ter aqui! ✔ ' '\n Me chamo Fulana e irei te atender hoje!'
);

Abaixo exemplifica casos onde o que será solicitado será um número.

Exemplo:

QUESTION(
  'Qual a sua idade?',
  'idade',
  'int'
);
MESSAGE(
  'Você tem ' + data.idade + ' anos ✔'
);
  • Pergunta com Opções

Com a função QUESTION() também é possível enviar opções de respostas para o usuário, apenas passando um quarto parâmetro.

Exemplo:

QUESTION(
  'Olá! Você está podendo falar agora?',
  'resposta',
  'VALID_LIST',
  ['Sim', 'Não', 'Talvez', 'Não e não estarei'],
  'Faça uma escolha'
);
MESSAGE(
  'Apenas confirmando, sua resposta foi: ' + data.resposta
);

Caso as opções fornecidas passem de 3, será necessário passar um quinto parâmetro que será o texto que aparecerá na caixa de opções.

Exemplo:

QUESTION(
  'Olá! Você está podendo falar agora?',
  'resposta',
  'VALID_LIST',
  ['Sim', 'Não', 'Talvez', 'Não e não estarei'],
  'Faça uma escolha'
);
MESSAGE(
  'Apenas confirmando, sua resposta foi: ' + data.resposta
);

5. Condicionais

Para seguir diferentes abordagens a depender da resposta do usuário, utiliza-se condicionais com if/else.

Exemplo:

QUESTION(
'Olá! Você está podendo falar agora?',
  'resposta',
  'VALID_BUTTONS',
  ['Sim', 'Não']
);
if (data.resposta == 'Sim') {
  QUESTION(
    'Qual o seu email?',
    'email',
    'VALID_EMAIL'
  );
} else {
  QUESTION(
    'Em que horário você estará disponível?',
    'horario',
    'VALID_BUTTONS',
    ['8-12h', '12-18h', '18-22h']
  );
  MESSAGE('Ok, entraremos em contato no horário de ' + data.horario);
}

Para as respostas Não, o bot retorna:

É possível gerar if/else para todas as possíveis respostas do usuário. Para isso, basta utilizar o else if, como no exemplo abaixo.

QUESTION(
  'Olá! Você está podendo falar agora?',
  'resposta',
  'VALID_LIST',
  ['Sim','Não','Talvez', 'Não e não estarei'],
  'Faça uma escolha'
);
if(data.resposta == 'Sim'){
  QUESTION(
  'Qual o seu email?',
  'email',
  'VALID_EMAIL'
  )
}
else if(data.resposta == 'Não') {
  QUESTION(
    'Em que horário você estará disponível?',
    'horario',
    'VALID_BUTTONS',
    ['8-12h','12-18h','18-22h']
    );
  MESSAGE(
    'Ok, entraremos em contato no horário de ' + data.horario
   );
}
else if(data.resposta == 'Talvez') {
  QUESTION(
    'Iremos te fazer umas perguntas, topa?',
    'talvezResposta',
    'VALID_BUTTONS',
    ['Sim','Não']
  );
  if(data.talvezResposta == 'Sim') {
    QUESTION(
      'Qual o seu email?',
      'email',
      'VALID_EMAIL'
    );
  } else {
    MESSAGE(
      'Ok, até a próxima!'
    );
  }
} else if(data.resposta == 'Não e não estarei') {
  MESSAGE(
    'Ok, até a próxima!'
  );
}

Vamos analisar o retorno de todos esses ifs/elses:

Caso a pessoa selecione "Sim", o bot retorna:

Qual o seu email?

Caso a pessoa selecione "Não", o bot retorna:

Em que horário você estará disponível?
( )8-12h
( )12-18h
( )18-22h

Caso a pessoa selecione "Talvez", o bot retorna:

Iremos te fazer umas perguntas, topa?
( )Sim
( )Não

Caso a pessoa selecione "Talvez" e "Sim", o bot retorna:

Qual o seu email?

Caso a pessoa selecione "Talvez" e "Não", o bot retorna:

Ok, até a próxima!

Caso a pessoa selecione "Não e não estarei", o bot retorna:

Ok, até a próxima!

Para o bot ficar mais organizado é possível colocar algumas chamadas, que aparecerão mais de uma vez, em uma funçao, e chamá-a abrindo e fechando parênteses, como no exemplo abaixo, que usa as funções pegaEmail(), finalizaAtendimento() e inicio().

function pegaEmail() {
  QUESTION(
    'Qual o seu email?',
    'email',
    'VALID_EMAIL'
  );
}
function finalizaAtendimento() {
  MESSAGE(
    'Ok, até a próxima!'
  );
}
function inicio() {
  QUESTION(
    'Olá! Você está podendo falar agora?',
    'resposta',
    'VALID_LIST',
    ['Sim', 'Não', 'Talvez', 'Não e não estarei'],
    'Faça uma escolha'
  );
  if (data.resposta == 'Sim') {
    pegaEmail()
  } else if (data.resposta == 'Não') {
    QUESTION(
      'Em que horário você estará disponível?',
      'horario',
      'VALID_BUTTONS',
      ['8-12h', '12-18h', '18-22h']
    );
    MESSAGE(
      'Entraremos em contato no horário de ' + data.horario
    );
    finalizaAtendimento()
  } else if (data.resposta == 'Talvez') {
    QUESTION(
      'Iremos te fazer umas perguntas, topa?',
      'talvezResposta',
      'VALID_BUTTONS',
      ['Sim', 'Não']
    );
    if (data.talvezResposta == 'Sim') {
      pegaEmail()
    } else {
      finalizaAtendimento()
    }
  } else if (data.resposta == 'Não e não estarei') {
    finalizaAtendimento()
  }
}
inicio()

O bot acima retorna as mesmas mensagens que o exemplo anterior.

Clique aqui para saber mais como funciona o TAG CUSTOM.

crosslistmenu-circle