Skip to content

动态内容工具包允许机器人创建者使用在运行时从组织拥有的资源和数据库中提取的动态内容来填充机器人元素。

它可以通过NPM或纱线安装,并且可以在NPM上找到 details of its usage

npm install @stackchat/dynamic-content-toolkit
yarn add @stackchat/dynamic-content-toolkit

这在您希望使用实时数据填充消息,操作序列,导航,回发按钮或 动态用户输入组 的情况下非常有用。 例如,在购物应用程序中,用户可以询问正在销售的黑色鞋子。 使用动态内容工具包,您可以获取符合该描述的产品并将其发送给轮播中的用户。

消息

MessageThread 是一个顶级类,允许您显示各种类型的消息集合,例如文本,图像和轮播。

MessageThread 被定义为消息:要显示给用户的消息数组

MessageThread's 的信息属性是各个消息对象的容器。 您可以添加任意数量的消息。 唯一的要求是MessageThread中至少应该有一条消息。 以下是您可以使用的所有不同类型的消息。

TextMessage

// Import required classes
import { TextMessage } from "@stackchat/dynamic-content-toolkit";

const textMessage = new TextMessage();
textMessage.text = "Hello, world!";

ImageMessage

// Import required classes
import { ImageMessage } from "@stackchat/dynamic-content-toolkit";

const imageMessage = new ImageMessage();
imageMessage.imageUrl = "https://placekitten.com/320/320";

ListMessage

// Import required classes
import {
  LinkButton,
  WebviewButton,
  PostbackButton
} from "@stackchat/dynamic-content-toolkit";

// Create a LinkButton
const linkButton = new LinkButton();
linkButton.text = "Link Button";
linkButton.uri = "https://stackchat.com";

// Create a WebviewButton
const webviewButton = new WebviewButton();
webviewButton.text = "Webview Button";
webviewButton.uri = "https://stackchat.com";

// Create a PostbackButton
const postbackButton = new PostbackButton();
postbackButton.text = "Postback Button";
postbackButton.payload = {
  /**
   * This is the name any of the exported functions from your
   * cloud functions code. The `data` object is sent to the
   * specified function when the user clicks or taps on the
   * button.
   */
  handler: "myCloudFunction",
  /**
   * An object with key-value pairs
   */
  data: {
    ...
  }
}
// Import required classes
import {
  ListMessage,
  MessageCard
} from "@stackchat/dynamic-content-toolkit";

// Create message cards
const itemOne = new MessageCard();
itemOne.imageUrl = "https://placekitten.com/320/320";
itemOne.title = "Item 1";
itemOne.description = "This is a description for item 1";
itemOne.size = MessageCardImageSize.Compact
itemOne.buttons = [ linkButton, webviewButton, postbackButton ];

// Create a ListMessage
const listMessage = new ListMessage();
listMessage.items = [ itemOne ];

CarouselMessage

// Import required classes
import {
  CarouselMessage,
  MessageCard
} from "@stackchat/dynamic-content-toolkit";

// Create message cards
const itemOne = new MessageCard();
itemOne.imageUrl = "https://placekitten.com/320/320";
itemOne.title = "Item 1";
itemOne.description = "This is a description for item 1";
itemOne.size = MessageCardImageSize.Compact;
itemOne.buttons = [ linkButton, webviewButton, postbackButton ];

// Create a CarouselMessage
const listMessage = new CarouselMessage();
listMessage.items = [ itemOne ];

MessageThread

// Import required classes
import { MessageThread } from "@stackchat/dynamic-content-toolkit";

// Create a MessageThread
const messageThread = new MessageThread();
messageThread.messages = [
  textMessage,
  imageMessage,
  listMessage,
  carouselMessage
];

虽然目前无法通过动态内容工具包创建用户输入组,但仍可以 manually执行此操作。

动作序列

ActionSequence 是一个顶级类,允许您顺序执行ActionItems的集合。 这使您可以执行清除/设置插槽值或从云功能触发分析事件等操作。

ActionSequence 被定义为动作:要执行的动作集合。

ActionSequence's 的动作属性是个人操作的容器。 您可以根据需要添加任意数量的操作。 唯一的要求是ActionSequence中至少应该有一个动作。 以下是您可以使用的所有不同类型的操作。

SetSlotsAction

// Import required classes
import { SetSlotsAction } from "@stackchat/dynamic-content-toolkit";

const setSlotsAction = new SetSlotsAction();
/**
 * The `slots` property is an object of slots in your bot
 * and the values you would like to set them to. In the example
 * below, `Slot1`, `Slot2` and `Slot3` are slot names as they
 * appear in your bot in Stackchat Studio. The desired values
 * for each slot goes against each of the slots.
 */
setSlotsAction.slots = {
  Slot1: "Value 1",
  Slot2: "Value 2",
  Slot3: "Value 3"
};

ClearSlotsAction

// Import required classes
import { ClearSlotsAction } from "@stackchat/dynamic-content-toolkit";

const clearSlotsAction = new ClearSlotsAction();
/**
 * The `slotNames` property is an array of slots in your bot.
 * In the example below, `Slot1`, `Slot2` and `Slot3` are slot
 * names as they appear in your bot in Stackchat Studio. All
 * of the slots mentioned will have their values cleared once
 * this action is executed.
 */
clearSlotsAction.slotNames = [ "Slot1", "Slot2", "Slot3" ];

AnalyticsEventAction

// Import required classes
import { AnalyticsEventAction } from "@stackchat/dynamic-content-toolkit";

const analyticsEventAction = new AnalyticsEventAction();

// The `eventName` property is required, but this value is ignored by Adobe Analytics.
analyticsEventAction.eventName = "Event 1";
/**
 * The `eventData` property is an optional object that is sent as a straight
 * pass-through to your configured analytics provider. It is an object with
 * arbitary key-value mappings that should map to the values expected by your
 * analytics provider. For example, if you're using Adobe Analytics,
 * `eventData` might look something like this:
 * {
 *    prop1: 'value1',
 *    prop3: 'value2',
 *    events: 'event3,event4'
 * }
 */
analyticsEventAction.eventData = {
  ...
}

ActionSequence

// Import required classes
import { ActionSequence } from "@stackchat/dynamic-content-toolkit";

// Create an ActionSequence
const actionSequence = new ActionSequence();
actionSequence.actions = [
  setSlotsAction,
  clearSlotsAction,
  analyticsEventAction
];

导航

在Stackchat Studio中定义云功能时,可以定义持续到 导航目标,一旦执行完成,将导航用户。 但是,如果满足某些条件,您可能希望覆盖此值,因此可以使用“Navigation”类。 这是一个顶级类,它将触发导航到机器人中的另一个流或流元素。

Navigation定义为continueTo:一旦您的云功能完成执行,导航到的流或流元素。 期望包含两个标记的字符串,格式为flow_name:flow_element_name。 flow_name可以替换为_以指示当前流,而flow_element_name可以替换为*以指示第一个令牌中引用的流的默认条目元素。 否则,这些值应该是您要导航到的流或流元素的实际名称。

Navigation

// Import required classes
import { Navigation } from "@stackchat/dynamic-content-toolkit";

// Create an ActionSequence
const navigation = new Navigation();
navigation.continueTo = "Flow One: *";

continueTo属性使用以下语法接受流程流程元素或两者:

Flow:Flow Element

/**
 * For demonstration purpose, let us assume we have a bot
 * with flows as `Flow One`, `Flow Two` and `Flow Three`. Further
 * more, let us assume each of the above flows have three elements
 * therein named as `Element One`, `Element Two` and `Element Three`.
 *
 * The structure would be as follows:
 * {
 *      'Flow One': [ `Element One`, `Element Two`, `Element Three ~ default` ],
 *      'Flow Two': [ `Element One`, `Element Two ~ default`, `Element Three` ],
 *      'Flow Three': [ `Element One ~ default`, `Element Two`, `Element Three` ]
 * }
 *
 * We are assuming that `Element 2` inside `Flow 2` is the element
 * that triggered our cloud function execution.
 *
 * On the above basis, the following are valid `continueTo` values:
 */
const possibleValues = [
  "Flow One:*", // Continue to the default element of `Flow One`, i.e `Element Three`,
  "_:*", // Continue to the default element of the current flow i.e. `Flow Two, Element Two`,
  "_:Element Three", // Continue to the `Element Three` of current flow, i.e. `Flow Two`,
    "Flow One:Element Three", // Continue to `Element Three` in `Flow One`
];

回发按钮

网络信使还可以通过添加委托来使用回发按钮。

这也可以在旋转木马中起作用,其中回发按钮可以包含有效载荷。 然后可以将这些回发配置为触发特定的云功能。

从上面的示例中,显示黑鞋销售的动态内容轮播可以包括回发“购买”按钮,其中每个结果具有有效载荷,该有效载荷是给定鞋的产品ID。 当用户单击该按钮时,可以返回产品ID有效负载并指示使用该产品ID执行PurchaseItem云功能。