Messages

This section includes information about different types of messages that you can send to a user. Messages are always sent as part of a MessageThread.

Message Thread

MessageThread is a top level class that allows you to display a collection of messages of various types to user.

The messages property of the MessageThread class should contain all the messages that you would like to display to the user. You can add as many or as few messages you like.

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

function sayHello() {
  const messageThread = new MessageThread();
  messageThread.messages = [ ... ]

  return [ messageThread ];
}

Note: A MessageThread must contain at least one message.

Text Message

Allows you send a simple text message to the user.

import { MessageThread, TextMessage } from "@stackchat/dynamic-content-toolkit";

function sayHello() {
  const textMessage = new TextMessage();
  textMessage.text = "Hello! world";

  const messageThread = new MessageThread();
  messageThread.messages.push(textMessage);

  return [ messageThread ];
}

Image Message

Allows you send an image to the user.

import { MessageThread, ImageMessage } from "@stackchat/dynamic-content-toolkit";

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

  const messageThread = new MessageThread();
  messageThread.messages.push(imageMessage);

  return [ messageThread ];
}

List Message / Carousel Message

Allows you to send a list or carousel of cards to user.

Link Button

Creates a button which navigates to a defined URI on user click or tap. The URI to be navigated to always opens in either the parent window of the chat view or in a new window based on platform support.

import { LinkButton } from "@stackchat/dynamic-content-toolkit";

const linkButton = new LinkButton();
linkButton.text = "Go to Website";
linkButton.uri = "https://stackchat.com";

Webview Button

Creates a button which displays the defined URI. The messenger will try to display the URI inside the chat view if supported by the platform, otherwise, it falls back to the behaviour of a LinkButton.

import { WebviewButton } from "@stackchat/dynamic-content-toolkit";

const webviewButton = new WebviewButton();
webviewButton.text = "Open Website";
webviewButton.uri = "https://stackchat.com";

Postback Button

Creates a button that executes custom code as specified by the developer. The handler function must be defined.

Postback Buttons allow you to execute your own custom code in response to user actions. Postback Buttons buttons can be added to Carousels Cards or postbacks can be triggered programmatically in Stackchat Web Messenger by adding delegates.

Postbacks contain payloads which are consumed by the Cloud Function that has been assigned as the handler for a given postback. The payload is attached to the extraData argument of your cloud function.

Note: Postback Buttons are not supported on WeChat.

import { PostbackButton } from "@stackchat/dynamic-content-toolkit";

const postbackButton = new PostbackButton();
postbackButton.text = "Show Website Address";

// The data object below is sent as is to the handler
// function defined below
postbackButton.payload = {
  handler: "myCloudFunction",
  data: {
    text: "https://stackchat.com"
  }
}

export function myCloudFunction(userData, extraData) {
  console.log(extraData.postBackPayload.text);
}

Message Card

import { MessageCard, MessageCardImageSize } from "@stackchat/dynamic-content-toolkit";

const messageCard = new MessageCard();
messageCard.title = "Stackchat Website";
messageCard.description = "Three different ways to access Stackchat's official website.";
messageCard.size = MessageCardImageSize.Compact
messageCard.buttons = [ linkButton, webviewButton, postbackButton ] // buttons created above

Combining all the above

Though there exist different classes for ListMessage and CarouselMessage, it they are technically similar. You can replace ListMessage with CarouselMessage in the code below and it will be still correct.

import { MessageThread, ListMessage } from "@stackchat/dynamic-content-toolkit";

function showOptions() {
  const listMessage = new ListMessage()
  listMessage.items = [ messageCard ] // created above

  const messageThread = new MessageThread()
  messageThread.messages.push(listMessage)

  return [ messageThread ]
}