Script para abrir chamado em HTML e jQuery

Neste artigo iremos explicar como criar um script para abrir chamados a partir de um formulário simples em HTML, que poderá ser utilizado no seu site, por exemplo.

Segue abaixo as instruções:

Criar o usuário

A primeira coisa que você precisa fazer é criar um usuário para a API e copiar o token de acesso (o usuário precisa ser do tipo API para gerar o token).

Permissões

Certfique-se de criar as permissões onde este usuário tem acesso apenas para gravar chamados, conforme a imagem abaixo:

Exemplo de script

Javascript

Segue abaixo um script para criar um novo chamado utilizando o jQuery:

$('#formulario-chamado').submit(event => {

    event.preventDefault()

    // token do usuário
    const token = ''
    const url = 'https://suporte.[seudominio.com.br]/api/chamados/gravar/mensagem-cliente'

    const formulario = $(event.target)
    const valores = formulario.serializeArray()
    const botao = formulario.find('button:submit')
    const dados = {

        // dados complementares do chamado
        observacoes: [
            {
                nome: 'Página',
                valor: window.document.title
            },
            {
                nome: 'URL',
                valor: window.location.href
            },
        ]
    }

    // organiza os dados obtidos com o jquery
    $.each(valores, (indice, variavel) => {
        dados[variavel.name] = variavel.value
    })

    // Configura o setor do chamado
    if(!dados.id_setor){
        dados.id_setor = 3
    }

    // Envia a solicitação via AJAX
    $.ajax({
        headers: {
            Authorization: token,
        },
        type: 'POST',
        url,
        data: dados,
        dataType: 'json',
        encode: true
    })
    .then((resposta) => {

        // resposta do servidor
        console.log(resposta​)

    })
    .catch((error) => {

        let mensagem = 'Ocorreu um erro ao enviar os dados, por favor preencha corretamente o formulário e tente novamente'

        if(error.status == 422 && error.responseJSON){
            mensagem = ''
            $.each(error.responseJSON, (campo, erro) => {
                mensagem += `<div>${erro}</div>`
            })
        }

        if(error.responseJSON && error.responseJSON.error){
            mensagem = error.responseJSON.error
        }

        console.error(mensagem)

    })

})

HTML

Exemplo de formulário em HTML

<form id="formulario-chamado">
    <input class="input" type="text" name="nome" placeholder="Nome Completo" required="required">
    <input class="input" type="email" name="email" placeholder="E-mail" required="required">
    <input class="input" type="tel" name="telefone" placeholder="Telefone ou WhatsApp" required="required">
    <input class="input" type="text" name="assunto" placeholder="Assunto" required="required">
    <textarea class="textarea" name="mensagem" rows="15" placeholder="Escreva sua mensagem" required="required"></textarea>
    <button type="submit">Abrir chamado</button>
</form>

Observações:

Neste script você está deixando o token visível para todos na internet, o correto seria você enviar esta requisição para um servidor (PHP ou Node) e do servidor enviar a requisição para o servidor do suporte, escondendo o token de acesso.

Qualquer dúvida entre em contato com a nossa equipe de suporte.