고객의 여정 안내

베타

여정은 고객에게 복잡한 태스크를 안내하거나 웹 사이트에서 이미 지원하는 기능을 활용하여 새로운 기능에 대한 둘러보기를 제공하는 데 사용할 수 있는 대화식 응답입니다. 여행은 텍스트, 비디오 및 이미지를 순서대로 결합할 수 있는 다중 파트 응답입니다.

이 베타 기능은 평가 및 테스트 용도로만 사용할 수 있습니다. 과정에는 웹 대화 버전 6.9.0 이상이 필요합니다.

고객이 여행을 시작하면 대화 창이 일시적으로 닫힙니다. 그런 다음 웹 대화 통합은 웹 사이트 위에 겹쳐진 작은 창에서 한 번에 한 단계씩 과정 요소를 표시하여 고객이 과정을 진행할 때 웹 사이트를 탐색하고 사용할 수 있도록 합니다. 여행 중 언제든지 고객은 어시스턴트 대화 창으로 자유롭게 돌아간 후 여행을 재개할 수 있습니다.

여정의 예를 표시하는 이미지

다음 예제와 같은 상황에서 과정을 사용할 수 있습니다.

  • 제품 또는 웹 사이트에 새 고객 온보딩 및 모든 것이 있는 위치 표시

  • 고객에게 청구 제출 또는 계정 작성과 같은 복잡한 태스크에 대한 단계별 지침 제공

  • 비용을 걱정하는 고객에게 새로운 보상 프로그램을 제공하는 것과 같이 특정 마케팅 기회 중에 사용자를 대상으로 제품의 영업 기회를 촉진합니다.

과정 사용 시기 및 방법 결정에 대한 자세한 정보는 우수 사례 안내서를 참조하십시오.

과정 작성

여정은 JSON 편집기에서만 사용 가능한 user_defined 응답 유형을 사용하여 정의됩니다. (자세한 내용은 JSON 편집기를 사용하여 응답 정의하기를 참조하십시오.) 여정을 생성하려면 다음 단계를 따르십시오

  1. 액션 편집기에서 여정을 시작할 단계를 생성하거나 편집합니다.

  2. JSON 편집기로 전환 아이콘 JSON 편집기로 전환 아이콘 을 클릭하여 JSON 편집기를 여십시오.

  3. generic 배열에서 user_defined 응답을 작성하십시오. (자세한 내용은 JSON 편집기를 사용하여 응답 정의하기를 참조하십시오.)

    여정은 다음 구조를 사용하여 정의됩니다.

    "user_defined": {
      "user_defined_type": "IBM_BETA_JOURNEYS_TOUR",
      "skip_card": true|false,
      "card_title": "{title}",
      "card_description": "{description}",
      "steps": [
        ...
      ]
    }
    

    여기서,

    user_defined_type

    정의 중인 사용자 정의 응답의 특정 유형입니다. 과정을 정의하려면 항상 이 특성을 IBM_BETA_JOURNEYS_TOUR 로 설정하십시오.

    skip_card

    고객이 웹 대화 창에서 소개 카드를 클릭할 때까지 기다리지 않고 웹 대화가 과정을 즉시 시작해야 하는지 여부를 지정하는 선택적 특성입니다. (기본값은 false 입니다.)

    You can use this option to start a journey directly from your website, even if the web chat is not open. For more information, see Starting a journey without opening the web chat.

    card_title

    여정이 사용 가능할 때 웹 대화에 표시되는 소개 카드에 표시할 제목입니다 (예: Website tour 또는 Disputing a charge).

    card_description

    소개 카드에 표시할 설명입니다. 고객이 과정을 열 것인지 여부를 결정할 수 있도록 과정을 설명하십시오.

    steps

    과정의 단계를 정의하는 응답 배열입니다.

단계 정의

여정의 각 단계는 generic 배열에서 직접 어시스턴트 응답을 정의하는 방법과 유사한 형식을 사용하여 고객에게 표시될 응답을 설명하는 JSON 오브젝트로 정의됩니다. 여정의 단계는 steps 배열에 나열된 순서대로 한 번에 하나씩 고객에게 표시됩니다.

어시스턴트 응답과 마찬가지로 response_type 특성은 응답 유형을 식별합니다.

text

텍스트만 표시하는 단계입니다.

{
  "response_type": "text",
  "text": "This is the text of the response."
}

Markdown 형식 및 링크는 text 단계에서 지원됩니다. 자세한 정보는 Markdown 형식화 를 참조하십시오.

여정에서 text 단계의 구조는 어시스턴트 응답에 대한 text 응답 유형과 다릅니다. 텍스트 값의 배열 대신 단일 text 구성요소만 지원됩니다.

image

선택적 설명과 함께 이미지를 표시하는 단계입니다.

{
  "response_type": "image",
  "source": "https://example.com/image.png",
  "description": "This is the description of the image."
}

source 속성은 공개적으로 접근 가능한 이미지의 https: URL 이어야 합니다. 지정된 이미지는 .jpg, .gif 또는 .png 형식이어야 합니다.

video

선택적 설명과 함께 비디오를 표시하는 단계입니다.

{
  "response_type": "video",
  "source": "https://example.com/videos/example-video.mp4",
  "description": "This is the description of the video."
}

source 특성에 지정된 URL은 다음 중 하나일 수 있습니다.

  • MPEG 또는 AVI와 같은 표준 형식으로 된 비디오 파일의 URL입니다. 웹 대화에서 링크된 비디오는 임베드된 비디오 플레이어로 렌더링됩니다.

    HLS(.m3u8) 및 DASH(MPD) 스트리밍 비디오는 지원되지 않습니다.

  • 지원되는 비디오 호스팅 서비스에서 호스팅되는 비디오의 URL입니다. 웹 대화에서 링크된 비디오는 호스팅 서비스에 대해 임베드 가능한 플레이어를 사용하여 렌더링됩니다.

    브라우저에서 비디오를 보는 데 사용할 URL을 지정하십시오(예: https://www.youtube.com/watch?v=52bpMKVigGU). URL을 임베드 가능한 양식으로 변환할 필요가 없습니다. 웹 대화가 이를 자동으로 수행합니다.

    다음 서비스에 호스팅되는 비디오를 임베드할 수 있습니다.

    • YouTube
    • Facebook
    • Vimeo
    • Twitch
    • 스트리밍 가능
    • 위스티아
    • 비디어드

다음 예제는 텍스트, 이미지 및 비디오 응답의 조합을 사용하여 사용자가 비용을 청구하는 방법을 표시하는 과정을 정의합니다.

{
  "generic": [
    {
      "response_type": "user_defined",
      "user_defined": {
        "card_title": "Let’s dispute a charge!",
        "card_description": "Follow along with this guided journey to learn how to find and dispute charges.",
        "user_defined_type": "IBM_BETA_JOURNEYS_TOUR",
        "steps": [
          {
            "response_type": "text",
            "text": "Charges are listed on the Transactions page. **Click your profile photo** in the top right corner of your screen, and then **click Transactions** from the menu."
          },
          {
            "response_type": "text",
            "text": "Here you can view your charges.\n **Scroll through the Transactions page and review your charges.** Each charge contains a merchant name, transaction date, and amount charged."
          },
          {
            "response_type": "image",
            "source": "https://example.com/image.png",
            "alt_text": "Image showing location of Dispute option",
            "description": "The option to Dispute is marked in red on the right hand side of each row in the Transactions table. Just click here to file a dispute."
          },
          {
            "response_type": "video",
            "source": "https://vimeo.com/769580398",
            "description": "Watch this short video to learn what to expect now that you’ve filed a dispute."
          }
        ]
      }
    }
  ]
}

웹 대화를 열지 않고 과정 시작

과정은 웹 대화 통합의 일부이지만 고객이 웹 대화 창을 전혀 열지 않고 웹 사이트에서 직접 과정을 시작할 수 있도록 할 수 있습니다. 예를 들어, 고객이 클릭하여 페이지의 대화식 둘러보기를 실행할 수 있는 데모 보기 단추를 웹 사이트에 포함시킬 수 있습니다.

웹 대화를 열지 않고 과정을 시작하려면 다음을 수행하십시오.

  1. 과정 응답을 보내는 조치에서 과정을 정의하는 JSON을 편집하십시오. 소개 카드를 생략하려면 "skip_card": true 를 포함하십시오.

  2. 웹 사이트에서 send() 인스턴스 메소드를 사용하여 과정을 시작하는 조치를 트리거하는 어시스턴트에 메시지를 전송하십시오 (예: Give me a tour). 과정을 트리거하는 데 사용할 이벤트 (예: 단추 클릭 또는 페이지 로드) 에 대한 응답으로 메시지를 보내십시오.

이제 고객은 먼저 웹 대화를 열지 않고도 웹 사이트에서 직접 대화식 과정을 시작할 수 있습니다. (웹 대화 창이 나중에 열리면 과정에 대한 소개 카드가 대화 내역에 표시됩니다.)

제한사항

이 베타 기능에는 현재 다음과 같은 제한사항이 있습니다.

  • 미리보기 분할창은 과정을 지원하지 않습니다. 과정을 미리 보려면 공유 가능한 미리보기 링크를 사용하십시오. 미리보기 링크에 대한 자세한 정보는 공유할 링크 복사 를 참조하십시오.

  • 과정은 view:change 이벤트 또는 changeView 메소드를 사용하며 window:open 또는 window:close 이벤트 또는 openWindow, closeWindowtoggleOpen 인스턴스 메소드에 대해 작업하지 않습니다.

  • 고객이 여행을 시작하면 웹 대화 창이 닫힙니다. view:change 이벤트를 사용하여 대화 후 양식의 표시를 트리거하는 경우, 코드는 새 event.reason 또는 event.newViewState.tour 매개변수의 값을 확인하여 양식 표시가 적절한지 여부를 결정해야 합니다.