고객센터

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

템플릿 등록 버튼을 누르시면 템플릿 등록 화면이 표시됩니다. 기본 템플릿/기본 템플릿 (내비게이션 제거) 중 템플릿 유형을 선택하시면 작성하실 스크립트의 종류를 고르실 수 있습니다. (CSS, HTML, JS)

본 FAQ에서는 CSS 변경을 통해 텍스트에 색상/굵기/밑줄/기울임/크기 효과를 적용하고, 폰트를 변경하는 예시를 들어보겠습니다.

 

1) 텍스트에 효과 적용

 

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

 

 

본 예시에서는
① 메인 페이지 상단 제목(CSS 요소명 .carousel-caption .title_txt)에 ‘밑줄’, ‘굵게’, ‘크기 변경’ 효과를 적용,
② 메인 페이지 상단 부제목(CSS 요소명 .carousel-caption .sub_txt)에 ‘색상 변경’, ‘기울임’, ‘크기 변경’ 효과를 적용해보겠습니다.

 

 

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

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

 

해당 css 파일의 내용을 복사해서 편집기에 붙여 넣은 후, 수정하고자 하는 부분을 수정합니다.

본 예시에서는 앞서 언급한 효과들을 적용하기 위해 다음과 같은 항목들을 원래 css 파일에서 수정했습니다. 
   - .carousel-caption .title_txt: font-size를 조정, font-weight, text-decoration, text-decoration-color 요소를 추가 
   - .carousel-caption .sub_txt: font-size와 color를 조정, font-style 요소를 추가

 

 

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

 

 

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

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

 

 

2) 폰트 변경

 

Online Contact 헬프센터 기본 템플릿의 경우 css 파일 중 common.css 파일에서 폰트 관련 정보를 정의하고 있습니다. 앞서 텍스트에 효과를 적용하셨을 때와 마찬가지로 common.css 파일의 경로를 사용하고 계시는 Online Contact의 주소 뒤에 결합해서 페이지를 이동하신 후, css 파일의 내용을 복사해 편집기에 붙여 넣어 주세요.

 

 

css 파일에서 폰트는 위와 같은 형식으로 정의됩니다. (최소한의 항목을 갖춘 기본형이며, css 적용 규칙에 따라 이외 요소들이 더 추가될 수 있습니다.)

헬프센터 템플릿의 폰트를 변경하시기 위해서는 ① 폰트 파일, ② 웹 폰트 링크의 두 가지 방법을 사용하실 수 있습니다.

 

① 폰트 파일

 

 

폰트 파일을 이용하실 때에는, 원하시는 폰트를 내려 받으신 뒤 [서비스 관리 → 헬프센터 → 파일업로드 관리] 탭에서 파일 업로드 버튼을 눌러 폰트 파일을 업로드해주세요. 업로드가 완료되면 표시되는 해당 폰트 파일의 파일 경로를 복사한 뒤, CSS 파일 내부의 폰트 형식의 ‘경로’ 부분에 파일 경로를 붙여 넣으시면 됩니다.

- 형식
   @font-face{
      font-family: '폰트명';
      src: url('파일 경로');
   }

 

② 웹 폰트 링크 사용

 

 

웹 폰트 링크의 경우 폰트 사이트에서 제공하는 코드를 css 파일에 그대로 붙여 넣어 주세요.

 

 

경로 또는 코드를 붙여 넣으신 후 common.css 파일 폰트 목록 하단 언어별 폰트 지정 부분에서, 현재 폰트를 적용하고자 하시는 언어에 해당하는 폰트를 원하시는 폰트로 변경해주세요.

 

 

이후 css 파일을 저장한 후, [서비스 관리 → 헬프센터 → 파일업로드 관리] 탭에서 업로드하고, 파일 경로를 복사해서 템플릿에 반영하면 여러가지 효과가 적용된 헬프센터의 모습을 보실 수 있습니다.