Options
All
  • Public
  • Public/Protected
  • All
Menu

Module messenger/components

Index

Component

The log out button triggers the account unlinking flow.

props

MediaProps

guides

Check official send API doc and reference.

The button template allows you to send a structured message that includes text and buttons.

props

ButtonTemplateProps

guides

Check official doc and reference.

The Call Button can be used to initiate a phone call. This button can be used with the Button and Generic Templates.

props

CallButtonProps

guides

Check official doc and reference.

EmailReply: MessengerComponent<{}, PartSegment<any>> = ...

Add an e-amil quick reply button after an Expression

props

{}

guides

Check official doc and reference.

Annotate all the children content with the message settings attributes and append quick replies after the content.

props

ExpressionProps

guides

Check official doc and reference.

The log out button triggers the account unlinking flow.

props

MediaProps

guides

Check official send API doc and reference.

The game play button launches an Instant Game that is associated with the bot page.

props

GamePlayButtonProps

guides

Check official doc and reference.

The item of the GenericTemplate.

props

GenericItemProps

guides

Check official doc and reference.

The generic template allows you to send a structured message that includes an image, text and buttons. A generic template with multiple templates described in the elements array will send a horizontally scrollable carousel of items, each composed of an image, text and buttons.

props

GenericTemplateProps

guides

Check official doc and reference.

The log out button triggers the account unlinking flow.

props

MediaProps

guides

Check official send API doc and reference.

The receipt template allows you to send an order confirmation as a structured message.

props

LatexProps

guides

Check help page.

The log in button triggers the account linking authentication flow.

props

LoginButtonProps

guides

Check official doc and reference.

LogoutButton: MessengerComponent<{}, PartSegment<any>> = ...

The log out button triggers the account unlinking flow.

props

{}

guides

Check official doc and reference.

Display the confirmation icon.

props

{}

guides

Check official doc and reference.

The media template allows you to send a structured message that includes an image or video, and an optional button.

props

MediaTemplate

guides

Check official doc and reference.

Pass thread control from your app to another app. The app that will receive thread ownership will receive a pass_thread_control webhook event.

props

PassThreadControlProps

guides

Check official doc and reference.

PhoneReply: MessengerComponent<{}, PartSegment<any>> = ...

Add an phone quick reply button after an Expression

props

{}

guides

Check official doc and reference.

When the postback button is tapped, the Messenger Platform sends an event to your postback webhook. This is useful when you want to invoke an action in your bot. This button can be used with the Button Template and Generic Template.

props

PostbackButtonProps

guides

Check official doc and reference.

The item of ReceiptTemplate

props

ReceiptItemProps

guides

Check official doc and reference.

The receipt template allows you to send an order confirmation as a structured message.

props

ReceiptTemplateProps

guides

Check official doc and reference.

The Messenger Platform's One-Time Notification API (Beta) allows a page to request a user to send one follow-up message after 24-hour messaging window have ended. The user will be offered to receive a future notification. Once the user asks to be notified, the page will receive a token which is an equivalent to a permission to send a single message to the user. The token can only be used once and will expire within 1 year of creation.

props

RequestOneTimeNotifProps

guides

Check official doc.

Ask for control of a specific thread as a Secondary Receiver app. The Primary Receiver app will receive a messaging_handovers webhook event with the request_thread_control property when/request_thread_control` is called.

props

{}

guides

Check official doc and reference.

Take control of a specific thread from a Secondary Receiver app as the Primary Receiver app. The Secondary Receiver app will receive a take_thread_control webhook event when it loses thread control.

props

{}

guides

Check official doc and reference.

Add an text quick reply button with postback payload after an Expression.

props

TextReplyProps

guides

Check official doc and reference.

Remove the typing bubble.

props

{}

guides

Check official doc and reference.

Display the typing bubble.

props

{}

guides

Check official doc and reference.

The URL Button opens a webpage in the Messenger webview. This button can be used with the Button and Generic Templates.

props

UrlButtonProps

guides

Check official doc and reference.

The log out button triggers the account unlinking flow.

props

MediaProps

guides

Check official send API doc and reference.

Props

ButtonTemplateProps: { buttons: MachinatNode; children: MachinatNode; sharable?: boolean }

Type declaration

  • buttons: MachinatNode

    1-3 button elements to append after the text.

  • children: MachinatNode

    Textual node with content up to 640 characters. Text will appear above the buttons.

  • Optional sharable?: boolean
CallButtonProps: { number: string; title: string }

Type declaration

  • number: string

    Format must have "+" prefix followed by the country code, area code and local number.

  • title: string

    Button title, 20 character limit.

ExpressionProps: { children: MachinatNode; messagingType?: "RESPONSE" | "UPDATE" | "MESSAGE_TAG"; metadata?: string; notificationType?: "REGULAR" | "SILENT_PUSH" | "NO_PUSH"; personaId?: string; quickReplies?: MachinatNode; tag?: "CONFIRMED_EVENT_UPDATE" | "POST_PURCHASE_UPDATE" | "ACCOUNT_UPDATE" | "HUMAN_AGENT" }

Type declaration

  • children: MachinatNode

    Content nodes to be annotated.

  • Optional messagingType?: "RESPONSE" | "UPDATE" | "MESSAGE_TAG"

    The messaging type of the message being sent. For more information, see Sending Messages - Messaging Types. Default to 'RESPONSE'.

  • Optional metadata?: string

    Custom string that is delivered as a message echo. 1000 character limit.

  • Optional notificationType?: "REGULAR" | "SILENT_PUSH" | "NO_PUSH"

    Push notification type. REGULAR: sound/vibration SILENT_PUSH: on-screen notification only NO_PUSH: no notification Defaults to 'REGULAR'.

  • Optional personaId?: string

    The persona id to use.

  • Optional quickReplies?: MachinatNode

    QuickReply elements to be sent with messages.

  • Optional tag?: "CONFIRMED_EVENT_UPDATE" | "POST_PURCHASE_UPDATE" | "ACCOUNT_UPDATE" | "HUMAN_AGENT"

    The message tag to use when messagingType set to 'MESSAGE_TAG'. For more information, see Message Tags.

GamePlayButtonProps: { contextId?: string; payload?: string; playerId?: string; title: string }

Type declaration

  • Optional contextId?: string

    Context ID (Instant Game name-space) of the THREAD to play in.

  • Optional payload?: string

    This data will be sent to the game.

  • Optional playerId?: string

    Player ID (Instant Game name-space) to play against.

  • title: string

    Button title, 20 character limit.

GenericItemProps: { buttons?: MachinatNode; defaultAction?: MachinatNode; imageUrl?: string; subtitle?: string; title: string }

At least one property must be set in addition to title.

Type declaration

  • Optional buttons?: MachinatNode

    Button elements to append to the template. A maximum of 3 buttons is supported.

  • Optional defaultAction?: MachinatNode

    One UrlButton element to act as the default action executed when the template is tapped.

  • Optional imageUrl?: string

    The URL of the image to display in the template.

  • Optional subtitle?: string

    The subtitle to display in the template. 80 character limit.

  • title: string

    The title to display in the template. 80 character limit.

GenericTemplateProps: { children: MachinatNode; imageAspectRatio?: "horizontal" | "square"; sharable?: boolean }

Type declaration

  • children: MachinatNode

    GenericItem elements under the template. Specifying multiple elements will send a horizontally scrollable carousel of templates. A maximum of 10 elements is supported.

  • Optional imageAspectRatio?: "horizontal" | "square"

    The aspect ratio used to render images specified by element.image_url. Defaults to horizontal.

  • Optional sharable?: boolean
LatexProps: { children: MachinatNode }

Type declaration

  • children: MachinatNode

    Texual node to be wrapped in the LATEX block.

LoginButtonProps: { url: string }

Type declaration

  • url: string

    Authentication callback URL. Must use HTTPS protocol.

MediaProps: { assetTag?: string; attachmentId?: string; fileData?: string | Buffer | NodeJS.ReadableStream; fileInfo?: FileInfo; reusable?: boolean; url: string }

Type declaration

  • Optional assetTag?: string
  • Optional attachmentId?: string

    Set to true to make the saved asset sendable to other message recipients. Defaults to false.

  • Optional fileData?: string | Buffer | NodeJS.ReadableStream
  • Optional fileInfo?: FileInfo
  • Optional reusable?: boolean

    Set to true to make the saved asset sendable to other message recipients. Defaults to false.

  • url: string

    URL of the file to upload. Max file size is 25MB (after encoding). A Timeout is set to 75 sec for videos and 10 secs for every other file type.

MediaTemplateProps: { attachmentId?: string; buttons?: MachinatNode; mediaType: "image" | "video"; sharable?: boolean; url?: string }

Type declaration

  • Optional attachmentId?: string

    The attachment ID of the image or video. Cannot be used if url is set.

  • Optional buttons?: MachinatNode

    One optional button element to be appended to the template

  • mediaType: "image" | "video"

    The type of media being sent

  • Optional sharable?: boolean

    Set to true to enable the native share button in Messenger for the template message. Defaults to false.

  • Optional url?: string

    The URL of the image. Cannot be used if attachment_id is set.

PassThreadControlProps: { metadata?: string; targetAppId: number }

Type declaration

  • Optional metadata?: string

    Metadata passed to the receiving app in the pass_thread_control webhook event.

  • targetAppId: number

    The app ID to pass thread control to. Required if the Primary Receiver is passing thread control. If the Secondary Receiver is passing thread control, defaults to the app ID of the Primary Receiver. To pass thread control to the Page inbox, use app ID 263902037430900.

PostbackButtonProps: { payload: string; title: string }

Type declaration

  • payload: string

    This data will be sent back to your webhook. 1000 character limit.

  • title: string

    Button title. 20 character limit.

ReceiptItemProps: { currency?: string; imageUrl?: string; price: number; quantity?: number; subtitle?: string; title: string }

Type declaration

  • Optional currency?: string

    The currency of the item price.

  • Optional imageUrl?: string

    The URL of an image to be displayed with the item.

  • price: number

    The price of the item. For free items, '0' is allowed.

  • Optional quantity?: number

    The quantity of the item purchased.

  • Optional subtitle?: string

    The subtitle for the item, usually a brief item description.

  • title: string

    The name to display for the item.

ReceiptTemplateProps: { address?: string; adjustments?: { amount: number; name: string }[]; children: MachinatNode; currency: string; merchantName?: string; orderNumber: string; orderUrl?: string; paymentMethod: string; recipientName: string; sharable?: boolean; summary: { shipping_cost?: number; subtotal?: number; total_cost: number; total_tax?: number }; timestamp?: string | Date }

Type declaration

  • Optional address?: string

    The shipping address of the order.

  • Optional adjustments?: { amount: number; name: string }[]
  • children: MachinatNode

    Maximum of 100 {@line ReceiptItem} elements that describe items in the order. Sort order of the elements is not guaranteed.

  • currency: string

    The currency of the payment.

  • Optional merchantName?: string

    The merchant's name. If present this is shown as logo text.

  • orderNumber: string

    The order number. Must be unique.

  • Optional orderUrl?: string
  • paymentMethod: string

    The payment method used. Providing enough information for the customer to decipher which payment method and account they used is recommended. This can be a custom string, such as, "Visa 1234".

  • recipientName: string

    The recipient's name.

  • Optional sharable?: boolean

    Set to true to enable the native share button in Messenger for the template message. Defaults to false.

  • summary: { shipping_cost?: number; subtotal?: number; total_cost: number; total_tax?: number }
    • Optional shipping_cost?: number

      Optional. The shipping cost of the order.

    • Optional subtotal?: number

      Optional. The sub-total of the order.

    • total_cost: number

      The total cost of the order, including sub-total, shipping, and tax.

    • Optional total_tax?: number

      Optional. The tax of the order.

  • Optional timestamp?: string | Date

    Timestamp of the order in seconds.

RequestOneTimeNotifProps: { payload: string; title: string }

Type declaration

  • payload: string

    The data to be posted back with the one_time_notif_optin event.

  • title: string

    The title to be displayed in the request message, limited to 65 characters.

RequestThreadControlProps: { metadata?: string }

Type declaration

  • Optional metadata?: string

    Metadata passed back to the primary app in the request_thread_control webhook event.

TakeThreadContorlProps: { metadata?: string }

Type declaration

  • Optional metadata?: string

    Metadata passed back to the secondary app in the take_thread_control webhook event.

TextReplyProps: { imageUrl?: string; payload: string; title: string }

Type declaration

  • Optional imageUrl?: string

    URL of image to display on the quick reply button for text quick replies. Image should be a minimum of 24px x 24px. Larger images will be automatically cropped and resized. Required if title is an empty string.

  • payload: string

    Custom data that will be sent back to you via the messaging_postbacks webhook event. 1000 character limit.

  • title: string

    The text to display on the quick reply button. 20 character limit.

UrlButtonProps: { fallbackUrl?: string; hideShareButton?: boolean; messengerExtensions?: boolean; title: string; url: string; webviewHeightRatio?: "compact" | "tall" | "full" }

Type declaration

  • Optional fallbackUrl?: string

    The URL to use on clients that don't support Messenger Extensions. If this is not defined, the url will be used as the fallback. It may only be specified if messenger_extensions is true.

  • Optional hideShareButton?: boolean

    Set to true to disable the share button in the Webview (for sensitive info)

  • Optional messengerExtensions?: boolean

    Must be true if using Messenger Extensions.

  • title: string

    Button title. 20 character limit.

  • url: string

    This URL is opened in a mobile browser when the button is tapped. Must use HTTPS protocol if messenger_extensions is true.

  • Optional webviewHeightRatio?: "compact" | "tall" | "full"

    Height of the Webview.

Generated using TypeDoc