Messenger Platform
 
 
 

URL Button

The URL Button can be used to open a web page in the in-app browser. This button can be used with the Button and Generic Templates.

  1. How Webviews Work
  2. Implementation
  3. Linking to Your Bot from a URL Button

How Webviews Work

Webviews in Messenger offer a variety of customization options including full control over height, share button, and how they handle Messenger Extensions. Using JavaScript, you can use functionality like getting user ID and context, handling payments, and much more.

More on Webviews →

Implementation

To get started, calling the Send API, add a button with the type web_url, and include the URL you want to open in the url field.

    ...
    
    "buttons":[
      {
        "type":"web_url",
        "url":"https://petersfancyapparel.com/classic_white_tshirt",
        "title":"View Item",
        "webview_height_ratio": "compact"
      }
    ]
    
    ...

You can also specify a variety of attributes to better control how the webview opens:

    ...

    "buttons":[
      {
        "type":"web_url",
        "url":"https://petersfancyapparel.com/criteria_selector",
        "title":"Select Criteria",
        "webview_height_ratio": "full",
        "messenger_extensions": true,  
        "fallback_url": "https://petersfancyapparel.com/fallback"
      }
    ]
        
    ...

buttons Fields

Property Name Description Type Required

type

Type of button. Must be web_url.

Enum

Y

title

Button title. 20 character limit.

String

Y

url

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

String

Y

webview_height_ratio

Height of the Webview. Valid values: compact, tall, full.

Enum

N, default is full

messenger_extensions

Must be true if using Messenger Extensions.

Boolean

N

fallback_url

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. Must use HTTPS protocol.

String

N

webview_share_button

Set 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.

String

N

Linking to Your Bot from a URL Button

If you're specifying a URL button as part of a custom message to be shared in the share button or inside the webview, you may wish for the recipient of the share to enter your bot using the button (rather than a URL in the webview).

To enable do, all you must do is link to the bot using m.me. If you want the recipient of the share to activate a specific flow when they click the link, consider adding a ref parameter.

For instance:

    ...

    "buttons":[
      {
        "type":"web_url",
        "url":"https://m.me/petershats?ref=take_quiz",
        "title":"Take the Hat Quiz",
      }
    ]
        
    ...

When the user taps the button, the bot will directly open, bypassing the webview.