이 문서는 Zendesk 헬프 센터 에 개인화된 고유한 기능을 통합하는 데 도움이 됩니다. Knowledge Enterprise 플랜에사용자 지정 페이지를추가하는 프로세스를 안내하고 React.js 및 Node.js와 같은 기술을 사용하여 사용자 지정 페이지를 개발, 번들 및 임베드하는 방법에 대해 설명합니다.
예를 들어 기존 헬프 센터 디자인과 잘 어울리는 사용자 지정 VIP Support 가입 페이지를 만들어 일관되고 맞춤화된 사용자 경험을 제공할 수 있습니다.
이 단일 페이지 앱 예에서는 프론트엔드에 TypeScript와 함께React를사용하고 백엔드에Node.js를사용합니다. Tailwind CSS는 앱에 스타일을 지정하고,Nodemailer는성공적으로 가입한 신규 사용자의 이메일 확인을 관리합니다.
React 앱으로 작업하므로 이 예에서는 Webpack을 단일 파일로 컴파일하는 단계를 다룹니다. 헬프 센터 테마에 파일을 임베드하여 업로드합니다. 각 단계 집합에 대해 아래 섹션을 따르세요.
- 1단계: TypeScript 및 Node.js와 함께 React를 사용하여 사용자 지정 페이지 개발
- 2단계: 사용자 지정 페이지를 번들로 묶도록 Webpack 구성
- 3단계: 프로젝트를 테마에 임베드 및 연동하여 헬프 센터 에 게시
백엔드와 연동하거나 TypeScript를 사용하지 않으려면상용구를확인하여 자체 단일 페이지 앱을 시작하세요.
1단계: TypeScript 및 Node.js와 함께 React를 사용하여 사용자 지정 페이지 개발
사용자 지정 페이지를 통해 원하는 웹 기술 스택을 사용하여 개발할 수 있습니다. 많은 개발자들이 백엔드 개발을 위해 Node.js와 함께 React.js를 선호합니다. 각 기술마다 미묘한 차이와 사양이 있습니다. 다음과 같은 기술적 사항을 고려하세요.
React
이 프레임워크는 단일 페이지 애플리케이션을 지원하므로 사용자 지정 페이지에React 앱 만들기를사용하세요. 위의 VIP Support 가입 페이지에서는 두 가지 요청 즉, 백엔드 인증을 위한 보안 토큰을 생성하는 요청과 실제 데이터를 제출하는 요청이 있습니다.
예제 사용자 지정 페이지는 Zendesk 내에서 사용자 프로필 및 조직을 변경합니다. 페이지에서 비슷한 요청을 하는 경우에는 요청을 보내기 전에 프런트엔드의 데이터를 확인하세요. 백엔드 유효성 검사가 중요한 역할을 하지만 프론트엔드 유효성 검사는 특히 사용자 입력으로부터 깨끗한 데이터를 보장합니다.
사용자 지정 페이지는 헬프 센터 의 한 부분일 뿐입니다. 기능, 브랜딩 또는 스타일이 전체적으로 헬프 센터 와 일치하도록 하세요.
다음과 같은 디자인 측면을 고려하세요.
-
인증: 상담사, 인증된 모든 사용자 또는 모든 사용자 중에서 이 페이지에 액세스할 수 있는 사람을 지정합니다.
-
탐색:
-
사용자 지정 페이지에서 헤더나 탐색을 개발하지 마세요. 계정의 지식 팀에서 이러한 기능을 설정합니다. 사용자 지정 페이지는 현재 테마의 헤더 및 탐색을 상속합니다.
-
헬프 센터 내에 이 페이지를 적절하게 배치합니다. 기능과 마찬가지로 사용자 지정 페이지는 기본 헬프 센터 스키마 밖에 존재합니다. 사용자는 헬프 센터 기본서식의 링크나 홈 페이지와 같은 미리 정의된 페이지를 통해 이러한 페이지에 액세스합니다. 사용자 지정 페이지 URL은 다음과 같습니다.
https://{domain_name}/hc[/{locale}]/p/{page_name}
-
-
페이지 스타일: 헬프 센터 테마에 맞는 스타일 라이브러리를 선택하세요. 글꼴 및 색 팔레트가 기존 테마와 일치하는지 확인하세요.
-
이미지 처리: 사용자 지정 페이지를 수동으로 구성하고 번들로 제공하므로 이미지나 자산을 로컬에 저장하는 기능이 작동하지 않습니다. 임베드하기 전에 헬프 센터 테마에 업로드하세요. 단계별 안내는 헬프 센터에 자체 테마 자산 사용하기
Node.js
사용자 지정 페이지는 방문자를 위한 개인화된 경험을 구축할 수 있는 빈 캔버스를 제공합니다. Node.js 및 Express와 같은 도구를 사용하여 기존 시스템 및 데이터베이스에 직접 연결할 수 있습니다. 원하는 기술 스택으로 새 서비스를 만들어 헬프 센터 와 연동하여 원활한 사용자 경험을 제공할 수도 있습니다.
예제 앱은 아래 함수를 사용합니다.
-
개발자는 프론트엔드 양식에서 제출한 사용자 및 조직 정보를 받는Express API를만들었습니다.
-
앱이 API 요청을 Zendesk Support 에 보내node-fetch를사용하여 관련 사용자 및 조직을 만들고 업데이트합니다.
-
validator.js를사용하여 양식 제출 데이터의 유효성을 검사합니다.
-
앱은Nodemailer를사용하여 성공적으로 양식을 제출하면 사용자에게확인 이메일 알림을보냅니다.
서버 측 사용자 지정 페이지 서비스를 구축할 때에는 API 라우트를 신중하게 보호하세요. JWT와 같은 도구를 사용하여 요청 인증을 구축하여 애플리케이션을 보호하세요. JWT에 대한 자세한 내용은 JWT 웹사이트에서 JSON 웹 토큰 소개.
예제 앱은 아래 설명된 인증을 사용합니다.
-
개발자는 프런트엔드가 JWT 토큰을 요청하고 양식 제출 API에 대한 요청에 권한을 부여하는 데 사용하는인증 엔드포인트를만들었습니다.
-
인증 모듈은 jsonwebtoken을사용하여 JWT 토큰을 생성하고 확인합니다.
구축하는 애플리케이션에 따라 CORS(Cross-Origin Resource Sharing) 정책을 고려하세요. 클라이언트 측에서 요청을 받는 경로에 CORS가 사용 설정되어 있는지 확인합니다. 요청을 보내는 도메인을 알고 있다면 이러한 도메인을 명시적으로 지정하세요. 그렇지 않은 경우에는 와일드카드를 구성합니다. *. CORS에 대한 자세한 내용은 Mozilla 웹사이트에서 교차 출처 리소스 공유(CORS)
3단계: 사용자 지정 페이지를 번들로 묶도록 Webpack 구성
사용자 지정 페이지 개발을 완료한 후에는 Webpack을 사용하여 React 앱을 번들로 묶으세요. 테마는 모든 사용자 지정 페이지를 임베드해야 하므로 사용자 지정 페이지를 단일 HTML 파일로 컴파일합니다. Create React App에는 자체 번들링 및 최적화 기능이 포함되어 있습니다. 하지만 index.html파일의 예에서는 자체웹팩 구성을사용하여 이 프로세스를 단순화합니다.
4단계: 프로젝트를 테마에 임베드 및 연동하여 헬프 센터 에 게시
애플리케이션을 구축한 후 헬프 센터 에 임베드하세요. 새로 만든 빌드 디렉토리로 이동합니다. 새 사용자 지정 페이지를 만드는 데 필요한 몇 가지 파일이 있습니다.
index.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
The index.html파일에는 사용자 지정 페이지에 넣은 코드가 포함되어 있습니다. 프로젝트에 대해 만든 JavaScript 및 CSS에 액세스합니다. 먼저 JavaScript 및 CSS 파일을자산으로 헬프 센터 에 업로드합니다. 그런 다음 에서 코드를 복사합니다. index.html파일을 사용자 지정 페이지에 추가하고 자산을 가리키도록 파일 경로를 조정합니다.
코드 편집기에 어떻게 나타나는지 아래 예를 참조하세요.
완료한 후 사용자 지정 페이지를 게시합니다. 헬프 센터 에서 콘텐츠를 관리하는 데 대한 추가 리소스는 지식 리소스.
번역 고지 사항: 본 문서는 콘텐츠에 대한 기본적인 이해를 제공하기 위해 자동 번역 소프트웨어를 사용하여 번역되었습니다. 정확한 번역을 제공하고자 합당한 노력을 기울였으나 Zendesk는 번역의 정확성을 보장하지 않습니다.
번역된 문서에 포함된 정보의 정확성과 관련하여 질문이 있으시면 문서의 공식 버전인 영문 버전을 참조하시기 바랍니다.