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