用旅程引导客户

旅程是一种互动回应,您可以利用网站已经支持的功能,引导客户完成一项复杂的任务,或带领他们了解新功能。 旅程是由多个部分组成的回复,可以将文字、视频和图像依次结合在一起。

[测试版]

该测试版功能仅供评估和测试之用。 旅程需要网络聊天6.9.0或更高版本。

当客户开始旅程时,聊天窗口会暂时关闭。 然后,网络聊天集成功能会在一个叠加在网站上的小窗口中一步一步地显示旅程元素,让您的客户在旅程中一步一步地浏览和使用网站。 在旅程中的任何时候,客户都可以自由返回聊天助手窗口,然后继续旅程。

旅程示例图片

在下面的例子中,您可能会用到 "旅程":

  • 引导新客户使用您的产品或网站,并向他们展示一切所在位置

  • 为客户提供复杂任务的逐步指导,如申请索赔或创建账户

  • 在特定的营销机会中,向目标用户宣传产品的销售机会,例如向关注支出的客户提供新的奖励计划

如需了解有关何时以及如何使用“旅程”的更多信息,请参阅我们的最佳实践指南

创建旅程

旅程使用 "user_defined响应类型定义,该类型仅在 JSON 编辑器中可用。 (有关更多信息,请参阅 “使用 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。)

即使网络聊天没有打开,您也可以使用此选项直接从网站开始旅程。 更多信息,请参阅 "不打开网络聊天开始旅程"。

card_title :当有旅程可用时,在网页聊天中显示的欢迎卡片上的标题(例如, Website tourDisputing a charge)。

card_description : 要在介绍卡上显示的描述。 描述旅程,以便客户决定是否要打开它。

steps : 一组定义旅程各步骤的响应。

步骤说明

旅程中的每一步都定义为一个 JSON 对象,该对象描述了要显示给客户的响应,其格式与在 "generic数组中直接定义助手响应的格式类似。 旅程中的步骤会按照您在 "steps数组中列出的顺序一个一个地显示给客户。

与助手回复一样,"response_type属性用于识别回复类型:

text : 仅显示文本的步骤。

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

在 "text步骤中支持 Markdown 格式和链接。 更多信息,请参阅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 可以是以下任一种:

  • URL MPEG 或 AVI 等标准格式的视频文件。 在网络聊天中,链接的视频将显示为嵌入式视频播放器。

不支持 HLS(.m3u8)和 DASH (MPD) 流媒体视频。

  • 在受支持的视频托管服务上托管的视频的 URL。 在网络聊天中,链接的视频将使用托管服务的可嵌入播放器呈现。

指定您在浏览器中观看视频时使用的 URL (例如 https://www.youtube.com/watch?v=52bpMKVigGU )。您无需将 URL 转换为可嵌入的形式;网络聊天会自动进行转换。

您可以嵌入以下服务托管的视频:

示例

下面的示例定义了一个旅程,使用文本、图像和视频回复相结合的方式向用户展示如何对收费提出异议。

{
  "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."
          }
        ]
      }
    }
  ]
}

不打开网络聊天就开始旅程

虽然旅程是网络聊天集成的一部分,但您可以让客户直接从网站开始旅程,而无需打开网络聊天窗口。 例如,您可能想在网站上加入一个 "向我展示"(Show me)按钮,客户可以点击该按钮来启动页面的互动导览。

在不打开网络聊天的情况下开始旅程:

  1. 在发送旅程响应的操作中,编辑定义旅程的 JSON。 输入 ""skip_card": true可绕过介绍卡。

  2. 在您的网站上,请使用 send() 实例方法向助手发送一条消息,以触发启动旅程的操作(例如 Give me a tour)。 发送信息以响应您想用来触发旅程的任何事件(如按钮点击或页面加载)。

现在,您的客户可以直接从您的网站开始互动之旅,而无需先打开网络聊天。 (如果稍后打开网络聊天窗口,旅程介绍卡会出现在聊天记录中)

限制

该测试版功能目前有以下限制:

  • 预览窗格不支持旅程。 如果您想预览旅程,请使用可共享的预览链接。 有关预览链接的更多信息,请参阅复制链接以共享

  • 旅程使用 "view:change事件或 "changeView方法,不能与 "window:open或 "window:close事件或 "openWindow、"closeWindow和 "toggleOpen实例方法一起使用。

  • 当客户开始旅程时,网络聊天窗口就会关闭。 如果您使用 "view:change事件来触发聊天后表单的显示,您的代码应检查新的 "event.reason或 "event.newViewState.tour参数的值,以决定是否适合显示表单。