사용자 지정 페이지는 Guide Enterprise 플랜에 추가된 기능입니다. 이 기능을 통해 헬프 센터에 고유한 기능과 개인화된 웹 페이지를 추가할 수 있으며사용자 지정 테마의 확장 기능입니다.
이 기능 데모에서는 최종 사용자가 VIP 회원 가입을 하고 조직을 위한 맞춤 지원을 받는 데 사용할 수 있는 개발된 단일 페이지 앱을 찾아봅니다.
이 단일 페이지 앱 예는 프론트엔드에 Typescript, 백엔드에Node.js를 사용하여React를 사용하여 개발되었습니다. 또한 Tailwind CSS는Nodemailer 와 함께 스타일링 용도로 사용되어 성공적으로 가입한 사용자에게 확인 이메일을 보내도록 프로세스를 구성했습니다.
React 애플리케이션이므로 이 예에서는 Webpack을 단일 파일로 컴파일하는 데 필요한 단계를 거칩니다. 그런 다음 헬프 센터 테마에 파일을 임베드하여 업로드합니다. 각 단계에 대한 아래 섹션을 참조하세요.
- 개발- Typescript 및 Node.js와 함께 React를 사용하여 사용자 지정 페이지를 개발하는 방법
- 번들- 사용자 지정 페이지를 번들로 포함하도록 Webpack을 구성하는 방법
- Embed- 프로젝트를 테마에 임베드하여 헬프 센터에 게시하는 방법
개발
사용자 지정 페이지를 사용하면 원하는 웹 기술 스택으로 페이지를 개발할 수 있습니다. 인기 있는 기술 스택 기본 설정은 백엔드 개발을 위해 Node.js와 함께 React.js를 사용하는 것입니다. 선택한 기술과 마찬가지로 각 코드에는 구현해야 할 고유한 뉘앙스와 사양이 있습니다. 이러한 기술적 고려 사항에 대한 개요는 아래를 참조하세요.
React
사용자 지정 페이지는 자체 기능으로 구축되므로Create React 앱은 단일 페이지 애플리케이션 프레임워크를 사용하는 훌륭한 개발 선택입니다.
위의 VIP Support 가입 페이지 데모에서는 두 가지 요청을 합니다. 한 번의 요청으로 백엔드 인증을 위한 보안 토큰이 생성됩니다. 다른 요청은 실제 제출 데이터 요청을 하는 것입니다.
예제 사용자 지정 페이지는 Zendesk 내의 사용자 프로필 및 조직에 변경 내용을 만듭니다. 사용자 지정 페이지에서도 이러한 종류의 요청을 하는 경우에는 요청에 앞서 프런트엔드에서 해당 데이터의 유효성을 검사하는 방법을 구현하세요. 백엔드 내에서 요청을 처리하는 데이터 유효성 검사가 있어야 하지만, 특히 이 데이터가 양식과 같은 사용자 입력에서 오는 경우 프론트엔드에서 유효성 검사를 실행하면 정리된 소모성 데이터만 Zendesk 인스턴스에 도달하도록 할 수 있습니다. .
또한 사용자 지정 페이지는 헬프 센터의 한 부분일 뿐입니다. 사용자 지정 페이지에 사용되는 모든 기능, 브랜딩 또는 스타일은 헬프 센터 전체에서 일관성을 유지해야 합니다.
고려해야 할 몇 가지 디자인 측면은 다음과 같습니다.
- 인증: 어떤 유형의 사용자가 이 페이지에 액세스할 수 있나요? 상담원, 인증된 모든 사용자, 또는 모든 사용자?
- 탐색:
- 사용자 지정 페이지에 헤더나 탐색을 개발할 필요가 없습니다. 계정의 Guide 팀이 탐색 및 헤더를 설정합니다. 사용자 지정 페이지가 테마에 임베드되므로 현재 테마의 헤더와 탐색도 이 페이지에 적용됩니다.
- 헬프 센터에서 이 페이지가 어디에 위치할지 고려하세요. 헬프 센터에서 기능을 추출하는 것과 마찬가지로 사용자 지정 페이지 자체도 기본 헬프 센터 스키마 밖에 있습니다. 사용자는 홈 페이지와 같이 헬프 센터에 포함된 미리 정의된 페이지나 헬프 센터 기본서식에 임베드된 링크를 통해 이러한 페이지에 액세스할 수 있습니다. 사용자 지정 페이지의 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 웹 토큰 소개.
예제 앱은 아래의 인증을 사용합니다.
- 양식 제출 API에 대한 요청에 권한을 부여하기 위해 JWT 토큰을 요청하는 프런트 엔드의인증 엔드포인트입니다.
- jsonwebtoken 을 사용하여 JWT 토큰을 생성하고 확인하는 인증 모듈입니다.
구축하는 애플리케이션에 따라 CORS(교차 출처 리소스 공유) 정책을 고려해야 합니다. 클라이언트 측으로부터 요청을 받는 라우트가 CORS를 사용하도록 설정했는지 확인합니다. 어느 도메인에서 요청을 보내는지 안다면 이러한 도메인을 명시적으로 지정하세요. 그렇지 않은 경우에는 와일드카드 "*"를 사용합니다. CORS에 대한 자세한 내용은 Mozilla 웹사이트에서 교차 출처 리소스 공유(CORS).
번들
사용자 지정 페이지의 개발이 완료되면 웹팩을 사용하여 React 앱을 번들로 묶으세요. 모든 사용자 지정 페이지는 테마 내에 임베드되어야 하므로 사용자 지정 페이지를 하나의 html 파일로 컴파일합니다. Create React 앱은 자체 번들 및 최적화와 함께 제공됩니다. 하지만 목표는 index.html예를 들어 자체웹팩 구성이 있어 이 프로세스를 간소화할 수 있습니다.
임베드
애플리케이션을 구축한 후 헬프 센터에 임베드하세요. 새로 만든 빌드 디렉토리로 이동합니다. 여기에서 새 사용자 지정 페이지를 만드는 데 필요한 몇 가지 파일을 찾을 수 있습니다.
index.html- static/css/bundle.min.css
- static/bundle.min.js
다음 index.html파일은 사용자 지정 페이지에 넣을 코드입니다. 프로젝트에 대해 만들어진 JavaScript 및 CSS에 액세스합니다. 먼저 JavaScript 및 CSS 파일을자산으로 헬프 센터에 업로드합니다. 그런 다음 index.html파일을 사용자 지정 페이지에 넣고 자산의 파일 경로를 조정하세요.
아래에서 코드 편집기에 표시되는 예를 찾아보세요.
완료되면 사용자 지정 페이지를 게시합니다. 헬프 센터에서 콘텐츠를 관리하는 데 대한 추가 리소스는 Guide 리소스.
번역 고지 사항: 본 문서는 콘텐츠에 대한 기본적인 이해를 제공하기 위해 자동 번역 소프트웨어를 사용하여 번역되었습니다. 정확한 번역을 제공하고자 합당한 노력을 기울였으나 Zendesk는 번역의 정확성을 보장하지 않습니다.
번역된 문서에 포함된 정보의 정확성과 관련하여 질문이 있으시면 문서의 공식 버전인 영문 버전을 참조하시기 바랍니다.
0 댓글
댓글을 남기려면 로그인하세요.