웹 위젯(클래식)의 고급 사용자 지정

Suite 모두 모든 플랜

빠른 경로: 관리 센터 > 채널 > 클래식 > 웹 위젯

관리자가 관리 센터에서 웹 위젯(클래식)의 구성 요소 초기 구성을 완료하고 개발자와 함께 웹사이트에 웹 위젯(클래식)을 추가한 후에는, 원하는 경우 개발자와 협력하여 웹 위젯(클래식)을 추가적으로 사용자 지정할 수 있습니다.

이 문서는 관리자를 위해 웹 위젯(클래식)에서 수행할 수 있는 고급 사용자 지정에 대한 개요를 제공합니다. 또한 이 문서는 “웹 위젯(클래식)으로 그 밖에 어떤 작업을 할 수 있나요?”라는 질문에 대한 대답으로 활용할 수 있습니다. 관리자가 수행할 수 있는 사용자 지정 과정 및 웹 개발자에게 필요한 개발자 문서에 대해 설명합니다.

웹 개발자 또는 웹사이트 개발에 능숙한 관리자가 이 문서에 설명된 API 설정 및 명령에 대한 전체 문서 또는 추가적인 코드 샘플을 찾으려는 경우에는 개발자를 위한 웹 위젯(클래식) API 문서를 대신 참조하세요.

이 문서에서는 다음과 같은 주제와 위젯 사용자 지정을 다룹니다.

웹 위젯(클래식) 사용자 지정 계획하기
웹 위젯(클래식) API 문서 탐색하기
다른 언어로 위젯 표시하기
양식에 사용자 연락처 정보 미리 표시하기
티켓 첨부 파일 사용 중지하기
시작 관리자 위치 다시 정하기
위젯 위치 오프셋하기
위젯 요소의 색 사용자 지정하기
위젯에서 표시 순서 변경하기
특정 페이지에서 기능 표시하지 않기
위젯 텍스트 사용자 지정하기
문의 양식에 제목줄 추가하기
“원래 문서 보기" 버튼 숨기기
검색 결과 제한하기
헬프 센터 검색 자리 표시자 텍스트 사용자 지정하기
웹 위젯(클래식)에서 Talk의 고급 구성
웹 위젯(클래식)에서 Chat의 고급 구성
최종 사용자에게 여러 연락 옵션 제공하기
여러 웹 위젯(클래식) 요소의 서식 코드

사이트에 웹 위젯(클래식) 추가에 대한 자세한 내용은 웹 위젯(클래식)을 사용하여 웹사이트에 고객 서비스 임베드하기를 참조하세요.

웹 위젯(클래식) 문서의 전체 목록을 보려면 웹 위젯(클래식) 리소스를 참조하세요.

웹 위젯(클래식) 사용자 지정 계획하기

대부분의 Support 관리자는 웹 개발자가 아니며 다른 사람들과 협력하여 웹 위젯(클래식)에 사용자 지정 항목을 구현합니다. 관리자는 웹 위젯(클래식) 및 웹사이트를 직접 사용자 지정하지 않고 회사에서 웹 개발자와 함께 일하거나 계약직 외부 개발자와 협력하여 사용자 지정을 수행합니다.

웹 개발자는 사용자 지정을 수행하는 사람이며 몇 가지 코드(웹 위젯(클래식) API)를 웹 사이트의 HTML에 추가하여 사용자 지정 작업을 진행합니다. 하지만 관리자도 이 작업에 참여합니다. 따라서 관리자는 웹 위젯(클래식)에 수행할 수 있는 사용자 지정이 무엇인지 파악해야 하며 웹 개발자에게 필요한 사용자 지정이 무엇인지 알려야 합니다.

HTML 작업 경험이 있는 관리자는 직접 사용자 지정하여 개발자 역할을 수행하는 경우도 있습니다. 두 경우 모두 웹 위젯(클래식)을 사용자 지정하는 과정에서 관리자는 몇 가지 계획을 세우고 다음과 같은 단계를 수행해야 합니다.

이 문서에 설명된 정보를 검토하여 수행 가능한 고급 사용자 지정이 무엇인지 파악하세요.
회사의 주요 이해 관계자들과 만나서 어떤 색상을 사용하길 원하는지, 어떤 방식으로 웹 위젯(클래식)을 작동하도록 할 것인지 등과 같은 웹 위젯(클래식)의 요구 조건 목록을 만드세요.
관리자 본인이 원하는 사용자 지정 항목의 목록을 미리 준비하세요. 가능한 한 구체적인 내용을 준비하여 웹 개발자가 참조할 수 있는 API 문서에 링크를 포함하세요.
웹 사이트 HTML을 수정하여 웹 위젯(클래식)을 사용자 지정할 개발자에게 준비된 목록을 전달하세요.

웹 위젯(클래식) API 문서 탐색하기

다음은 개발자가 Zendesk 개발자 사이트에서 웹 위젯(클래식) API 문서를 탐색하는 데 도움이 되는 몇 가지 중요한 정보입니다.

업데이트되어 재구성된 개발자 문서 및 API 구문: 웹 위젯(클래식) API 구문이 변경되었으며, 필요한 명령 또는 설정을 보다 쉽게 찾을 수 있도록 웹 위젯(클래식) API 개발자 문서를 재구성했습니다. 이제 제품 채널(헬프 센터, 티켓, Chat 및 Talk) 또는 핵심 설정과 명령별로 문서가 정리되어 있습니다. 자세한 내용은 웹 위젯(클래식) API 개발자 문서를 참조하세요.

새 Chat API: 구 버전의 Chat(Zopim) API가 웹 위젯(클래식) API에 맵핑되는 방식에 대한 자세한 내용은 Chat Widget 구문에서 통합 웹 위젯(클래식) 구문으로 마이그레이션하기를 참조하세요.

다른 언어로 위젯 표시하기

기본적으로 웹사이트에 임베드된 웹 위젯(클래식) 텍스트는 최종 사용자의 브라우저 언어를 기준으로 한 최종 사용자의 언어로 표시됩니다. 예를 들어 최종 사용자의 브라우저 언어가 독일어를 나타내는 de로 설정되어 있으면 위젯이 독일어로 해당 사용자에게 표시됩니다. 위젯이 헬프 센터에 임베드되는 경우에는 헬프 센터 언어 설정에 따라 텍스트가 표시됩니다.

웹 위젯(클래식)은 Zendesk가 지원하는 언어 하위 집합을 지원합니다. 웹 위젯(클래식)에서 최종 사용자의 브라우저 언어가 지원되지 않으면 위젯 언어는 영어로 기본 설정됩니다. 위젯에서 최종 사용자의 브라우저 언어를 가져올 수 없는 경우에는 Zendesk Support에 지정된 언어로 기본 설정됩니다.

setLocale 명령을 사용하여 위젯이 항상 특정 언어로 표시되도록 사용자 지정할 수 있습니다. 이 명령은 위젯 언어만 설정하며 호스트 페이지의 언어를 재설정하지 않습니다.

자세한 내용은 setLocale 명령 개발자 문서를 참조하세요.

양식에 사용자 연락처 정보 미리 표시하기

방문자의 편의를 위해 문의 양식에 방문자의 이름, 이메일 주소 및 전화번호를 미리 표시하여 방문자가 사이트에서 번거롭게 입력하지 않아도 됩니다. 이러한 양식에는 티켓 양식, 채팅 전 양식 및 Chat 오프라인 양식이 포함됩니다. identify 및 prefill 설정을 사용하세요.

prefill 설정을 사용해서 사용자 정보를 읽기 전용으로 설정할 수도 있습니다. 이렇게 하면 Support에서 해당 사용자의 계정이 중복되는 것을 방지할 수 있습니다.

자세한 내용은 identify 및 prefill 설정 개발자 문서를 참조하세요.

티켓 첨부 파일 사용 중지하기

티켓에 첨부 파일을 사용 설정한 경우 사용자는 웹 위젯(클래식)에서 제출하는 티켓에 파일을 기본적으로 첨부할 수 있습니다. 하지만 필요한 경우에는 이 옵션을 사용 중지할 수 있습니다.

자세한 내용은 contactForm 개체의 attachments 설정 개발자 문서를 참조하세요.

시작 관리자 위치 다시 정하기

웹 위젯(클래식)의 기본 위치는 브라우저 오른쪽 아래입니다. 사용자가 웹 위젯(클래식) 시작 관리자를 클릭하면 위쪽 방향으로 확대되어 열립니다.

웹 위젯(클래식) 위치를 페이지마다 다르게 선택할 수 있습니다. 페이지 왼쪽 또는 오른쪽에 배치하거나 페이지 맨 위로 옮길 수 있습니다. 맨 위에 배치하는 경우에는 웹 위젯(클래식)을 클릭하면 아래쪽 방향으로 확대되어 열립니다. position 설정을 사용해서 웹 위젯(클래식)을 페이지 왼쪽 위, 오른쪽 위, 왼쪽 아래 또는 오른쪽 아래에 배치할 수 있습니다.

자세한 내용은 position 설정 개발자 문서를 참조하세요.

위젯 위치 오프셋하기

offset 설정을 사용해서 데스크톱 또는 모바일 기기에서 웹 위젯(클래식)을 재배치할 수 있습니다. 초기 position 설정을 참조 지점으로 사용한 다음 offset 설정을 사용해서 해당 위치에서 웹 위젯(클래식)을 수평, 수직 또는 수직과 수평으로 옮기세요(픽셀 단위).

자세한 내용은 offset 설정 개발자 문서를 참조하세요.

위젯 요소의 색 사용자 지정하기

웹 위젯(클래식) 관리 페이지에서 웹 위젯(클래식)의 전반적인 색상 체계(테마 색상)와 시작 관리자, 문의 버튼 및 헤더의 텍스트에 대해 사용자 지정 색상(테마 텍스트 색상)을 지정할 수 있습니다(웹 위젯(클래식)에서 구성 요소 구성하기 참조).

하지만 특정 요소를 사용자 지정하려면 color 설정을 사용해야 합니다. 다음과 같은 각 웹 위젯(클래식) 구성 요소에 고유한 색상을 선택할 수 있습니다.

시작 관리자
버튼
버튼 텍스트
결과 목록
헤더
문서 링크

웹 위젯(클래식)은 접근성을 위해 WCAG 가이드라인에 따라 대비율을 최소화하는 알고리즘을 사용해서 색상을 자동으로 조정합니다.

웹 위젯(클래식) 요소의 색상 사용자 지정에 대한 자세한 내용은 color 설정 개발자 문서를 참조하세요.

위젯에서 표시 순서 변경하기

웹 위젯(클래식) 핵심 설정 중 하나인 zIndex 설정을 사용해서 새 값을 설정하고 사이트에서 동일한 위치에 표시되는 다른 요소와 비교하여 웹 위젯(클래식)이 표시되는 방식을 변경할 수 있습니다.

자세한 내용은 zIndex 설정 개발자 문서를 참조하세요.

특정 페이지에서 위젯 기능 표시하지 않기

웹 위젯(클래식)에서 문의 양식, Chat, Talk 및 헬프 센터를 사용 설정한 다음 suppress 설정을 사용해서 사이트의 특정 페이지에 제공되는 기능을 필요에 따라 변경할 수 있습니다.

예를 들어 suppress를사용하여 다음과 같은 작업을 수행할 수 있습니다.

일부 페이지에서 헬프 센터 티켓 수 줄이기
다른 페이지에 티켓 수를 줄이지 않는 Chat 또는 문의 양식 사용
로그인하고 확인된 사용자에게 계층적 서비스 수준 제공

자세한 내용은 suppress 설정 개발자 문서를 참조하세요.

위젯 텍스트 사용자 지정하기

아래 표에 있는 웹 위젯(클래식) 구성 요소의 텍스트를 변경하고 헬프 센터 검색 자리 표시자 텍스트를 사용자 지정할 수도 있습니다.

구성 요소	세부 정보
	개체: launcher 설정: chatLabel 설명: Chat이 사용 설정되어 있고 헬프 센터가 켜져 있지 않을 때 시작 관리자 버튼의 텍스트 기본 텍스트: Chat
	개체: launcher 설정: label 설명: 시작 관리자 버튼의 텍스트 기본 텍스트: 고객센터, 지원 또는 피드백(웹 위젯(클래식) 관리 페이지에 정의됨)
	개체: helpCenter 설정: title 설명: 헬프 센터 페이지의 제목 기본 텍스트: 고객센터
	개체: contactForm 설정: title 설명: 문의 양식의 텍스트 기본 텍스트: 메시지 남기기 또는 문의하기(웹 위젯(클래식) 관리 페이지에 정의됨)
	개체: helpCenter 설정: messageButton 설명: 문의 양식를 로드할 때 사용하는 헬프 센터 양식의 버튼 텍스트(20자로 제한됨) 기본 텍스트: 메시지 남기기 또는 문의하기(웹 위젯(클래식) 관리 페이지에 정의됨)
	개체: helpCenter 설정: chatButton 설명: Chat을 로드할 때 사용하는 헬프 센터 양식의 버튼 텍스트(20자로 제한됨) 기본 텍스트: 고객센터, 지원 또는 피드백(웹 위젯(클래식) 관리 페이지에 정의됨)

translations 개체를 사용해서 웹 위젯(클래식)에 표시되는 몇 가지 기본 텍스트를 변경할 수 있습니다. 번역은 시작 관리자, 헬프 센터 및 문의 양식 등과 같은 기능별로 그룹화됩니다.

참고: 로캘 이름에 와일드카드 문자(*)를 지정하면 해당 문자열이 모든 로캘에 적용됩니다.

사용 가능한 언어 코드의 목록은 Zendesk 지원 언어별 언어 코드에서 찾아 볼 수 있습니다.

로캘 번역은 최종 사용자의 브라우저 언어를 기준으로 트리거됩니다. 위젯이 항상 특정 언어로 표시되도록 설정하고 최종 사용자의 브라우저 언어 설정을 무시할 수도 있습니다. 자세한 내용은 다른 언어로 위젯 표시하기를 참조하세요.

문의 양식에 제목줄 추가하기

contactForm 개체가 subject로 설정되어 있으면 기본 문의 양식에 제목 필드가 포함되도록 웹 위젯(클래식)을 설정할 수 있습니다.

고객의 참여를 촉진하기 위해 마련된 기본 문의 양식을 통해 간소화된 사용자 경험을 제공할 수 있습니다. 기본 문의 양식에는 제목줄이 포함되어 있지 않지만 일부 고객의 지원 경험을 향상시키기 위해 제목줄을 추가할 수 있습니다.

자세한 내용은 contactForm 개체의 subject 설정 개발자 문서를 참조하세요.

“원래 문서 보기" 버튼 숨기기

원래 문서 보기 버튼은 웹 위젯(클래식)의 문서와 헬프 센터 자체의 문서를 연결해 줍니다. helpCenter 개체를 사용하고 originalArticleButton 특성을 false로 설정하여 이 버튼을 숨길 수 있습니다.

자세한 내용은 helpCenter 개체의 originalArticleButton 설정 개발자 문서를 참조하세요.

검색 결과 제한하기

helpCenter 개체가 filter로 설정되어 있으면 웹 위젯(클래식)에서 수행한 검색 결과를 카테고리, 섹션 및 레이블을 기준으로 하여 문서로 제한할 수 있습니다. 자세한 내용은 filter 설정 개발자 문서를 참조하세요.

아래로 스크롤하여 몇 가지 추가적인 예를 확인하세요. 이러한 예는 검색 결과를 제한할 수 있는 몇 가지 방법에 대해 설명하며 개발자 문서에는 포함되어 있지 않습니다.

참고: 여러 개의 섹션, 카테고리 또는 레이블을 지정하려면 쉼표를 사용하여 값을 구분하세요(앞뒤에 공백은 필요하지 않음).

특정 섹션으로 검색 결과 제한:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        section: '200154474-Announcements'
      }
    }
  }
};
</script>

특정 카테고리로 검색 결과 제한:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '200053794-General'
      }
    }
  }
};
</script>

여러 카테고리에 있는 콘텐츠로 검색 결과 제한:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '115000669485,201742209' 
      }
    }
  }
};
</script>

특정 레이블이 있는 콘텐츠로 검색 결과 제한:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        label_names: 'orders'
      }
    }
  }
};
</script>

여러 카테고리에 있고 특정 레이블이 있는 콘텐츠로 검색 결과 제한:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '200053794-General',
        label_names: 'Label One,Label Two,Label Three'
      }
    }
  }
};
</script>

헬프 센터 검색 자리 표시자 텍스트 사용자 지정하기

헬프 센터 검색 상자의 기본 자리 표시자 텍스트는 무엇을 도와드릴까요?입니다. 사용자 언어에 맞게 또는 특정 언어로 특정 텍스트가 표시되도록 이 텍스트를 사용자 지정할 수 있습니다. 자세한 내용은 searchPlaceholder 설정 개발자 문서를 참조하세요.

상황별 도움말이 사용 설정되어 있으면 추천 문서가 열리도록 웹 위젯(클래식)을 구성하여 고객이 보다 쉽게 셀프 서비스를 이용하도록 할 수도 있습니다. 자세한 내용은 helpCenter 개체의 setSuggestions 명령 개발자 문서를 참조하세요.

웹 위젯(클래식)에서 Talk의 고급 구성

웹 위젯(클래식)에서 Talk가 작동되는 방식을 정의하는 여러 개의 구성을 만들 수 있습니다. 각 구성에서 필요로 하는 것과 선호하는 것에 따라 웹 위젯(클래식)에서 Talk에 대한 전화 라우팅 및 표시 옵션을 사용자 지정할 수 있습니다.

각 구성에서 사용자 지정할 수 있는 주요 속성은 다음과 같습니다.

웹 위젯(클래식) 콜백 요청을 라우팅할 상담원 그룹
웹 위젯(클래식) 콜백 요청의 우선 순위
웹 위젯(클래식)에 콜백 요청이나 전화 연락, 또는 둘 다 표시
웹 위젯(클래식)에서 예상 대기 시간 표시

웹 위젯(클래식)에 Talk 구성을 한 개만 만든 경우에는 Talk가 사용 가능 상태가 될 때마다 해당 구성이 웹 위젯(클래식)에 기본 구성으로 자동 표시됩니다.

웹 위젯(클래식)에 Talk 구성을 여러 개 만든 경우에는 Talk 별명 설정을 사용해서 원하는 구성을 대상으로 지정할 수 있습니다.

참고: Talk 구성 설정 API 요청에 있는 별명은 공백 및 대문자 등을 비롯하여 Talk 구성에 있는 별명과 정확히 일치해야 합니다.

자세한 내용은 talk 개체의 nickname 설정 개발자 문서와 웹 위젯(클래식)에 대한 Zendesk Talk 설정 구성하기를 참조하세요.

웹 위젯(클래식)에서 Chat의 고급 구성

웹 위젯(클래식)에서 실시간 채팅을 사용하는 경우에는 웹사이트 방문자들이 상담원과 채팅하고 문제 해결에 도움이 되는 파일을 주고 받을 수 있도록 웹 위젯(클래식)에서 Zendesk Chat 기능을 제공할 수 있습니다. 상담원 역시 방문자에게 먼저 메시지를 보내 도움이 필요한지 확인할 수 있습니다.

자세한 내용은 chat 개체 개발자 문서를 참조하세요.

통합된 웹과 채팅 위젯 환경에서는 다음과 같은 설정으로 chat 개체를 세부적으로 사용자 지정할 수 있습니다.

구 버전의 Chat(Zopim) API가 웹 위젯(클래식) API에 맵핑되는 방식에 대한 자세한 내용은 Chat Widget 구문에서 통합 웹 위젯 구문으로 마이그레이션하기를 참조하세요.

최종 사용자에게 여러 연락 옵션 제공하기

최종 사용자가 연락 옵션을 선택하도록 할 수 있습니다. 어떤 페이지에서는 최종 사용자가 선택을 할 수 있고, 다른 페이지에서는 할 수 없도록 웹사이트를 사용자 지정하고자 할 수 있습니다. 정확한 작동 방식은 웹 위젯(클래식)에 Chat 또는 Talk가 구성되어 있는지 여부와 채팅 상담원이 온라인 상태인지 여부에 따라 다릅니다. 필요한 경우 연락 옵션의 기본 텍스트를 사용자 지정할 수 있습니다.

다음은 기본 텍스트 목록입니다.

연락 옵션	기본 텍스트
문의 버튼	문의하기
Chat 레이블(상담원 온라인 상태)	실시간 채팅
Chat 레이블(상담원 오프라인 상태)	채팅을 사용할 수 없습니다.
문의 양식 레이블	메시지 남기기

자세한 내용은 contactOptions 설정 개발자 문서를 참조하세요.

Chat을 통해 연락 옵션 제공하기

웹 위젯(클래식)에 Chat이 구성되어 있고 채팅 상담원이 채팅 가능한 상태이면 최종 사용자가 채팅으로 자동 라우팅됩니다. 하지만 채팅 상담원이 채팅 가능한 상태라도 최종 사용자가 상담원과 채팅할지 또는 문의 양식을 작성할지 선택하도록 설정할 수 있습니다. 최종 사용자가 시작 관리자를 클릭하여 채팅 상담원과 채팅할 수 있지만 채팅이 시작되기 전에 상담원이 로그아웃하면 상담원이 채팅할 수 없다는 내용의 메시지가 최종 사용자에게 표시됩니다.

이는 알려진 문제로서 최종 사용자가 채팅을 선택하면 뒤로 버튼을 사용해서 다른 연락 옵션으로 돌아갈 수 없습니다. 다른 연락 옵션으로 돌아가려면 해당 채팅을 완전히 끝내거나 페이지를 새로 고쳐야 합니다.

Talk를 통해 연락 옵션 제공하기

웹 위젯(클래식)에 Talk 및 다른 연락 옵션이 사용 설정되어 있고 상담원이 온라인 상태이면 연락 옵션이 자동으로 사용 설정됩니다.

여러 위젯 구성 요소의 서식 코드

참고: 이 섹션은 안내 목적으로만 제공되고 있습니다. Zendesk는 코드를 지원하거나 보장하지 않습니다. 또한 Zendesk는 JavaScript, jQuery, CSS 등의 타사 기술에 대한 지원을 제공할 수 없습니다. 문제가 있는 경우 댓글 섹션에 게시하거나 온라인으로 해결 방법을 찾아보세요.

문의 양식, 헬프 센터 및 Zendesk Chat과 관련된 항목은 사이트 HTML의 해당 머리글(contactForm, helpCenter 및 chat) 아래에 포함되어 있고 전체 항목은 별도로 포함되어 있습니다.

예를 들어 아래의 사용자 지정 항목은 다음과 같이 정의됩니다.

오프셋 설정을 사용하여 화면에서의 웹 위젯(클래식) 위치가 변경되었습니다. 오프셋은 전체 항목이므로 자체 입력 항목이 있습니다.
헬프 센터 검색에 원래 문서 보기 버튼이 포함되지 않습니다. 영어의 경우 제목이 “Search for help(도움말 검색)”이고 기타 모든 언어의 경우 제목이 “Have your say(피드백 보내기)”입니다.
Chat이 사용 중지됩니다.
영어의 경우 문의 양식 제목이 “Message us(메시지 보내기)”이고 기타 언어의 경우 “Contact us(문의하기)”입니다.
영어의 경우 시작 관리자 버튼의 텍스트는 “Make a request(요청하기)”이고 기타 언어의 경우 “Get help(도움 받기)”입니다.

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    offset: { horizontal: '400px', vertical: '400px' },
    helpCenter: {
      originalArticleButton: false,
      title: {
        'en-US': 'Search for help',
        '*': 'Have your say'
      }
    },
    chat: {
      suppress: true
    },
    contactForm: {
      title: {
        'en-US': 'SMessage us',
        '*': 'Contact us'
      }
    },
    launcher: {
      label: {
        'en-US': 'Make a request',
        '*': 'Get help'
      }
    }
  }
};
</script>