Guide 인터페이스 구성

Guide는 웹 사이트의 Guide 위젯 모양을 결정하기 위해 정의한 기본 브랜딩 및 채널 버튼을 사용합니다.

모범 사례

  • 마케팅 부서와 협력하여 웹사이트를 보완하는 채널 버튼 이미지와 브랜딩 색상을 선택하세요.

  • 웹사이트 전반에 걸쳐 일관된 채널 버튼과 브랜딩을 사용하세요.

  • 웹사이트가 여러 개 있는 경우 각 웹사이트에 고유한 브랜딩을 정의해야 하는지 결정합니다.

  • 기본 브랜딩 색상을 사용하려면 버튼이나 템플릿을 정의할 때 Theme color을(를) 설정하지 마세요.

  • 기본 브랜딩 색상을 재정의하려면 특정 버튼이나 템플릿에 다른 색상을 설정할 수 있습니다. 아래 내용에 유의하세요.

    • 템플릿에 Theme color을(를) 설정하면 그 색상이 브랜드 색상 설정보다 우선 적용됩니다.

    • 템플릿의 Theme color와(과) 버튼의 Theme color 을(를) 설정하면 버튼 색상이 템플릿 및 브랜드 색상 설정보다 우선 적용됩니다.

  • 고급 사용자 정의 스타일의 경우 Guide APIs를 사용하거나 해당 CXone 계정 담당자와 협력하여 사용자 정의 모양을 생성할 수 있습니다.

브랜딩 생성

이 섹션은 제어 릴리스(CR)의 제품 또는 기능에 관한 내용입니다. CR 그룹 소속이 아니거나 자세한 정보를 원하시면, CXone 계정 담당자에게 문의하십시오.

브랜딩을 통해 템플릿, 버튼, 능동적 제안에 기본적으로 사용할 색상을 설정합니다. Guide은(는) 필요에 따라 사용자 정의할 수 있는 Default 브랜딩을 제공합니다. 필요한 경우 여러 개의 브랜딩을 만들 수 있습니다. 예를 들어 여러 웹사이트에 가이드 가이드 템플릿을 제공하려는 경우 각 웹사이트마다 고유한 브랜딩을 사용할 수 있습니다. 템플릿이나 능동적 제안을 표시하기 위한 규칙을 정의할 때 Guide Set Branding 작업을 사용하여 사용할 브랜딩을 결정합니다.

  1. 앱 선택기 를 클릭하고 선택합니다.Guide.

  2. Branding을(를) 클릭합니다.

  3. New Branding을(를) 클릭합니다.

  4. Branding Title에 대한 고유한 브랜드 이름을 입력합니다.

  5. Theme Color을(를) Guide 위젯에 사용할 기본 색상으로 설정합니다. 16진수 값을 입력하거나 색상 드로퍼를 클릭하여 색상을 선택하는 방식으로 색을 설정합니다.

    Theme Color이(가) 사용되는 대상:

    • 헤더 배경 색상.

    • 최소화 버튼.
    • 채널 버튼 배경.

    이것은 다음에 해당되지 않을 경우에 사용됨:

    • 채널 버튼으로 브랜딩 색상을 재정의하는 테마 색상을 설정함.

    • 템플릿으로 브랜딩 색상을 재정의하는 테마 색상을 설정함.

    • 기본 설정 외에 추가 브랜딩 기본 설정을 지정함. 예를 들어, 능동적 제안에 대한 버튼 색상을 설정하는 경우.

  6. Guide 위젯에 표시되는 텍스트에 사용할 색상을 Font Color(으)로 설정합니다. 이 색상은 헤더의 텍스트와 최소화 및 뒤로 버튼에 표시되는 화살표에 사용됩니다.

    시각 장애인을 지원하기 위해 Theme Color와(과) Font Color 사이의 대비율을 4.5:1로 유지하십시오. 대비를 확인하기 위한 온라인 도구가 제공됩니다.

  7. 선택적으로 General, Guide Template, Knowledge Base, Proactive Offer 탭을 사용하여 브랜딩을 더욱 세부적으로 조정할 수 있습니다.

    General탭
    영역 세부 정보
    Width (EM)

    Guide 위젯의 너비 (단위: em)

    기본 em 크기는 CSS 설정 또는 브라우저 설정에 따라 달라집니다. 최상의 결과를 얻으려면 미리 볼 고객 포털 템플릿을 선택한 후 필요 시 Guide 위젯의 너비를 조정합니다.

    Height (EM)

    Guide 위젯의 높이 (단위: em)

    기본 em 크기는 CSS 설정 또는 브라우저 설정에 따라 달라집니다. 최상의 결과를 얻으려면 미리 볼 고객 포털 템플릿을 선택한 후 필요 시 Guide 위젯의 높이를 조정합니다.
    Close Button Icon Color 위젯 닫기 아이콘에 사용할 색상.
    Close Button Background Color 위젯 닫기 아이콘에 사용할 배경색.
    Guide Template탭
    영역 세부 정보
    Background Color 고객 포털 템플릿에 사용할 배경색.

    Font and Icon Color

    고객 포털 템플릿에 사용할 글꼴 및 아이콘 색상.
    Heading Font Size (EM)

    고객 포털 템플릿에 사용할 제목 크기(단위: em).

    기본 em 크기는 CSS 설정 또는 브라우저 설정에 따라 달라집니다. 최상의 결과를 얻으려면 미리 볼 고객 포털 템플릿을 선택한 후 필요 시 제목 글꼴 크기 조정합니다.
    Subheading Font Size (EM)

    고객 포털 템플릿에 사용할 부제목 글꼴 크기(단위: em).

    기본 em 크기는 CSS 설정 또는 브라우저 설정에 따라 달라집니다. 최상의 결과를 얻으려면 미리 볼 고객 포털 템플릿을 선택한 후 필요 시 부제목 글꼴 크기를 조정합니다.
    Knowledge Base탭
    영역 세부 정보
    Background Color 지식 베이스 문서를 볼 때 사용할 배경색.

    Font and Icon Color

    지식 베니스 문서를 볼 때 사용할 글꼴 및 아이콘 색상.
    Proactive Offer탭
    영역 세부 정보
    Heading Font Size (EM)

    능동적 제안 제목에 사용할 글꼴 크기(단위: em).

    기본 em 크기는 CSS 설정 또는 브라우저 설정에 따라 달라집니다. 최상의 결과를 얻으려면 능동적 제안 미리보기 이미지를 확인한 후, 필요 시 제목 글꼴 크기 조정합니다.

    Body Text Font Size (EM)

    능동적 제안의 본문에 사용할 글꼴 크기(단위: em).

    기본 em 크기는 CSS 설정 또는 브라우저 설정에 따라 달라집니다. 최상의 결과를 얻으려면 능동적 제안 미리보기 이미지를 확인한 후, 필요 시 본문 글꼴 크기 조정합니다.
    Header Color 능동적 제안의 헤더 영역에 사용할 색상.
    Background Color 능동적 제안의 배경에 사용할 색상.
    Font Color 능동적 제안에 사용할 글꼴 색상. 여기에는 제목 텍스트와 본문 텍스트가 포함됩니다.
    Primary Button Background and Font Color 능동적 제안의 기본 콜 투 액션 버튼에 대한 배경 및 글꼴 색상.
    Secondary Button Background and Font Color 능동적 제안의 보조 버튼에 대한 배경 및 글꼴 색상.
    Position on Mobile 모바일 기기에서 능동적 제안이 화면의 Top 또는 Bottom 에 나타나야 하는지 여부.
  8. 페이지 우측에 있는 드롭다운 목록에서 템플릿을 선택하여 브랜딩 설정을 미리 봅니다. 또는 능동적 제안에 대한 브랜딩을 미리 보려면 Proactive Offer 탭을 클릭합니다. 이러한 설정을 사용자 지정하면 오른쪽에 미리 보기가 나타납니다.

  9. Default을(를) 클릭하여 이를 기본 브랜딩으로 만듭니다. 브랜딩을 기본값으로 설정하면 이것이 모든 기존 템플릿과 새 템플릿에 적용됩니다.

  10. Save을(를) 클릭합니다.

채널 버튼 생성

Guide에서 제공하려는 각 채널닫힘 컨택이 상담원이나 Bot과 인터랙션하는 방법입니다. 채널은 음성, 이메일, 채팅, 소셜 미디어 등이 될 수 있습니다.에 대한 버튼을 생성합니다. 버튼이 생성되면 이를 진입점과 연결합니다. 진입점에 대해 다른 버튼을 설정하여 템플릿을 정의할 때 버튼을 재정의할 수 있습니다.

View a short video on creating channel buttons.

  1. 앱 선택기 를 클릭하고 선택합니다.ACD를 정의하여 검색을 수행합니다.

  2. Digital > Points of Contact Digital(으)로 이동합니다.

  3. General channel features에서 Guide을(를) 클릭합니다

  4. 아래의 Buttons 섹션으로 스크롤하여 Add button을(를) 클릭합니다.

    버튼 페이지. 생성된 모든 버튼과 해당 버튼을 사용하는 템플릿 및 진입점이 나열됩니다.

  5. 버튼의 Name을(를) 입력합니다.

  6. Choose File 을(를) 클릭하여 버튼의 Icon을(를) 업로드합니다.

    아이콘 이미지는 50KB보다 작아야 하며 SVG 파일을 권장합니다.

  7. 필요 시 Theme color 필드에서 채널 버튼의 배경색을 설정합니다.

    브랜드에 설정된 기본 채널 버튼 배경색을 사용하려면 이 필드를 비워 두세요.

    버튼에 투명한 배경을 사용하려면 Transparent background을(를) 선택합니다.

  8. Save을(를) 클릭합니다.

번역에 다른 형태의 언어 추가

Guide에서 사용할 사용자 정의 언어 변형을 생성할 수 있습니다. 또한 Guide 사용자 인터페이스 요소의 레이블을 편집할 수 있습니다.

기본 언어의 번역은 향후 릴리스에서 제공될 예정입니다.

사용자 정의 언어 추가

  1. 앱 선택기 를 클릭하고 선택합니다.ACD를 정의하여 검색을 수행합니다.

  2. Digital > Points of Contact Digital(으)로 이동합니다.

  3. General channel features에서 Guide을(를) 클릭합니다

  4. Translations을(를) 클릭합니다.

  5. 새 언어를 추가하려면 Add Language을(를) 클릭합니다.

    영역 세부 정보
    Name 언어를 식별할 이름을 입력합니다.

    Language

    드롭다운 목록에서 Language 을(를) 선택합니다.
    Country 드롭다운 목록에서 Country 을(를) 선택합니다.
    Fallback 특정 레이블에 대한 번역이 없는 경우 사용할 Fallback 언어를 선택합니다.
  6. Save을(를) 클릭합니다. Guide와 함께 제공되는 기본 레이블이 나타납니다.
  7. 각 Translation Key에 대해 Translation Value을(를) 입력합니다. Guide위젯에서 방문자에게 표시되는 문자열입니다. Guide와 함께 제공되는 기본 레이블의 Translation Key는 변경할 수 없습니다.
  8. 필요 시 페이지 하단의 추가를 클릭하여 새 번역 키를 생성합니다. Translation Key 및 Translation Value을(를) 설정합니다. 생성하는 새 레이블에 대한 Translation Key를 변경할 수 있습니다. 새 번역 키를 추가하는 경우 방문자에게 제공하는 모든 언어로 번역된 값을 제공해야 합니다.

  9. 저장을 클릭합니다.

언어 레이블 편집

  1. 앱 선택기 를 클릭하고 선택합니다.ACD를 정의하여 검색을 수행합니다.

  2. > Points of Contact Digital(으)로 이동합니다.

  3. General channel features에서 Guide을(를) 클릭합니다

  4. Translations을(를) 클릭합니다.

  5. 편집할 언어 옆의 Edit을(를) 클릭합니다.

  6. 편집할 레이블로 스크롤하여 Translation Value을(를) 업데이트합니다. 예를 들어 채팅 시작 버튼 레이블을 Begin Chat에서 Start Chat(으)로 변경할 수 있습니다.

  7. Save을(를) 클릭합니다.

Guide 위젯과 상호작용

방문자는 마우스나 키보드를 사용하여 버튼 사이를 이동함으로써 Guide 위젯과 상호 작용할 수 있습니다. 브라우저에서 활성화하지 않는 한 Safari 또는 Firefox 브라우저가 설치된 Mac을 사용하는 방문자의 경우 키보드 탐색이 제한됩니다. Chrome 브라우저를 사용할 경우 키가 예상대로 기본적으로 작동합니다.