Zendesk 활용하기

📌 API 기능 URL

• Ticket 번호로 json 파일 불러오기

https://support.도메인.com/api/v2/tickets/{ticket_id}.json

ex) https://support. 도메인 .com/api/v2/tickets/849.json​

• 티켓 생성

https://support. 도메인 .com/api/v2/requests.json

•  첨부 파일

https://도메인.zendesk .com/api/v2/attachments/{attachment_id}.json

•  티켓에서 attachment_id 얻기

/api/v2/tickets/{ticket_id}/comments

여러 첨부파일 : https://support. 도메인 .com/api/v2/tickets/2341/comments

 

📌 Zendesk

1. 연동에 필요한 API 토큰 생성

 

• 관리자 페이지에서 사용 가능 : https:// 도메인 .zendesk.com/admin

 

2. 티켓 생성

 

공식 문서 : https://developer.zendesk.com/api-reference/ticketing/tickets/ticket-requests/

• 요청 url : 도메인/api/v2/requests
• json 파일 확인 : https://support.도메인.com/api/v2/requests.json
• 티켓 확인 : https://support. 도메인 .com/api/v2/tickets/{ticket_id}.json

// 사용 예시

fetch("https://support. 도메인 .com/api/v2/requests.json", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": "Basic " + btoa("계정/token:토큰값")
                },
                body: JSON.stringify(requestData)
            }

 

3. 필드 수정

관리자 페이지에서 사용자가 임의로 필드 수정 가능

 : https:// 도메인 .zendesk.com/admin/objects-rules/tickets/ticket-fields 

 

4. 다국어 사용

• handlebars : 각 태그 별로 언어 처리를 진행해야함

handlebars 사용 예시
<h2>
  {{#is help_center.locale "ko"}}
     문의 등록
  {{else}}Inquiry Registration
  {{/is}}
</h2>

• 동적 콘텐츠 활용

동적 콘텐츠 활용 : https://도메인.zendesk.com/admin/workspaces/agent-workspace/dynamic_content 

1. Zendesk Guide 관리자 페이지 접속
2. 설정(Settings) → Locale 선택
3. 번역 데이터 추가

new_request_page.hbs에서 동적 콘텐츠 사용 예시
{{dc "콘텐츠명"}}
ex) 
{{dc "Zendesk_Help_Center_isPrivacyConsent"}}

---

[Chatgpt 인용]

 

📌 Zendesk의 new_request_page에서 자동 번역 가능할까?

 

✅ 정답: 기본적으로 자동 번역은 지원되지 않으며, 언어별로 폼을 구축해야 함.
Zendesk에는 자동 번역 시스템(Google Translate, DeepL 등)이 기본 내장되어 있지 않음, 따라서 new_request_page의 form도 자동 번역이 되지 않음.
✅ 대신 Zendesk는 다음 방법을 지원함:

1. Zendesk의 번역 시스템({{t}} 헬퍼)를 활용해 언어별 폼을 자동 변환

Zendesk Guide에서는 {{t}} 헬퍼를 사용하면, Zendesk에서 설정한 번역 데이터에 따라 자동 변환됨.

---

5. 첨부파일

 

공식 문서 : https://developer.zendesk.com/api-reference/ticketing/tickets/ticket-attachments/

• 요청 : 도메인/api/v2/uploads
• 티켓 확인 : https://support. 도메인 .com/api/v2/tickets/{ticket_id}.json
  • /api/v2/tickets/{ticket_id}/comments
  • /api/v2/attachments/{attachment_id}.json
• 파일은 형식을 지정하지 않고 file 그대로 fetch하여 전송한다
• 파일 업로드 시 마다 token이 새로 생성되기 때문에 비동기식(async/await) 사용

 

*) 아래는 첨부 파일 업로드 시 문제되었던 이력을 정리한 내용이다.

---

오류 해결 과정

 

[ 오류 ]
file을 fetch로 전송 시 body에 form-data로 넣으면 이미지 파일이 깨짐
file 그 자체로 인식해야함

> 오류 상세 내용

파일은 업로드가 되는데 이미지 파일이 깨짐

- content-type이 multipart/form-data로 들어가 있음

   file.type : image/png

- upload 될때

[ 해결 ]

API 테스트 : Postman API 테스트 진행

일반 파일을 직접 선택해서 api 전송 시 성공 확인

fetch 시 파일 그대로로 설정

fetch() {

    method: "POST",

    headers: {"Authorization": "Basic " + btoa("계정/token:토큰"),                     },

    body: file

}

 

여러개의 파일 업로드

파일 업로드 시 마다 token이 새로 생성되기 때문에 비동기식(async/await) 사용

// 제출하기(필드)
document.getElementById("inquiryForm").addEventListener("submit", async (event) => {
    event.preventDefault(); // 기본 폼 제출 방지
    const files = document.querySelector("#fileInput").files || null; // 파일 없을 경우 null 처리

    const uploadToken = await uploadFile(file); // 파일 업로드 시도 (없으면 null 반환)

    createZendeskTicket(uploadToken); // 파일 유무 관계없이 티켓 생성
});      
 
// 파일 업로드
async function uploadFile(file) {
    if (!file) return null; // 파일이 없으면 업로드 생략


    try {


        const uploadResponse = await fetch(`https://도메인.zendesk.com/api/v2/uploads?filename=${encodeURIComponent(file.name)}`, {
            method: "POST",
            headers: {
                "Authorization": "Basic " + btoa("계정/token:토큰"),
            },
            body: file
        });

---