고객센터

[서비스 관리 → 헬프센터 → PC/모바일 템플릿 관리] 메뉴에서 기본 디자인 테마를 제공하며, 고객사의 서비스에 맞게 테마를 수정해 사용하실 수 있습니다.

템플릿 등록 버튼을 누르시면 템플릿을 새로 등록하실 수 있는 창이 표시됩니다. 템플릿 유형을 선택하시면 작성할 스크립트의 종류를 고르실 수 있습니다. (CSS, HTML, JS)

 

 

헬프센터 기본 메인 화면에서 HTML 수정을 통해 ①배경 이미지를 변경하고, CSS 수정을 통해 상단 ②메인 배너의 텍스트 색을 변경하는 예시를 들어보겠습니다.

 

1) CSS

 

Online Contact 서비스 가이드 중 서비스 관리 → 헬프센터 → 템플릿 관리 목차에서 CSS 수정 시 활용할 수 있는 주요한 요소들을 정리하여 제공하고 있습니다. 웹 엔진의 개발자 도구를 통해 헬프센터 페이지의 html 요소를 직접 검사하셔서 원하는 요소의 이름을 찾으시거나, 또는 서비스 가이드의 정리된 표를 참고하실 수 있습니다.

상단 메인 배너 텍스트의 경우 main.css의 .carousel-caption .title_txt (제목), .carousel-caption .sub_txt (소제목)으로 요소 이름이 명명되어 있는 것을 보실 수 있습니다.

 

 

스크립트에서 CSS를 선택하시면 import되어있는 css파일의 목록을 보실 수 있습니다. 수정하고자 하는 요소가 포함된 css의 파일의 경로를 사용하고 계시는 Online Contact의 주소 뒤에 결합해서 페이지를 이동하시면 css 파일의 내용을 열람하실 수 있습니다.  

   - 주소 형식: https://도메인 이름.oc.toast.com/css파일경로

 

 

해당 css 파일의 내용을 그대로 복사해서 편집기에 붙여 넣은 후, 수정하고자 하는 부분을 수정합니다. 본 예시의 경우 .carousel-caption .title_txt, .carousel-caption .sub_txt의 color를 수정했습니다.

 

 

수정이 완료된 css 파일을 저장한 후, 서비스 관리 → 헬프센터 → 파일업로드 관리 탭에서 ①파일 업로드 버튼을 눌러 css 파일을 업로드합니다. 업로드가 완료되면 표시되는 해당 css 파일의 ②파일경로를 복사합니다.

 

 

다시 템플릿 등록으로 돌아가서, CSS 스크립트 선택 시 표시되는 import된 css 목록에 복사한 파일경로를 붙여넣습니다.

   - 형식: @import “파일경로”;

 

 

미리보기 버튼을 누르시면 색상의 변화를 확인하실 수 있습니다.

 

2) HTML

 

HTML 스크립트를 통해 배경 이미지를 변경해보겠습니다.

 

 

템플릿 등록 화면에서 HTML 스크립트를 선택하신 후 변경하고자 하는 헬프센터 메뉴를 선택하시면, 해당 화면에서 변경 가능한 HTML 코드가 표시됩니다.

 

 

헬프센터 메인 화면에 표시할 이미지를 서비스 관리 → 헬프센터 → 파일업로드 관리 탭에서 ①파일 업로드 버튼을 눌러 업로드합니다. 업로드가 완료되면 표시되는 해당 이미지의 ②파일경로를 복사합니다.

 

 

다시 템플릿 등록/수정 페이지로 돌아갑니다. 헬프센터 홈 화면의 메인 배너 이미지를 변경하려고 하는 것이므로, HTML → 메인 → 홈을 차례로 선택해주신 다음 main_banner div 아래의 이미지 경로에 복사한 파일경로를 붙여 넣습니다.

 

 

미리보기 버튼을 누르시면 배경 이미지가 변경된 것을 확인하실 수 있습니다. 요소 변경 후 템플릿 저장을 누르시면 해당 템플릿이 등록되며, 활성화/수정/삭제가 가능합니다.