在聊天中为客户添加 Amazon Lex 互动消息

交互式消息包含丰富的消息，提供提示和预置的显示选项，供客户选择。这些消息由 Amazon Lex 提供支持，并通过 Amazon Lex 使用 AWS Lambda 函数进行配置。

验证限制

字符串字段限制（例如标题、副标题）应由客户端（即自定义界面或托管通信小部件）强制执行。SendMessageAPI 仅检查字符串的总大小是否小于 20KB。

要成功发送消息，必须遵守所有其他字段限制。

消息显示模板

Connect Customer 提供以下消息显示模板。使用它们向聊天中的客户呈现信息：

这些模板定义了信息的呈现方式，以及聊天界面中会显示哪些信息。通过聊天发送交互式消息时，流会验证消息格式是否遵循其中一个模板。

列表选择器模板

使用列表选择器模板向客户显示最多六个选项的列表。每个选项都可以有自己的图像。

下图显示了列表选择器模板如何在聊天中呈现信息的两个示例。

以下代码是您可以在 Lambda 中使用的列表选择器模板。注意以下几点：

{
   "templateType":"ListPicker",                       
   "version":"1.0",                                   
   "data":{                                           
      "replyMessage":{                             
         "title":"Thanks for selecting!",             
         "subtitle":"Produce selected",
         "imageType":"URL",                                
         "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/fruit_34.3kb.jpg",                          
         "imageDescription":"Select a produce to buy"
      },
      "content":{                                       
         "title":"What produce would you like to buy?",
         "subtitle":"Tap to select option",
         "imageType":"URL",                       
         "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/fruit_34.3kb.jpg",                  
         "imageDescription":"Select a produce to buy",
         "elements":[                                   
            {
               "title":"Apple",                          
               "subtitle":"$1.00",
               "imageType":"URL",
               "imageData":"https://interactive-message-testing.s3-us-west-2.amazonaws.com/apple_4.2kb.jpg"
            },
            {
               "title":"Orange",                         
               "subtitle":"$1.50",
               "imageType":"URL",                  
               "imageData":"https://interactive-message-testing.s3-us-west-2.amazonaws.com/orange_17.7kb.jpg",           
            },
             {
               "title":"Banana",                         
               "subtitle":"$10.00",
               "imageType":"URL",                  
               "imageData":"https://interactive-message-testing.s3-us-west-2.amazonaws.com/banana_7.9kb.jpg",            
               "imageDescription":"Banana"
            }
         ]
      }

列表选择器限制

如果您选择从头开始构建自己的 Lambda，下表列出了每个列表选择器元素的限制。必填参数以粗体显示。

要发送不受限制的选项，请在应用程序中实施操作按钮。有关更多信息，请参阅交互式消息列表中操作按钮的实现 picker/panel。

amazon_connect('updateSandboxAttributes', 'allow-scripts allow-same-origin allow-popups allow-downloads allow-top-navigation-by-user-activation')                                       
                                    

时间选取器模板

时间选取器模板非常有用，能让客户安排预约。您最多可以在聊天中向客户提供 40 个时段。

下图显示了时间选取器模板如何在聊天中呈现信息的两个示例。

下图显示了带有图像的时间选择器

以下代码是您可以在 Lambda 中使用的时间选取器模板。注意以下几点：

{
   "templateType":"TimePicker",                                 
   "version":"1.0",                                             
   "data":{                                                    
      "replyMessage":{
         "title":"Thanks for selecting",                        
         "subtitle":"Appointment selected",
         "imageType":"URL",                                       
         "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/booked.jpg",
         "imageDescription":"Appointment booked"
      },
      "content":{                                               
         "title":"Schedule appointment",                       
         "subtitle":"Tap to select option",
         "imageType":"URL",                                       
         "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/calendar.jpg",
         "imageDescription":"Appointment booked",
         "timeZoneOffset":-450,
         "location":{
            "latitude":47.616299,                               
            "longitude":-122.4311,                              
            "title":"Oscar",                                    
            "radius":1,
         },
         "timeslots":[                                          
               {
                  "date" : "2020-10-31T17:00+00:00",             
                  "duration": 60,                               
               },
               {
                  "date" : "2020-11-15T13:00+00:00",            
                  "duration": 60,                              
               },
               {
                  "date" : "2020-11-15T16:00+00:00",            
                  "duration": 60,                              
               }
            ],           
         }
      }
   }
}     

时间选取器限制

下表列出了每个时间选取器元素的限制。如果您选择从头开始构建自己的 Lambda，请使用此信息。必填参数以粗体显示。

面板模板

通过使用面板模板，您可以在一个问题下向客户提供最多 10 个选项。但是，只能包含一张图像，而不是每个选项一张。

下图显示了面板模板如何在聊天中呈现信息的示例。它在消息的顶部显示了一张图像，在图像下方显示了一个提示，询问我该怎么帮您？ 点击选择选项。在提示下向客户显示了三个选项：检查自助服务选项、与座席交谈、结束聊天。

以下代码是您可以在 Lambda 中使用的面板模板。注意以下几点：

{
   "templateType":"Panel",                            
   "version":"1.0",                                   
   "data":{                                          
      "replyMessage":{                             
         "title":"Thanks for selecting!",             
         "subtitle":"Option selected",
      },
      "content":{                                      
         "title":"How can I help you?",                
         "subtitle":"Tap to select option",
         "imageType":"URL",                       
         "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/company.jpg",                  
         "imageDescription":"Select an option",
         "elements":[                                 
            {
               "title":"Check self-service options",   
            },
            {
               "title":"Talk to an agent",                     
            },
            {
               "title":"End chat",                    
            }
         ]
      }
   }
} 

面板限制

如果您选择从头开始构建自己的 Lambda，下表列出了每个面板元素的限制。必填参数以粗体显示。

要发送不受限制的选项，请在应用程序中实施操作按钮。有关更多信息，请参阅交互式消息列表中操作按钮的实现 picker/panel。

快速回复模板

使用快速回复消息获得客户的简单回复，以及他们在内联列表中对客户的回复。不支持使用图像进行快速响应。

下图显示了快速回复模板如何在聊天中呈现信息的示例。

以下代码是您可以在 Lambda 中使用的快速回复模板。

{
    "templateType": "QuickReply",
    "version": "1.0",
    "data": {
        "replyMessage": {
            "title": "Thanks for selecting!"
        },
        "content": {
            "title": "Which department would you like?",
            "elements": [{
                    "title": "Billing"
                },
                {
                    "title": "Cancellation"
                },
                {
                    "title": "New Service"
                }
            ]
        }
    }
}

快速回复限制

下表列出了每个快速回复元素的限制。如果您选择从头开始构建自己的 Lambda，请使用此信息。必填参数以粗体显示。

轮播模板

使用轮播在一条消息中向客户显示最多 5 个列表选择器或面板。与列表选择器和时间选取器类似，您可以使用 SHOW_MORE 功能向轮播添加更多选项。

以下 GIF 显示了轮播模板如何在聊天中呈现信息的示例。客户使用左右箭头滚动浏览图像轮播。

下图显示了两个了解更多超链接，它们是轮播选择器超链接元素的示例。

以下代码是您可以在 Lambda 中使用的轮播模板。

{
  "templateType": "Carousel",            
  "version": "1.0",                      
  "data": {                              
      "content": {                           
        "title": "View our popular destinations",   
        "elements": [                               
        {
          "templateIdentifier": "template0",        
          "templateType": "Panel",
          "version": "1.0",
          "data": {
            "content": {
              "title": "California",
              "subtitle": "Tap to select option",
              "elements": [
                {
                  "title": "Book flights"
                },
                {
                  "title": "Book hotels"
                },
                {
                  "title": "Talk to agent"
                }
              ]
            }
          }
        },
        {
          "templateIdentifier": "template1",   
          "templateType": "Panel",
          "version": "1.0",
          "data": {
            "content": {
              "title": "New York",
              "subtitle": "Tap to select option",
              "elements": [
                {
                  "title": "Book flights"
                },
                {
                  "title": "Book hotels"
                },
                {
                  "title": "Talk to agent"
                }
              ]
            }
          }
        }
      ]
    }
  }
}

对于托管通信小部件用户：

轮播限制

下表列出了每个轮播元素的限制。如果您选择从头开始构建自己的 Lambda，请使用此信息。必填参数以粗体显示。

Apple 表单模板

企业可以通过一条消息向终端客户发送表单交互式消息，其中包含多页要求输入的内容。当终端客户的 Apple 设备收到消息后，他们可以打开表单并浏览页面，为每个页面回复，然后在表单末尾提交所有回复。

例如，企业可以将 Apple 表单用于各种用途，包括分类流、客户调查和账户创建/注册。

受支持的页面类型是：

以下代码是您可以在 Lambda 中使用的 Apple 表单模板的示例。

简单调查表单示例：

{
  "templateType": "AppleForm",
  "version": "1.0",
  "data": {
    "content": {
      "title": "Survey",
      "pages": [
        {
          "pageType": "DatePicker",
          "title": "Date you visited",
          "subtitle": "When did you last visit?",
          "minDate": "2024-01-02"
        },
        {
          "pageType": "ListPicker",
          "title": "Rating",
          "subtitle": "How do you rate the experience?",
          "items": [
            {
              "title": "Good",
              "imageType": "URL",
              "imageData": "https://mybucket.s3.us-west-2.amazonaws.com/good.jpg"
            },
            {
              "title": "Okay",
              "imageType": "URL",
              "imageData": "https://mybucket.s3.us-west-2.amazonaws.com/okay.jpg"
            },
            {
              "title": "Poor",
              "imageType": "URL",
              "imageData": "https://mybucket.s3.us-west-2.amazonaws.com/poor.jpg"
            }
          ]
        },
        {
          "pageType": "ListPicker",
          "title": "Dine type",
          "subtitle": "Select all dine types that apply",
          "multiSelect": true,
          "items": [
            {
              "title": "Pickup"
            },
            {
              "title": "Dine-in"
            },
            {
              "title": "Delivery"
            }
          ]
        },
        {
          "pageType": "WheelPicker",
          "title": "Visits",
          "subtitle": "How often do you visit?",
          "items": [
            {
              "title": "Often"
            }
            {
              "title": "Sometimes"
            },
            {
              "title": "Rarely"
            }
          ]
        },
        {
          "pageType": "Input",
          "title": "Additional notes",
          "subtitle": "Anything else you'd like to mention about your visit?",
          "multiLine": true
        }
      ]
    }
  }
}
        

Apple 表单限制

InteractiveMessage

InteractiveMessageData

AppleFormContent

AppleFormSplashPage

AppleFormPage

AppleFormDatePickerPage

AppleFormDatePickerPage扩展 AppleFormPage

AppleFormListPickerPage

AppleFormListPickerPage扩展 AppleFormPage

AppleFormListPickerPageItem

AppleFormListPickerPageItem扩展 AppleFormPage

AppleFormWheelPickerPage

AppleFormWheelPickerPage扩展 AppleFormPage

AppleFormWheelPickerPageItem

AppleFormWheelPickerPageItem扩展 AppleFormPage

AppleFormInputPage

AppleFormInputPage扩展 AppleFormPage

Apple Pay 模板

使用 Apple 支付模板，为客户提供一种简单而安全的方式，让他们通过使用 Apple Pay 的 Apple Messages for Business 购买商品和服务。

以下代码是您可以在 Lambda 中使用的 Apple Pay 模板。

{
  "templateType":"ApplePay",
  "version":"1.0",
  "data":{
    "content":{
      "title":"Halibut",
      "subtitle":"$63.99 at Sam's Fish",
      "imageType":"URL",
      "imageData":"https://interactive-msg.s3-us-west-2.amazonaws.com/fish.jpg",
      "payment": {
        "endpoints": {
          "orderTrackingUrl": "https://sams.example.com/orderTrackingUrl/",
          "paymentGatewayUrl": "https://sams.example.com/paymentGateway/",
          "paymentMethodUpdateUrl": "https://sams.example.com/paymentMethodUpdate/",
          "shippingContactUpdateUrl": "https://sams.example.com/shippingContactUpdate/",
          "shippingMethodUpdateUrl": "https://sams.example.com/shippingMethodUpdate/",
          "fallbackUrl": "https://sams.example.com/paymentGateway/"
        },
        "merchantSession": {
          "epochTimestamp": 1525730094057,
          "expiresAt": 1525730094057,
          "merchantSessionIdentifier": "PSH40080EF4D6.........9NOE9FD",
          "nonce": "fe72cd0f",
          "merchantIdentifier": "merchant.com.sams.fish",
          "displayName": "Sam's Fish",
          "signature": "308006092a8.......09F0W8EGH00",
          "initiative": "messaging",
          "initiativeContext": "https://sams.example.com/paymentGateway/",
          "signedFields": [
            "merchantIdentifier",
            "merchantSessionIdentifier",
            "initiative",
            "initiativeContext",
            "displayName",
            "nonce"
          ],
        },
        "paymentRequest": {
          "applePay": {
            "merchantCapabilities": [
              "supports3DS",
              "supportsDebit",
              "supportsCredit"
            ],
            "merchantIdentifier": "merchant.com.sams.fish",
            "supportedNetworks": [
              "amex",
              "visa",
              "discover",
              "masterCard"
            ]
          },
          "countryCode": "US",
          "currencyCode": "USD",
          "lineItems": [
            {
              "amount": "59.00",
              "label": "Halibut",
              "type": "final"
            },
            {
              "amount": "4.99",
              "label": "Shipping",
              "type": "final"
            }
          ],
          "requiredBillingContactFields": [
            "postalAddress"
          ],
          "requiredShippingContactFields": [
            "postalAddress",
            "phone",
            "email",
            "name"
          ],
          "shippingMethods": [
            {
              "amount": "0.00",
              "detail": "Available within an hour",
              "identifier": "in_store_pickup",
              "label": "In-Store Pickup"
            },
            {
              "amount": "4.99",
              "detail": "5-8 Business Days",
              "identifier": "flat_rate_shipping_id_2",
              "label": "UPS Ground"
            },
            {
              "amount": "29.99",
              "detail": "1-3 Business Days",
              "identifier": "flat_rate_shipping_id_1",
              "label": "FedEx Priority Mail"
            }
          ],
          "total": {
            "amount": "63.99",
            "label": "Sam's Fish",
            "type": "final"
          },
          "supportedCountries" : [
            "US",
            "CA",
            "UK",
            "JP",
            "CN"
          ]
        }
      },
      "requestIdentifier" : "6b2ca008-1388-4261-a9df-fe04cd1c23a9"
    }
  }
}
        

Apple Pay 限制

iMessage 应用程序模板

使用 iMessage 应用程序模板向客户展示您定制的 iMessage 应用程序。

以下代码是您可以在 Lambda 函数中使用的 iMessage 应用程序模板示例。 

{
   templateType: AppleCustomInteractiveMessage,
   version: "1.0",
   data: {
       content: {
           appIconUrl: "https://interactive-message-testing.s3-us-west-2.amazonaws.com/apple_4.2kb.jpg",
           appId: "123456789",
           appName: "Package Delivery",
           title: "Bubble Title CIM",
           bid: "com.apple.messages.MSMessageExtensionBalloonPlugin:{team-id}:{ext-bundle-id}",
           dataUrl: "?deliveryDate=26-01-2024&destinationName=Home&street=1infiniteloop&state=CA&city=Cupertino&country=USA&postalCode=12345&latitude=37.331686&longitude=-122.030656&isMyLocation=false&isFinalDestination=true",
           subtitle: "Bubble package",
       },
       replyMessage: {
           title: "Custom reply message title",
           subtitle: "Custom reply message subtitle",
           imageType: "URL",
           imageData: "https://interactive-msg.s3-us-west-2.amazonaws.com/fruit_34.3kb.jpg",
       }
   }
}

iMessage 应用程序限制

WhatsApp 清单

您可以在 WhatsApp 聊天中使用 WhatsApp 列表模板为客户提供选项列表。

以下示例显示了用于银行服务的选项列表。

{
  "templateType": "WhatsAppInteractiveList",
  "version": "1.0",
  "data": {
    "content": {
      "title": "Which account do you need help with?",
      "body": {
        "text": "Which account do you need help with?"
      },
      "action": {
        "button": "Options",
        "sections": [
          {
            "title": "Your accounts",
            "rows": [
              {
                "id": "11111111",
                "title": "11111111",
                "description": "PERSONAL CHECKING"
              },
              {
                "id": "22223333",
                "title": "22223333",
                "description": "PERSONAL SAVINGS"
              }
            ]
          },
          {
            "title": "Other",
            "rows": [
              {
                "id": "other",
                "title": "I can't find my account"
              }
            ]
          }
        ]
      }
    }
  }
}

下图显示了客户打开列表之前和之后的典型屏幕。

WhatsApp 期权限制

WhatsApp 回复按钮

您可以使用 WhatsApp 回复按钮模板向客户显示在线选项列表。

{
  "templateType": "WhatsAppInteractiveReplyButton",
  "version": "1.0",
  "data": {
    "content": {
      "title": "What would you like to do?",
      "body": {
        "text": "What would you like to do?"
      },
      "action": {
        "buttons": [
          {
            "type": "reply",
            "reply": {
              "id": "agent",
              "title": "Continue to agent"
            }
          },
          {
            "type": "reply",
            "reply": {
              "id": "end_chat",
              "title": "End chat"
            }
          }
        ]
      }
    }
  }
}

下图显示了典型的用户体验。

WhatsApp 回复按钮限制

回 WhatsApp 复模板有以下限制。

丰富的标题和字幕格式

您可以为聊天消息的标题和副标题添加丰富的格式。例如，您可以添加链接、斜体、粗体、编号列表和项目符号列表。您可以使用 markdown 设置文本格式。

下图的聊天框显示了标题和副标题中格式丰富的列表选择器示例。

如何使用 markdown 设置文本格式

您可以用多行格式编写标题和副标题字符串，也可以在单行中使用 `\r\n` 换行符。

以下示例显示了如何使用 markdown 设置斜体和粗体文本的格式：

This is some *emphasized text* and some **strongly emphasized text**

以下示例显示了如何使用 markdown 将文本格式化为代码：

This is `<code />`

如何使用 markdown 设置链接格式

要创建链接，请使用以下语法：

[aws](https://aws.amazon.com)

以下示例显示了两种使用 markdown 添加链接的方法：

Questions? Visit https://plainlink.com/faq

[This is a link](https://aws.amazon.com)