관리자가 관리 센터 에서 메시징 웹 위젯 구성하고 개발자가 이를 웹사이트에 추가한 후에는 함께 협력하여 위젯의 동작과 사용 환경을 추가로 사용자 지정할 수 있습니다. 이 쿡북은 메시징 웹 위젯 으로 가능한 기능에 대한 개요를 제공하며 사용법을 포함합니다. 자세한 구현 및 추가 코드 샘플은 개발자 문서에서 Web Widget을 참조하세요.

검증된 AI 요약 ◀▼

메시징 웹 위젯 사용자 지정하여 웹사이트에서 고객 상호작용을 개선하세요. 위젯 언어, 다중 대화, 색 테마 등의 옵션을 구성합니다. 원활한 연동을 위해 위젯 표시 대상, 위치 및 임베디드 모드를 제어하세요. 개발자들과 협력하여 JavaScript API를 사용하여 변경 내용을 구현하여 위젯이 특정 요구 사항에 부합하도록 하고 다양한 페이지와 기기에서 사용자 경험을 개선하세요.

관리자가 관리 센터 에서 메시징 웹 위젯 구성하고 개발자가 이를 웹사이트에 추가한 후에는 함께 협력하여 위젯의 동작과 사용 환경을 추가로 사용자 지정할 수 있습니다. 이 쿡북은 메시징 웹 위젯 으로 가능한 기능에 대한 개요를 제공하며 사용법을 포함합니다. 자세한 구현 및 추가 코드 샘플은 개발자 문서에서 웹 위젯 참조하세요.

참고: 이 문서는 메시징 웹 위젯을 사용하는 계정에 적용됩니다. 웹 위젯(클래식) 사용하는 경우에는 웹 위젯(클래식) 의 고급 사용자 지정을 참조하세요.

이 문서에서는 다음과 같은 주제를 다룹니다.

  • 메시징 웹 위젯 사용자 지정 계획하기
  • 위젯 열기 및 닫기
  • 다른 언어로 위젯 표시하기
  • 다중 대화 구성하기
  • 시작 관리자 위치 변경하기
  • 위젯 요소의 색 사용자 지정하기
  • 위젯에서 표시 순서 변경하기
  • 임베디드 모드에서 위젯 표시하기

메시징 웹 위젯 사용자 지정 계획하기

대부분의 Zendesk 관리자는 웹 개발자가 아니며 개발자와 협력하여 메시징 웹 위젯 에 대한 사용자 지정을 구현합니다. 일반적으로 관리자는 관리 센터 에서 메시징 설정을 구성하는 반면 개발자는 메시징 웹 위젯 JavaScript API를 사용하여 위젯 동작을 제어하도록 웹사이트 코드를 업데이트합니다. 예를 들어 위젯이 표시되거나 열릴 때 API가 변경될 수 있습니다.

개발자가 구현을 처리하더라도 관리자는 가능한 것을 이해하고 원하는 경험을 명확하게 전달하는 데 여전히 중요한 역할을 합니다.

메시징 웹 위젯 사용자 지정하려면 보통 다음 단계를 수행해야 합니다.

  1. 이 쿡북을 살펴보고 어떤 사용자 지정 옵션을 사용할 수 있는지 알아보세요.
  2. 이해관계자들과 만나 위젯 경험을 위한 요구 사항을 정의하세요. 예를 들어 언제 나타나야 하는지, 어디에 배치해야 하는지, 사용자 지정 시작 관리자를 사용할지 여부, 사용자를 인증할지 여부 등입니다.
  3. 원하는 변경 내용에 대한 구체적인 목록을 만들고 개발자가 참조할 수 있는 관련 개발자 문서의 링크를 포함합니다.
  4. 개발자가 웹사이트의 HTML 및 JavaScript(그리고 시작 관리자를 배치하거나 사용자 지정 시작 관리자 버튼의 스타일을 지정하기 위한 CSS)를 업데이트하여 변경 내용을 구현하도록 한 다음 주요 페이지와 기기에서 경험을 테스트합니다. 메시징 웹 위젯 페이지에 추가된 iframe 내에서 렌더링되므로 사이트 CSS가 위치 지정에 도움이 될 수 있지만 위젯 UI 자체의 스타일을 지정할 수는 없습니다.
참고: 이 문서에는 여러 JavaScript 예가 포함되어 있습니다. 메시징 웹 위젯 코드 뒤에 배치하여zE 을(를) 사용할 수 있습니다. 
<!-- Messaging Web Widget -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_KEY"></script>

<!-- After the Web Widget code -->
<script>
  zE("messenger:set", "locale", "es");
</script>
사이트가 백그라운드에서 위젯을 로드하는 경우(예를 들어 초기 렌더링 후 스크립트를 로드하는 단일 페이지 앱) 호출하기 전에 위젯이 완전히 로드되도록 하세요.zE(...) .

위젯 열기 및 닫기

메시징 창과 시작 관리자를 언제 사용할 수 있고 언제 열릴지 제어할 수 있습니다. 특정 페이지에만 시작 관리자를 표시하거나, 도움말 버튼을 클릭하는 등의 사용자 작업에 대한 응답으로 메시징을 열고자 할 때 유용합니다. 시작 관리자는 사용자가 메시징을 시작하기 위해 클릭하는 작은 버튼(보통 아래쪽에 있음)입니다. 메시징 창은 사용자가 시작 관리자를 클릭한 후 열리는 확장된 채팅 인터페이스입니다. 사용 가능한 API 특성:
  • show 및hide 시작 관리자의 표시 여부를 제어합니다.
  • open 및close 메시징 창 확장 여부를 제어합니다.

시작 관리자를 숨겨도 다음을 사용하여 메시징 창을 열 수 있습니다.zE("messenger", "open") .

시작 관리자 표시 대상 제어하기:
zE("messenger", "show"); // show launcher
zE("messenger", "hide"); // hide launcher
메시징 창 상태 제어하기:
zE("messenger", "open");  // open messaging window
zE("messenger", "close"); // close messaging window
시작 관리자를 표시하고 메시징 창을 여는 사용자 지정 도움말 버튼의 예:
<button id="help-button" type="button">Help</button>
<script>
  document.getElementById("help-button").onclick = function () {
    zE("messenger", "show"); // ensure launcher is available
    zE("messenger", "open"); // open messaging window
  };
</script>

자세한 내용은 메시징 웹 위젯 표시하기를 참조하세요.

다른 언어로 위젯 표시하기

기본적으로 메시징 웹 위젯 최종 사용자의 브라우저 언어를 사용합니다. 예를 들어 사이트의 언어 선택기와 일치시키기 위해 이 동작을 무시하려면 웹 위젯 임베드 스크립트 바로 뒤에 이 코드를 배치하여 런타임 시 로캘을 설정합니다. 사이트에서 위젯을 비동기식으로 로드하는 경우(예: 단일 페이지 애플리케이션에서)zE 다른 메시징 웹 위젯 명령을 호출하기 전에 사용할 수 있습니다.

<!-- Messaging Web Widget snippet -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_KEY"></script>

<!-- Immediately after the snippet -->
<script>
  zE("messenger:set", "locale", "es");
</script>

지원되는 로캘 및 로캘 코드 목록은 https://support.zendesk.com/api/v2/locales/public.json을 참조하세요. 로캘 설정에 대한 자세한 내용은 로캘 설정을 참조하세요.

다중 대화 구성하기

다중 대화를 사용하면 최종 사용자가 조직과 동시에 두 개 이상의 활성 대화를 할 수 있습니다(예: 서로 다른 문제에 대한 별도의 스레드). 다중 대화 사용하려면 Zendesk 관리자가 이 기능을 사용 설정해야 하며 계정에 Sunshine Conversations 에 대한 액세스 권한이 있어야 합니다. 자세한 내용은 다중 대화 구성하기를 참조하세요.

인증을 사용하는 경우에는 시작 관리자를 표시하기 전에 사용자를 인증하세요. 인증을 지연하면 대화가 익명으로 진행되어 사용자가 이전 대화에 액세스하기가 더 어려워질 수 있습니다. 예:

zE("messenger", "hide");

zE("messenger", "loginUser", function (callback) {
  callback("new-jwt-for-user");
}, function (error) {
  if (error) return;
  zE("messenger", "show");
});

Sunshine Conversations 에 액세스할 수 있는 경우UpdateConversation 엔드포인트에서 각 대화에 대한 사용자 지정 제목과 아바타를 설정할 수 있습니다. 업데이트는 사용자의 현재 메시징 화면에 바로 반영되지 않습니다. 다음에 사용자가 메시징 UI를 다시 로드할 때 나타납니다. 

{
  "displayName": "My conversation",
  "iconUrl": "https://www.someplace.com/image.jpg"
}

사용자는 대화 목록 화면을 사용하여 스레드 사이를 전환할 수 있습니다. 단일 대화 인터페이스를 표시하려는 경우 Sunshine Conversations 는canUserSeeConversationList 대화 목록을 숨기고 가장 최근에 업데이트된 대화만 표시하도록 설정합니다.

{
  "canUserSeeConversationList": false
}

시작 관리자 위치 변경하기

기본적으로 메시징 웹 위젯 시작 관리자는 브라우저 오른쪽 아래에 나타납니다. 시작 관리자를 이동하려면 다음 방법 중 하나를 사용하세요.

  • CSS 위치 지정(간단한 이동에 권장): 위젯 요소(종종 iframe)를 대상으로 하고 업데이트하여 시작 관리자의 배치를 조정합니다.left ,right , 및bottom 오프셋. 브라우저 DevTools를 사용하여 위젯 iframe과 컨테이너를 검사하고 필요한 경우 선택기를 조정합니다.
  • 사용자 지정 시작 관리자 버튼(전체 제어를 위해 권장): 기본 시작 관리자를 숨기고 레이아웃의 아무 곳에나 자체 “도움말” 버튼을 배치한 다음 프로그래밍 방식으로 위젯을 엽니다.

예: CSS를 사용하여 기본 시작 관리자 이동하기

이 예에서는 CSS를 사용하여 기본 시작 관리자를 왼쪽 아래로 이동합니다.
/* Move the Zendesk messaging Web Widget launcher to the bottom left */
/* Use your browser's DevTools to find the widget iframe and adjust the selector as needed */
iframe[title*="Zendesk"],
iframe[aria-label*="Zendesk"] {
  right: auto !important;
  left: 24px !important;
  bottom: 24px !important;
}
참고: 메시징 웹 위젯 이 페이지에 여러 개의 iframe을 추가할 수 있습니다. 예를 들어 시작 관리자와 대화 창이 있습니다. CSS가 시작 관리자 외에 더 많은 영향을 미치는 경우에는 재배치하려는 특정 iframe이나 컨테이너로 선택기를 좁히세요.

예: 기본 시작 관리자 숨기기 및 사용자 지정 도움말 버튼 사용하기

이 예에서는 자체 도움말 버튼을 메시징의 유일한 진입점으로 사용하는 방법을 보여줍니다. 관리 센터 에서 기본 시작 관리자가 표시되지 않도록 사용자 지정 시작 관리자를 구성합니다. 사이트 코드에서zE("messenger","hide") 기본 시작 관리자를 숨긴 상태로 유지합니다. 인증된 메시징(JWT)을 사용하는 경우에는 전화를 걸기 전에 사용자를 인증하세요.open() .

zE("messenger","hide")

document.getElementById("help-button").onclick = function () {
  zE("messenger", "open");
};

예: 사용자 지정 도움말 버튼을 사용하고 기본 시작 관리자를 계속 사용할 수 있도록 하기

이 예에서는 인증이 성공한 후에도 기본 시작 관리자가 표시되도록 허용하면서(예를 들어 사용자가 도움말 버튼으로 다시 이동하지 않고도 나중에 메시징을 다시 열 수 있도록) 도움말 버튼을 사용하여 메시징을 여는 방법을 보여줍니다. 인증에 실패하면 도움말 버튼을 클릭하여 익명으로 위젯을 엽니다.

zE("messenger", "hide");

let authSucceeded = false;

zE("messenger", "loginUser", function (callback) {
  // Fetch or provide a JWT for the signed-in user
  callback("new-jwt-for-user");
}, function (error) {
  if (error) {
    // Auth failed — user can still open messaging anonymously via the Help button
    return;
  }
  authSucceeded = true;
  zE("messenger", "show"); // show launcher after successful auth
});

document.getElementById("help-button").onclick = function () {
  // If auth didn't succeed (or hasn't completed yet), open anonymously
  if (!authSucceeded) {
    zE("messenger", "show");
  }
  zE("messenger", "open");
};

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

관리 센터 의 시작 관리자 스타일 및 브랜드 색을 포함하여 메시징 웹 위젯 의 전체 색 구성표를 구성할 수 있습니다. 웹 위젯 의 이름 및 모양 구성하기를 참조하세요.

개별 UI 요소를 더 세밀하게 제어해야 하는 경우에는 JavaScript를 사용하여 런타임에 위젯 색을 사용자 지정할 수 있습니다. 메시징 웹 위젯 사용자 지정 API를 사용하면
zE("messenger:set", "customization", { theme: ... })

다음과 같은 JavaScript 기반 재정의:

  • 위젯이 로드된 직후 적용
  • 스크립트가 실행되는 페이지에만 적용
  • 스크립트가 제거되거나 사용자가 스크립트 없이 페이지를 방문할 때 관리 센터 색으로 되돌립니다.
자세한 내용은 웹 위젯 색 사용자 지정하기를 참조하세요. 다음은 JavaScript로 테마 색을 업데이트하는 예입니다.
zE("messenger:set", "customization", {
  theme: {
    primary: "#0B5FFF",
    onPrimary: "#FFFFFF",
    message: "#F1F8FF",
    onMessage: "#003366",
    action: "#0B5FFF",
    onAction: "#FFFFFF"
  }
});
Thetheme 개체는 다음과 같은 특성을 지원합니다.
  • primary 및onPrimary 시작 관리자 및 주요 UI 요소
  • message 및onMessage 최종 사용자 버블용
  • businessMessage 및onBusinessMessage 상담사 및 봇 버블용
  • action 및onAction 작업 버튼의 경우
  • background 및onBackground 위젯 배경 및 기본 텍스트 및 아이콘 색

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

메시징 웹 위젯 은zIndex 위젯의 iframe에 적용되는 설정으로 시작 관리자와 위젯 UI가 페이지의 다른 고정 요소(예: 쿠키 배너, 고정 헤더 또는 플로팅 버튼) 위 또는 아래에 표시되는지 여부를 제어할 수 있습니다. 값을 늘리면 위젯이 앞으로 이동합니다. 줄이면 위젯이 다른 요소 뒤로 밀려납니다.

// Set the z-index for the messaging Web Widget iframes (default is typically 999999)
zE("messenger:set", "zIndex", 1000000);

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

임베디드 모드에서 위젯 표시하기

임베드된 모드에서는 페이지에 컨테이너 요소를 만들고 메시징 웹 위젯 해당 컨테이너에 렌더링합니다. 일반적으로 플로팅 시작 관리자를 사용 중지하여 임베디드 환경만 표시합니다. 이 기능은 구석에 떠 있는 시작 관리자 대신 페이지 레이아웃 내부(예를 들어 “지원팀에 문의하기” 페이지) 내에 메시징을 표시하고자 할 때 유용합니다. 이를 통해 다른 고정 UI 요소와 겹치는 것을 피하고 메시징이 표시되는 위치를 더 잘 제어할 수 있습니다.

설정별 자동 렌더링 사용 중지window.zEMessenger.autorender = false 위젯 스니펫을 로드하기 전에

<script>
  window.zEMessenger = {
    autorender: false
  };
</script>

그런 다음 전화render 스니펫이 로드된 후

<!-- Container where the embedded messaging Web Widget will render -->
<div id="embedded-messaging"></div>

<script>
  // Render the widget in embedded mode into the container
  zE("messenger:set", "render", {
    mode: "embedded",
    widget: {
      target: "#embedded-messaging"
    }
  });
</script>
임베디드 모드에서는 메시징이 플로팅 시작 관리자가 아닌 대상 요소 내에서 직접 렌더링되므로 동일한 열기 또는 닫기 동작을 사용하지 않습니다. 컨테이너가 표시되고 충분한 공간이 있는지 확인합니다(예:min-height 높이를 제공하는 레이아웃 영역에 배치) 그렇지 않으면 임베드된 경험이 잘리거나 너무 작게 나타날 수 있습니다. 예:
#embedded-messaging { min-height: 520px; }

자세한 내용은 웹 위젯 임베디드 모드를 참조하세요.

번역 고지 사항: 본 문서는 콘텐츠에 대한 기본적인 이해를 제공하기 위해 자동 번역 소프트웨어를 사용하여 번역되었습니다. 정확한 번역을 제공하고자 합당한 노력을 기울였으나 Zendesk는 번역의 정확성을 보장하지 않습니다.

번역된 문서에 포함된 정보의 정확성과 관련하여 질문이 있으시면 문서의 공식 버전인 영문 버전을 참조하시기 바랍니다.

Zendesk 제공