Documentation - Flow.ai
  • Getting started
  • Triggers & Replies
  • Actions
  • Integrations
  • Guides
  • API

›Messaging

Integrations

  • Overview
  • Messaging

    • Capabilities
    • Web widget
    • WhatsApp
    • Messenger
    • Telegram
    • Twilio
    • MessageMedia

    Customer service

    • Coosto
    • Freshchat
    • Front
    • Khoros
    • Sparkcentral
    • Zendesk

    Analytics

    • Chatbase
    • Google Analytics

    Voice

    • Twilio Voice
    • Alexa
    • Google Assistant

    Other

    • APIs
    • Slack
    • Zapier

Facebook Messenger

If you are new to the Messenger platform, in search of advanced features like the Send to Messenger button, or ready to deploy your Messenger bot to the public, these docs are for you!

Capabilities

Facebook Messenger supports a wide variety of reply actions as seen in the messaging capabilities grid. Below is a detailed view of each capability.

Text

Messenger displays any plain text messages.

Text docs - JS template docs
Text
Plain text messages
Messenger displays any plain text messages.
Emojis

Messenger displays any unicode emoji sent in text messages. Mobile users can use the emoji keyboard on their device to send them.

Emojis docs - JS template docs
Emojis
Unicode emojis
Messenger displays any unicode emoji sent in text messages. Mobile users can use the emoji keyboard on their device to send them.
Image

Messenger displays static images.

Image docs - JS template docs
Image
Display static images
Messenger displays static images.
File

Messenger displays files and allows users to download them.

File docs - JS template docs
File
Send and receive any file types
Messenger displays files and allows users to download them.
Video

Messenger displays videos and allows users to play them.

Video docs - JS template docs
Video
Display video
Messenger displays videos and allows users to play them.
Audio

Messenger provides audios and allows users to play them.

Audio docs - JS template docs
Audio
Play audio
Messenger provides audios and allows users to play them.
Location

Messenger displays Google Maps link of the location. Location messages include longitude and latitude coordinates.

Location docs - JS template docs
Location
Send and receive geolocation
Messenger displays Google Maps link of the location. Location messages include longitude and latitude coordinates.
Card

Messenger displays cards. Cards must include title and optionally can include subtitle, media, action and buttons.

Card docs - JS template docs
Card
Display a card that can contain text, image and action buttons
Messenger displays cards. Cards must include title and optionally can include subtitle, media, action and buttons.
Carousel

Messenger displays carousels that contain cards.

Carousel docs - JS template docs
Carousel
Display a horizontally scrollable set of cards
Messenger displays carousels that contain cards.
Buttons

Messenger displays buttons.

Buttons docs - JS template docs
Buttons
Display buttons
Messenger displays buttons.
Quick replies

Messenger displays quick replies. They are ideal for yes / no type of questions. Max 10 Quick replies.

Quick replies docs - JS template docs
Quick replies
Display buttons with quick replies
Messenger displays quick replies. They are ideal for yes / no type of questions. Max 10 Quick replies.
OTNR

Messenger provides one-time notification which allows you to send messages to subscribers beyond 24 hours as long as they give you explicit permission.

OTNR
Messenger one time request notification
Messenger provides one-time notification which allows you to send messages to subscribers beyond 24 hours as long as they give you explicit permission.

Configuration

Flow.ai provides a one-click installation for Facebook Messenger

What you'll need

  • Facebook Page: A Facebook Page will be used as the identity of your project or bot. When people interact with your solution, they will see the Page name and the Page profile picture.
  • Permissions: Your user account needs to have the proper page permissions to connect Flow.ai to the intended Facebook page.

Connecting

Messenger click to install

  1. Add a new Messenger integration within the Flow.ai dashboard integrations section
  2. Press the + button and choose Messenger from the messaging section
  3. After adding, press the "Login with Facebook" button
  4. Choose all the permissions you want to give Flow.ai to connect with any Facebook pages
  5. Choose the facebook page you wish to connect with and press save

Note:

You connect Facebook to Flow.ai in general and not a single Flow.ai project. If you want to connect another project to a Facebook page, make sure you do not deselect a Page currently connected.

Testing

After the connection is complete, use the preview button (dropdown) in the top. This will open your connected Facebook Messenger Page.

Customization

Messenger provides detailed customization such as the welcome screen and a persistent menu.

Messenger click to install

Within the customization screen you can:

  • Add a welcome text for different languages and regions
  • Configure a get started button
  • Whitelist domain URLs

Within the persistent menu tab you can configure a persistent menu for one or more languages.

Messenger click to install

Discovery & Re-engagement

Facebook provides additional ways to opt-in to your bot. We've added an easy way to handle these opt-ins using events.

Messenger m.me links

By creating m.me links you can easily redirect users and trigger a specific flow.

Simply create a link in the format http://m.me/<PAGE_NAME>?ref=<EVENT_NAME>.

Here is an example that will trigger a flow that has an event named OPTIN_MESSENGER.

http://m.me/awesomecorp?ref=OPTIN_MESSENGER

Within the Flow design app you simply add an event trigger with the same name.

Requirements

In order to use the ref your app needs to comply with a couple of requirements:

  • Your Messenger app must have a get started button set to trigger events
  • The Page the Messenger app is connected to must be published to receive the referral parameter for all users, except those that have the developer, tester, or admin role

Use cases

Some use cases for m.me links are:

  • Sending users directly into a sales flow or marketing campaign
  • Using QR codes based on the m.me link that redirect users into a pickup service flow
  • Handing off Facebook users that are communicating on a public Facebook page and redirecting them into a private channel

Send to Messenger plugin

The triggering of events also works with Send to Messenger plugins. Simply provide the event name to trigger with the data-ref option.

Ads

Even Facebooks Ads can be used the same way as buttons and links. Using attribution you'll need to specify the event name.

Example:

{
   "source": "ADS",
   "type": "OPEN_THREAD",
   "ad_id": "6045246247433",
   "ref": "OPTIN_MESSENGER" // Only included if specified in "URL Params" in the Ad as "ref=OPTIN_MESSENGER"
}

Analytics

Facebook Analytics allows you to understand and optimize your complete customer journey across mobile, web, bots, offline, and more.

Flow.ai provides custom app events for analytics. Whenever you apply a tag within your flow (that confirms to Facebook guidelines), Flow.ai will automatically apply this tag as a custom app event.

This opens up use cases like funnel optimization, re-targeting and opt-in campaigns.

Webviews

Flow.ai supports Messenger webviews using buttons. You can control the use of Messenger extensions by adding query parameters to your webview url.

The following example would open a webview in compact height supporting the Messenger extensions SDK.

https://www.mywebview.com/?extensions=true&height=compact
Query paramDescriptionExample
extensionsAdd extensions=true to indicate your web view supports the Messenger Extensions SDKhttps://mywebview.com/?extensions=true
heightSpecify the webview height ratio. Valid values are: compact, tall, full.https://mywebview.com/?height=compact
shareSet to hide to disable the share button in the Webview (for sensitive info). This does not affect any shares initiated by the developer using Extensions.https://mywebview.com/?share=hide
fallbackThe 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 extensions is true.https://mywebview.com/?fallback=https%3A%2F%2Ffallbackurl.com&extensions=true

Custom Facebook App

The preferred way is to make use of the "connect to Facebook" button to connect your Facebook page with Flow.ai. Flow.ai also supports connecting with a custom Facebook Messenger App.

Requirements

  • Facebook Developer account. You can create a one at the Facebook Developer website.
  • Facebook App: The Facebook App contains the settings for your Messenger Platform integration. This is where you will setup your webhook, retrieve your page access token, and submit your app for approval.
  • Facebook Page: A Facebook Page will be used as the identity of your bot. When people chat with your bot, they will see the Page name and the Page profile picture.

Add integration

  • Login to the Flow.ai dashboard
  • Open the integrations section and add a new Messenger channel

Connect Facebook Page to Messenger

  • Login at the Facebook Developer website
  • Choose at My Apps the option Create new App
  • Choose basic setup
  • Decide what to name your app, add a contact email and choose a category (like Apps for pages)
  • When the app is created select Add Product
  • Choose Messenger and Get started
  • Select your Facebook page you want to connect
  • Select the Page Access Token and copy the Page Access Token
  • Switch to the Flow.ai dashboard and paste the Page Access Token
  • Press the verify button and press save

Configure webhooks

  • Go back to the Facebook Developer website
  • Choose your app under My Apps
  • Choose Messenger
  • Choose Setup webhooks under the item called Webhooks
  • Switch back to the Flow.ai dashboard
  • Copy and paste the Callback url from Flow.ai to the developer platform
  • Copy and paste the Verify token from Flow.ai to the developer platform
  • Check the following options: messages, message_echoes, messaging_postbacks messaging_optins en message_deliveries
  • Press Verify and save

Testing

After adding Messenger you can test your Messenger integration straight away. Only admins can test your bot though, so if you want other people interact with your bot you'll need to add them as a tester.

If you want the world yo use your Messenger app, you'll need to publish it.

Publishing

When you want to enable your bot for the world to interact with you'll need to complete the review proces.

  • Login to https://developers.facebook.com
  • Choose your app under My Apps
  • Choose App Review for Messenger
  • Mark all options you need under Add to Submission

Read more

  • How to use Facebook Messenger's m.me link in your chatbot
  • How to configure handover protocol for Facebook Messenger bots
  • Multichannel design - How to create 1 chatbot for WhatsApp, Messenger and Web
  • Chatbot Marketing: From Facebook ad to conversion
← WhatsAppTelegram →
  • Capabilities
  • Configuration
    • What you'll need
    • Connecting
    • Testing
  • Customization
  • Discovery & Re-engagement
    • Messenger m.me links
    • Send to Messenger plugin
    • Ads
  • Analytics
  • Webviews
  • Custom Facebook App
    • Requirements
    • Add integration
    • Connect Facebook Page to Messenger
    • Configure webhooks
    • Testing
    • Publishing
  • Read more
Docs
Getting StartedBasic conceptsGuides
Platform
StatusSlack community
Resources
Blog
Copyright © 2021 Flow.ai