웹 위젯 구성을 마치면 웹사이트나 헬프 센터에 설치하고 고객에게 제공할 수 있습니다. 웹 위젯이 표시되는 위치와 방식을 정확히 제어하려면 웹 위젯을 임베드할 수도 있습니다.
이 문서에서 다루는 주제는 다음과 같습니다.
웹사이트에 웹 위젯 설치하기
웹사이트에 웹 위젯을 설치하려면 HTML </body> 닫기 태그 앞에 코드 스니펫을 붙여 넣어야 하므로 웹사이트의 코드에 대한 기본적인 이해가 필요합니다.
다음 동영상은 웹사이트에 메시징을 추가하는 방법을 보여줍니다.
웹사이트에 메시징 추가하기[1:40]
웹사이트에 웹 위젯을 추가하려면 다음과 같이 하세요.
- 관리 센터의 사이드바에서
채널을 클릭한 다음 메시징 및 소셜 > 메시징을 선택합니다. - 설치하려는 위젯의 이름을 클릭합니다.
- 아래로 스크롤한 다음 설치를 클릭하여 확장합니다.
- 코드 스니펫 프레임 아래쪽에 있는 복사 아이콘(
)을 클릭합니다. - 위젯을 추가하려는 웹 페이지의 소스 코드에서 HTML </body> 닫기 태그 앞에 코드 스니펫을 붙여 넣습니다. 위젯을 표시하려는 모든 웹 페이지에 코드를 추가합니다.
- 다른 사람(예를 들어 개발자)에게 코드를 보내려면 팀원에게 코드를 이메일로 보내기를 클릭합니다.
- 웹 위젯이 표시될 수 있도록 방화벽이 구성되어 있도록 합니다.
헬프 센터에 웹 위젯 설치하기
기술 지원을 받을 필요 없이 한 번의 클릭으로 간단하게 헬프 센터에 위젯을 설치할 수 있습니다. 웹 위젯을 설치하려면 헬프 센터를 만들고 활성화해야 합니다.
헬프 센터에 웹 위젯을 추가하려면 다음과 같이 하세요.
- 관리 센터의 사이드바에서 채널을 클릭한 다음 메시징 및 소셜 > 메시징을 선택합니다.
- 설치하려는 위젯의 이름을 클릭합니다.
- 아래로 스크롤한 다음 설치를 클릭하여 확장합니다.
-
헬프 센터에 자동으로 웹 위젯 임베드 옆의 확인란을 클릭합니다.
헬프 센터를 만들고 활성화하지 않은 경우 이 옵션이 표시되지 않습니다.
-
저장을 클릭합니다.
헬프 센터의 모든 페이지에 웹 위젯이 추가됩니다.
웹 위젯 임베드하기
임베디드 모드는 웹 위젯을 고정된 위치의 플로팅 오버레이로 표시하는 대신 페이지의 특정 HTML 콘테이너 안에 배치합니다. 위젯은 선택한 컨테이너의 크기에 자동으로 맞춰지므로 위젯이 표시되는 위치와 방식을 정확하게 제어할 수 있습니다. 예를 들어, 이는 대화 목록과 메시지가 나란히 표시되는 분할 보기와 같은 고급 레이아웃에 유용합니다.
임베디드 모드를 사용하려면 JavaScript 임베드 API 호출을 통해 위젯의 모드와 대상 컨테이너를 둘 다 지정해야 합니다.
임베디드 모드를 사용하려면 먼저 위젯의 기본 자동 렌더 동작을 사용 중지하세요.
window.zEMessenger = {
autorender: false
}
그런 다음 컨테이너의 ID나 클래스를 지정하여 위젯이 표시될 위치를 알려주세요.
zE('messenger', 'render', {
mode: 'embedded',
widget: {
targetElement: '#messaging-container'
}
});
이제 웹 위젯이 #messaging-container 요소 안에 표시되며 CSS에서 정의한 크기와 위치를 따릅니다.
자세한 내용은 개발자 문서에서 웹 위젯 임베디드 모드를 참조하세요. 더 많은 예시는 Zendesk 위젯의 임베디드 모드를 참조하세요.