웹사이트의 문의하기 양식을 제출하면 젠데스크 티켓으로 만들어지도록 하는 방법

 웹사이트에 1:1 문의하기 양식을 만들고, 이를 통해 Zendesk에 티켓이 자동 생성되도록 연동하는 방법을 아래와 같이 단계별로 안내해드리겠습니다.

아래는 참고를 위한 예시로 젠데스크 API 정보를 확인하여 구현해야 합니다.

✅ 목표

웹사이트의 HTML 양식(form)에 입력된 데이터를 → Zendesk 티켓으로 전송
👉 결과: Zendesk에 문의 티켓이 자동으로 생성됨

✅ 구현 방식 요약

🧩 방법 1: 최종 사용자가 직접 요청하는 경우 (Zendesk Request API)

Zendesk는 비회원/고객 사용자도 티켓을 생성할 수 있도록 requests.json API를 제공합니다.

🔗 API 엔드포인트

POST https://{your_subdomain}.zendesk.com/api/v2/requests.json

📝 1. HTML 문의 양식 예시

<form id="inquiry-form">
  <input type="text" name="name" placeholder="이름" required />
  <input type="email" name="email" placeholder="이메일" required />
  <textarea name="message" placeholder="문의 내용" required></textarea>
  <button type="submit">문의하기</button>
</form>

⚙️ 2. JavaScript를 이용한 Zendesk 티켓 생성 코드 (Client-Side)

<script>
document.getElementById('inquiry-form').addEventListener('submit', async function (e) {
  e.preventDefault();

  const name = e.target.name.value;
  const email = e.target.email.value;
  const message = e.target.message.value;

  const response = await fetch('https://{your_subdomain}.zendesk.com/api/v2/requests.json', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Basic ' + btoa('user@example.com/token:YOUR_API_TOKEN')  // 관리자 계정 인증
    },
    body: JSON.stringify({
      request: {
        requester: { name, email },
        subject: `웹사이트 문의: ${name}`,
        comment: { body: message }
      }
    })
  });

  if (response.ok) {
    alert('문의가 성공적으로 접수되었습니다!');
  } else {
    alert('오류가 발생했습니다. 다시 시도해주세요.');
  }
});
</script>

🔐 user@example.com/token 형식 사용 시 Zendesk Admin의 API 토큰을 발급받아 사용해야 합니다.
Zendesk → Admin Center > 앱 및 통합 > API > 토큰 활성화

🔄 방법 2: 서버사이드 요청 (예: Node.js, PHP)

보안상 API 토큰을 브라우저에서 노출시키지 않고자 할 경우, 서버에서 요청을 대신 전송하는 방식도 많이 사용합니다.

Node.js 예시 (Express)

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

app.post('/send-to-zendesk', async (req, res) => {
  const { name, email, message } = req.body;

  try {
    const response = await axios.post('https://{your_subdomain}.zendesk.com/api/v2/requests.json', {
      request: {
        requester: { name, email },
        subject: `웹 문의: ${name}`,
        comment: { body: message }
      }
    }, {
      auth: {
        username: 'user@example.com/token',
        password: 'YOUR_API_TOKEN'
      }
    });

    res.status(200).send({ success: true });
  } catch (error) {
    res.status(500).send({ error: error.message });
  }
});

👉 클라이언트에서는 /send-to-zendesk로 POST 요청만 하면 되므로, API 토큰이 노출되지 않습니다.

✅ 보완사항 (권장)

✉️ 예시 티켓 데이터 (JSON)

{
  "request": {
    "requester": {
      "name": "홍길동",
      "email": "hong@example.com"
    },
    "subject": "웹사이트 문의",
    "comment": {
      "body": "1:1 문의 내용입니다."
    }
  }
}

🔐 Zendesk API 토큰 발급 방법

1. Zendesk Admin Center 접속

2. 앱 및 통합 > Zendesk API

3. 토큰 액세스 활성화

4. API 토큰 생성 → 메모해두기

📌 마무리

• HTML 양식 + JS or 서버 코드로 쉽게 연동 가능

• 보안을 위해 토큰은 클라이언트에 직접 노출하지 않는 것을 권장

• 필요 시 그룹/필드 자동 분류, 첨부파일, SLA 지정 등도 확장 가능