JavaScript API를 사용하여 Zendesk Chat 위젯을 사용자 지정하려면 어떻게 해야 하나요?

질문

답변

JavaScript API를 사용하면 하나의 사이트 또는 페이지에 현지화된 Chat 위젯에서 일부를 변경하고 사용자 지정할 수 있습니다.

초보자인 경우 가장 먼저 해야 할 일은 페이지에서 Chat 또는 Web Widget 코드 스니펫을 사용하고 있는지 파악하는 것입니다. 이 두 가지 모두 채팅 기능을 제공하며 사이트 방문자에게는 똑같이 보입니다.

다양한 코드 스니펫 이해하기

Chat 코드 스니펫은 다음과 같습니다.

<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?ACCOUNT_KEY";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->

귀하의 계정에 대한 유일한 식별자는 ACCOUNT_KEY입니다. Chat 전용 계정으로 시작한 경우 이것은 가지고 있는 코드 스니펫입니다.

Web Widget 코드 스니펫은 다음과 같습니다.

<script id="ze-snippet" 
src="https://static.zdassets.com/ekr/snippet.js?key=ACCOUNT_KEY"> </script>

ACCOUNT_KEY는 고유 식별자이지만 Chat 계정 키와 다른 형식입니다. Support 계정 내에서 Chat 계정을 시작한 경우에 적용됩니다.

이를 확실히 알 수 있는 유일한 방법은 계정을 열고 위젯 페이지에서 계정의 정확한 위젯 스니펫이 무엇인지 확인하는 것입니다.

몇 가지 사용자 지정 JavaScript 추가하기

JavaScript API를 사용할 때의 가장 일반적인 문제는 이벤트가 올바른 순서로 실행되도록 설정되어 있지 않다는 것입니다. JavaScript는 보통 페이지에서 비동기식으로 실행되므로 적절한 주의를 기울이지 않으면 예를 들어 위젯이 생기기 전에 위젯의 색 변경 명령 등을 실행할 수 있습니다. 따라서 올바른 “준비” 기능을 추가해야 안정적인 사용자 지정이 가능합니다.

Chat 위젯 코드

이 경우 사용자 지정 코드는 다음과 같이 표시됩니다.
```
$zopim(function(){ // Custom code here });
```
이 스니펫은 페이지 로드가 완료될 때까지 기다린 다음 사용자 지정을 추가하기 전에 Chat 위젯의 로드가 완료될 때까지 기다립니다.

웹 위젯 코드

아래 스크립트를 사용하세요.

 zE(function(){ $zopim(function(){ // Custom code here }); });

이 예에서는 코드가 페이지가 로드될 때까지 기다린 다음 Web Widget이 로드되고, 마지막으로 Web Widget이 Chat 기능을 로드할 때까지 기다립니다. Chat이 로드된 이후에는 Chat 위젯에 원하는 사용자 지정 항목을 추가하는 것이 안전합니다.

질문

답변

몇 가지 사용자 지정 JavaScript 추가하기

0 댓글