Tickets

refernce. 개 없음.
나박에.없음.ㅋ

1. zendesk 체험판 가입
2. react-zendesk 라이브러리 설치
3. Zendesk 관리자페이지 설정 **
   • 관리자페이지
     • 채널 / 클래식 / 웹 위젯 설정이 필요
     • 웹 위젯 설정 메뉴가 안 보일 경우 채널 / 메시징 및 소셜 / 메시징 비활성화!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! => 이거떄문에 하루 헤맸음..... 아무도 알려주지 않음...............
       그치만 zendesk 고객센터는 알려줌..ㅋㅎㅋㅎ 친절하심
       역시 공식문서랑 고객센터를. 잘 이용해야함.ㅋㅎ
       
     • 채널 / 웹 위젯 / 설정의 예시 코드 script에 있는 key 값을 전달해야됨...;; 왤까 ;;;

• CreateTicket.js

import React, { useEffect } from "react";
import Zendesk from "react-zendesk";

function CreateTicket() {

  const setting = {
    webWidget: {
      helpCenter: {
        suppress: true,
      },
      contactForm: {
        suppress: false,
      },
       ticketForm: {
         suppress: true,
         subject: true,
         fields: [
           {
             id: "description",
             prefill: {
               "*": "Default ticket description",
             },
           },
         ],
       },
    },
  };
  return (
    <>
     <Zendesk defer zendeskKey={process.env.REACT_APP_ZENDESK_KEY} {...setting} onLoaded={() => console.log('is loaded')} />
    </>
  );

}

export default CreateTicket;

=============================================================================================

=============================================================================================

=============================================================================================
===================== 하기는 chatGPT가 알려준 코드, react-zendesk 라이브러리 사용하지 않음 ========================

=============================================================================================

=============================================================================================

=============================================================================================

Ticket API

• 사용자가 티켓 조회 및 발행시 이용하는 API
• 티켓 생성시 comment property에 요청사항 기재, description은 티켓 조회시에 사용하는 property로 사용x

{"ticket": {"subject": "My printer is on fire!", "comment": {"body": "The smoke is very colorful."}}}

Front code

import React, { useEffect } from "react";

function ZendeskTicketForm() {
  useEffect(() => {
    // Zendesk Embeddables 스크립트를 동적으로 로드
    const script = document.createElement("script");
    script.src = "https://static.zdassets.com/ekr/snippet.js?key=your-zendesk-key"; // zendesk 계정 key 값 .env에서 관리 ?
    script.async = true;
    document.body.appendChild(script);

    // Zendesk 초기화
    window.zESettings = {
      webWidget: {
        // Zendesk 티켓 발행 버튼 클릭 시 동작할 함수 지정
        onHelpCenterSubmit: function(data) {
          // 티켓 발행 처리 로직 작성
          // data 객체를 통해 사용자 입력 정보에 접근 가능
          console.log("티켓 발행 처리:", data);
        }
      }
    };
  }, []);

  return (
    <div>
      <h1>Zendesk Embeddables 예제</h1>
      <button onClick={() => window.zE.activate()}>티켓 발행</button>
    </div>
  );
}

export default ZendeskTicketForm;

• 필요데이터
  • Zendesk token
  • Zendesk admin ID