티켓 알림 및 헬프 센터 문서 알림을 포함하여 Zendesk에서 보내는 모든 이메일 알림은 이메일 기본서식으로 제어됩니다. 기본서식에는 HTML 이메일과 일반 텍스트 이메일 둘 다 있습니다. 각 이메일에 두 형식이 모두 포함됩니다. 최종 사용자가 사용하는 이메일 클라이언트의 기본 설정에 따라 표시되는 버전이 결정됩니다.
몇 가지 간단한 스타일 변경을 통해 브랜드를 반영하도록 HTML 기본서식을 사용자 지정할 수 있습니다. 이메일의 텍스트 버전에서 정보를 수정할 수도 있습니다.
관련 문서:
이메일 기본서식 편집하기
고객에게 보내는 이메일 알림의 디자인을 사용자 지정할 수 있습니다. 알림에는 HTML 기본서식과 일반 텍스트 기본서식이 있습니다.
Enterprise 플랜 사용자는 이메일을 공개적으로 배포하기 전에 샌드박스에서 이메일을 변경하고 변경 내용을 테스트할 수 있습니다(샌드박스에서 변경 내용 테스트하기 참조).
- 사용자 프로필 사진 표시
- 티켓 링크 추가 또는 제거
- 이메일 알림에서 구분 기호 추가 및 제거하기
-
유동 마크업 사용참고: 유동 마크업은 티켓 알림의 매크로, 트리거 및 자동화에서 지원되지만 팔로워에게 보내는 이메일 알림 등 헬프 센터 문서 알림에는 지원되지 않습니다. 유동 마크업을 사용하여 이메일 알림의 모양을 변경하는 대신 여러 브랜드와 함께 이메일 기본서식 사용하기에 대한 단계를 따를 수 있습니다.
HTML 기본서식 편집하기
HTML 기본서식에서 HTML과 CSS를 편집하여 HTML 이메일의 모양을 변경할 수 있습니다.
이 섹션에서는 다음과 같은 주제를 다룹니다.
HTML 이메일의 모양 변경하기
HTML 기본서식은 DIV 태그와 시스템 자리 표시자로 구성되어 있습니다.
자리 표시자는 이메일에 대부분의 콘텐츠를 제공합니다.
-
{{content}}는 필수로 삭제될 수 없습니다. -
{{delimiter}}는 알림에 이메일 구분 기호를 사용하는 경우에만 필수입니다. -
{{styles}}및{{attributes}}는 향후 사용을 위한 것으로 종종 시스템에서 오른쪽에서 왼쪽으로 쓰는 로캘을 지원하기 위한 스타일 및 속성을 삽입하기 위해 사용됩니다. -
{{footer}}는 선택 사항입니다.
DIV 태그는 콘텐츠에 CSS 스타일을 적용합니다. CSS 스타일을 추가하거나 수정하여 이메일 전체, 구분 기호 또는 바닥글의 디자인을 변경할 수 있습니다.
텍스트 색을 변경하는 경우에는 접근 가능성을 위해 충분한 색 대비를 사용하세요. 웹 콘텐츠 접근성 가이드라인(WCAG) 권장 사항을 따르고 WebAIM 색 대비 확인기와 같은 도구를 활용하여 텍스트와 배경 간의 대비를 확인하세요,
- 관리 센터의 사이드바에서
채널을 클릭한 다음 Talk 및 이메일 > 이메일을 선택합니다. - 이메일 기본서식 섹션에서 필요에 따라 HTML 기본서식을 수정합니다.
표준 기본서식 자리 표시자를 사용하려면 자리 표시자 이름을 입력한 다음 표시되는 사용 가능한 옵션 중에서 선택하면 됩니다.
- 저장을 클릭합니다.
다음 예는 바닥글의 글꼴 색을 청록색으로 변경하는 방법입니다.
...
<div style=" color: #009966;
margin: 10px 0 14px 0;
padding-top: 10px;
border-top: 1px solid #eeeeee;" >
{{footer}}{{footer_link}}
</div>
...
다음 스타일 선언으로 글꼴 색이 청록색에 해당하는 16진수 값으로 설정됩니다.
color: #009966;
a:hover {color:#FF00FF;}. 인라인 CSS에서는 CSS 가상 클래스가 지원되지 않으며 Gmail과 같은 주요 이메일 클라이언트는 인라인이 아닌 모든 CSS를 제거합니다. 회사 로고와 같은 이미지를 기본서식에 추가하려면 해당 이미지를 참조하는 IMG 태그를 삽입하세요. 예:
<img src="http://YOURWEBSITE.com/logo.png"/>
<a href="http://YOURACCOUNT.zendesk.com"><img src="http://YOURWEBSITE.com/logo.png"></a>
- Mozilla 개발자 네트워크상의 CSS 포털
- 헬프 센터 CSS 쿡북
HTML 이메일 사용자 지정 가이드라인
HTML 기본서식을 광범위하게 사용자 지정할 수 있지만 Zendesk는 사용자 지정 코딩을 지원하지 않는다는 점에 유의하세요. 2022년 6월 15일 또는 그 이후에 계정을 만든 경우에는 기본서식이 HTML5를 준수합니다. 지원되는 HTML5 태그에 대해 자세히 알아보려면 www.w3docs.com에서 HTML5 요소 참고자료를 참조하세요.
HTML과 CSS가 서로 다른 웹 브라우저와 이메일 클라이언트에서 렌더링되는 방식으로 인해 HTML 이메일을 디자인하는 일이 어렵습니다. 특정 유형의 서식은 스팸으로 인식될 수도 있습니다.
- CSS3 스타일 선언을 사용하지 마세요. CSS1 또는 2를 사용하세요.
- DIV 섹션을 더 추가하지 마세요.
- 텍스트 서식을 최소한으로 유지하세요. 굵은 텍스트가 많으면 스팸 필터가 실행될 수 있습니다.
- 이미지를 너무 많이 추가하거나(또 다른 스팸 필터 실행 요소) 사용하는 이미지 크기를 줄이지 마세요.
- 모든 이미지에 ALT 태그를 사용하세요. 이 태그는 사용자가 이미지 표시를 허용하기 전에 이미지에 대한 설명을 표시합니다.
- 이미지 너비와 높이를 알고 있다면 정의하세요. 그렇게 하면 이메일 클라이언트에서 이미지를 다운로드하기 전에 이메일 레이아웃에 이미지 공간을 예약합니다.
- 모든 이메일 클라이언트가 배경 이미지를 지원하는 것은 아니므로 정보 또는 기능 디자인을 위해 배경 이미지에 의존하지 마세요.
- 종료된 Zendesk 계정에 있는 이미지에 링크하지 마세요. 등록한 사용자 및 로그인한 사용자가 아닌 사람이 이메일을 받으면 이미지가 깨지게 됩니다.
텍스트 기본서식 편집하기
사용자가 HTML 형식으로 된 이메일 메시지를 읽지 않기로 선택할 때 텍스트 이메일 기본서식이 사용됩니다. 기본서식은 다음 두 가지 시스템 자리 표시자로 구성됩니다.
{{content}}
{{footer}}
{{content}} 자리 표시자는 텍스트 구분 기호, 티켓 제목, 비즈니스 규칙(트리거, 자동화 또는 매크로)에서 생성된 텍스트 및 티켓 댓글을 삽입합니다. {{footer}} 자리 표시자는 선택 사항입니다. 원하면 제거할 수 있습니다. 자세한 내용은 시스템 자리 표시자 이해하기를 참조하세요.
{{delimiter}} 자리 표시자는 필수가 아닙니다. {{content}} 자리 표시자는 구분 기호 텍스트를 포함합니다.이메일에 줄을 추가하려면 기본서식에 추가하세요.
Thanks for contacting MondoCam Support!
{{content}}
{{footer}}
텍스트 기본서식을 편집하려면 다음과 같이 하세요.
- 관리 센터의 사이드바에서 채널을 클릭한 다음 Talk 및 이메일 > 이메일을 선택합니다.
- 이메일 기본서식 섹션으로 내려갑니다.
- 필요에 따라 텍스트 기본서식을 수정합니다.
- 페이지 아래쪽에 있는 저장을 클릭합니다.
시스템 자리 표시자 이해하기
알림 이메일에 있는 콘텐츠 대부분은 Zendesk 시스템에서 동적으로 생성된 것입니다. 동적으로 생성된 콘텐츠는 이메일 기본서식에 자리 표시자로 나타납니다. {{footer}} 등의 자리 표시자는 다음과 같이 이중 중괄호 안에 들어갑니다.
자리 표시자는 구분 기호 텍스트, 이메일 콘텐츠 및 바닥글을 삽입합니다.
{{delimiter}}- “##- 이 줄 위에 답장을 입력하세요 -##”라는 줄을 표시합니다. 시스템은 구분 기호를 사용하여 이전 콘텐츠와 새 콘텐츠를 구분합니다. 이메일에 답장을 하면 답장의 새 콘텐츠가 티켓에 댓글로 추가됩니다. 이메일 구분 기호를 사용하는 경우에는 HTML 기본서식에서 이 자리 표시자가 필수입니다. 이메일에서 구분 기호 텍스트 사용자 지정하기를 참조하세요.
{{content}}- 티켓 댓글 및 사용자 프로필 사진을 포함할 수 있는 이메일 콘텐츠를 표시합니다. 콘텐츠는 트리거, 자동화 또는 귀하의 계정에서 이메일을 보내는 그 밖의 모든 것에서 정의됩니다. 티켓 업데이트 및 알림을 위한 트리거 만들기 및 관리하기를 참조하세요.
{{quoted_content}}- 선택 사항으로, 메시지 기록을 표시합니다. 인용 콘텐츠는 보통 사용자의 이메일 애플리케이션에서 축소되지만 사용자가 확대할 수 있습니다. 예를 들어 Gmail에서 사용자가 줄임표(…)를 클릭합니다. 간소화된 이메일 스레딩 이해하기를 참조하세요.
{{footer}}- 선택 사항으로, YourZendeskName의 이메일 서비스입니다.”라는 줄을 표시합니다. 상담사에게 보내는 이메일에서는 상태와 요청자 같은 티켓 특성도 표시합니다. 최종 사용자에게 보내는 이메일에는 특성이 표시되지 않습니다.
{{footer_link}}- 선택 사항으로, “Zendesk에서 전송했습니다”라는 줄을 표시합니다. Zendesk를 누르면 https://www.zendesk.com으로 이동합니다.
{{styles}}- 선택 사항으로, 향후 사용을 위한 것으로 현재, 시스템이 이 자리 표시자를 사용하여 오른쪽에서 왼쪽으로 쓰는 로캘을 감지하는 경우 스타일을 삽입합니다.
{{attributes}}- 선택 사항으로, 향후 사용을 위한 것으로 현재 시스템이 이 자리 표시자를 사용하여 오른쪽에서 왼쪽으로 쓰는 로캘을 감지하는 경우 속성을 삽입합니다.
0 댓글
댓글을 남기려면 로그인하세요.