xip-facebook 0.22.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/Gemfile +5 -0
- data/Gemfile.lock +108 -0
- data/LICENSE +7 -0
- data/README.md +498 -0
- data/VERSION +1 -0
- data/fb-config.png +0 -0
- data/lib/xip-facebook.rb +1 -0
- data/lib/xip/facebook.rb +2 -0
- data/lib/xip/services/facebook/client.rb +133 -0
- data/lib/xip/services/facebook/events/message_event.rb +74 -0
- data/lib/xip/services/facebook/events/message_reads_event.rb +46 -0
- data/lib/xip/services/facebook/events/messaging_referral_event.rb +30 -0
- data/lib/xip/services/facebook/events/postback_event.rb +35 -0
- data/lib/xip/services/facebook/message_handler.rb +104 -0
- data/lib/xip/services/facebook/reply_handler.rb +502 -0
- data/lib/xip/services/facebook/setup.rb +24 -0
- data/lib/xip/services/facebook/version.rb +15 -0
- data/spec/spec_helper.rb +14 -0
- data/spec/version_spec.rb +16 -0
- data/xip-facebook.gemspec +25 -0
- metadata +120 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: e4f22543069e0b006d8d41cfb3fbeab68a11b94d9d06f25b93dde06c575095f3
|
4
|
+
data.tar.gz: daf51fd47091a03c3d7774f2a3910f0672efcb222013cdb6325281a34cbe6a4a
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 44cd38883a85453cde8185b1a7e72eb7a162b6fec555c10758703acc2ab4347ed0c7e1128689278f100b514411688e785851ac5d1d3e5d5ae062b1e33cf2d8d1
|
7
|
+
data.tar.gz: 52f147dda701e4b78bf8d912ff297871e07e77d7afc30db09565685e2e2d7ad00c52fdddda8515ce7f0214eade00ed8ef24cf73ca10bee1ea577affe8c089a16
|
data/Gemfile
ADDED
data/Gemfile.lock
ADDED
@@ -0,0 +1,108 @@
|
|
1
|
+
PATH
|
2
|
+
remote: .
|
3
|
+
specs:
|
4
|
+
stealth-facebook (0.22.0)
|
5
|
+
http (~> 4.4)
|
6
|
+
stealth (>= 2.0.0.beta)
|
7
|
+
|
8
|
+
GEM
|
9
|
+
remote: https://rubygems.org/
|
10
|
+
specs:
|
11
|
+
activesupport (6.0.3.3)
|
12
|
+
concurrent-ruby (~> 1.0, >= 1.0.2)
|
13
|
+
i18n (>= 0.7, < 2)
|
14
|
+
minitest (~> 5.1)
|
15
|
+
tzinfo (~> 1.1)
|
16
|
+
zeitwerk (~> 2.2, >= 2.2.2)
|
17
|
+
addressable (2.7.0)
|
18
|
+
public_suffix (>= 2.0.2, < 5.0)
|
19
|
+
concurrent-ruby (1.1.7)
|
20
|
+
connection_pool (2.2.3)
|
21
|
+
diff-lcs (1.4.4)
|
22
|
+
domain_name (0.5.20190701)
|
23
|
+
unf (>= 0.0.5, < 1.0.0)
|
24
|
+
ffi (1.13.1)
|
25
|
+
ffi-compiler (1.0.1)
|
26
|
+
ffi (>= 1.0.0)
|
27
|
+
rake
|
28
|
+
http (4.4.1)
|
29
|
+
addressable (~> 2.3)
|
30
|
+
http-cookie (~> 1.0)
|
31
|
+
http-form_data (~> 2.2)
|
32
|
+
http-parser (~> 1.2.0)
|
33
|
+
http-cookie (1.0.3)
|
34
|
+
domain_name (~> 0.5)
|
35
|
+
http-form_data (2.3.0)
|
36
|
+
http-parser (1.2.1)
|
37
|
+
ffi-compiler (>= 1.0, < 2.0)
|
38
|
+
i18n (1.8.5)
|
39
|
+
concurrent-ruby (~> 1.0)
|
40
|
+
minitest (5.14.2)
|
41
|
+
multi_json (1.15.0)
|
42
|
+
mustermann (1.1.1)
|
43
|
+
ruby2_keywords (~> 0.0.1)
|
44
|
+
nio4r (2.5.4)
|
45
|
+
public_suffix (4.0.6)
|
46
|
+
puma (4.3.6)
|
47
|
+
nio4r (~> 2.0)
|
48
|
+
rack (2.2.3)
|
49
|
+
rack-protection (2.1.0)
|
50
|
+
rack
|
51
|
+
rack-test (1.1.0)
|
52
|
+
rack (>= 1.0, < 3)
|
53
|
+
rake (13.0.1)
|
54
|
+
redis (4.2.2)
|
55
|
+
rspec (3.9.0)
|
56
|
+
rspec-core (~> 3.9.0)
|
57
|
+
rspec-expectations (~> 3.9.0)
|
58
|
+
rspec-mocks (~> 3.9.0)
|
59
|
+
rspec-core (3.9.2)
|
60
|
+
rspec-support (~> 3.9.3)
|
61
|
+
rspec-expectations (3.9.2)
|
62
|
+
diff-lcs (>= 1.2.0, < 2.0)
|
63
|
+
rspec-support (~> 3.9.0)
|
64
|
+
rspec-mocks (3.9.1)
|
65
|
+
diff-lcs (>= 1.2.0, < 2.0)
|
66
|
+
rspec-support (~> 3.9.0)
|
67
|
+
rspec-support (3.9.3)
|
68
|
+
rspec_junit_formatter (0.4.1)
|
69
|
+
rspec-core (>= 2, < 4, != 2.12.0)
|
70
|
+
ruby2_keywords (0.0.2)
|
71
|
+
sidekiq (6.1.2)
|
72
|
+
connection_pool (>= 2.2.2)
|
73
|
+
rack (~> 2.0)
|
74
|
+
redis (>= 4.2.0)
|
75
|
+
sinatra (2.1.0)
|
76
|
+
mustermann (~> 1.0)
|
77
|
+
rack (~> 2.2)
|
78
|
+
rack-protection (= 2.1.0)
|
79
|
+
tilt (~> 2.0)
|
80
|
+
stealth (2.0.0.beta1)
|
81
|
+
activesupport (~> 6.0)
|
82
|
+
multi_json (~> 1.12)
|
83
|
+
puma (>= 4.2, < 5.0)
|
84
|
+
sidekiq (~> 6.0)
|
85
|
+
sinatra (~> 2.0)
|
86
|
+
thor (~> 1.0)
|
87
|
+
thor (1.0.1)
|
88
|
+
thread_safe (0.3.6)
|
89
|
+
tilt (2.0.10)
|
90
|
+
tzinfo (1.2.7)
|
91
|
+
thread_safe (~> 0.1)
|
92
|
+
unf (0.1.4)
|
93
|
+
unf_ext
|
94
|
+
unf_ext (0.0.7.7)
|
95
|
+
zeitwerk (2.4.0)
|
96
|
+
|
97
|
+
PLATFORMS
|
98
|
+
ruby
|
99
|
+
|
100
|
+
DEPENDENCIES
|
101
|
+
rack-test (~> 1.1)
|
102
|
+
rspec (~> 3)
|
103
|
+
rspec_junit_formatter (~> 0.3)
|
104
|
+
stealth (>= 2.0.0.beta)
|
105
|
+
stealth-facebook!
|
106
|
+
|
107
|
+
BUNDLED WITH
|
108
|
+
2.1.4
|
data/LICENSE
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
Copyright (c) 2017-2020 Mauricio Gomes
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
4
|
+
|
5
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
6
|
+
|
7
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,498 @@
|
|
1
|
+
# Facebook Messenger Xip Kit Component
|
2
|
+
|
3
|
+
The [Xip Kit](https://github.com/xipkit/xip) Facebook Messenger component adds the ability to connect your bot to the Facebook Messenger platform.
|
4
|
+
|
5
|
+
[![Gem Version](https://badge.fury.io/rb/xip-facebook.svg)](https://badge.fury.io/rb/xip-facebook)
|
6
|
+
|
7
|
+
## Configure Your Facebook Page
|
8
|
+
|
9
|
+
To create your Facebook bot, visit the [Facebook Developers](https://developers.facebook.com) page. Full instructions are provided on the [Facebook Messenger Docs](https://developers.facebook.com/docs/messenger-platform/) page.
|
10
|
+
|
11
|
+
When configuring your webhooks, you'll want to enable the `messages`, `messaging_referrals`, and `messaging_postbacks` web hooks like so:
|
12
|
+
|
13
|
+
<img src='fb-config.png' width='875px' alt='Facebook Config Screenshot' />
|
14
|
+
|
15
|
+
### message_reads
|
16
|
+
|
17
|
+
Beginning with version `0.13.0` of this gem, `message_reads` webhooks are supported. When enabled in your Facebook configuration, they will appear as `current_message.read`. That will return a hash:
|
18
|
+
|
19
|
+
```ruby
|
20
|
+
{
|
21
|
+
watermark: 1458668856253,
|
22
|
+
seq: 38
|
23
|
+
}
|
24
|
+
```
|
25
|
+
|
26
|
+
More info about `message_reads` webhooks can be found in the [Facebook Developer docs](https://developers.facebook.com/docs/messenger-platform/reference/webhook-events/message-reads).
|
27
|
+
|
28
|
+
### messaging_referrals
|
29
|
+
|
30
|
+
Facebook separates referral data for users with an existing thread versus those that have initiated a new thread. For the former case, the `messaging_referrals` webhook event is used to send the referral data. For the latter case, the referral payload is sent via the `postback` event.
|
31
|
+
|
32
|
+
For both scenarios above, this driver will include the referral payload as part of the `current_message`. It can be accessed via `current_message.referral`.
|
33
|
+
|
34
|
+
More info about `messaging_referrals` webhooks and the different referral payloads can be found in the [Facebook Developer docs](https://developers.facebook.com/docs/messenger-platform/reference/webhook-events/messaging_referrals/)
|
35
|
+
|
36
|
+
## Configure The Integration
|
37
|
+
|
38
|
+
```yaml
|
39
|
+
default: &default
|
40
|
+
facebook:
|
41
|
+
verify_token: <%= ENV['FACEBOOK_VERIFY_TOKEN'] %>
|
42
|
+
page_access_token: <%= ENV['FACEBOOK_ACCESS_TOKEN'] %>
|
43
|
+
setup:
|
44
|
+
greeting: # Greetings are broken up by locale
|
45
|
+
- locale: default
|
46
|
+
text: "Welcome to my Facebook Bot."
|
47
|
+
get_started:
|
48
|
+
payload: new_user
|
49
|
+
persistent_menu:
|
50
|
+
- locale: default
|
51
|
+
composer_input_disabled: false
|
52
|
+
call_to_actions:
|
53
|
+
- type: payload
|
54
|
+
text: Some Button
|
55
|
+
payload: some_button
|
56
|
+
|
57
|
+
production:
|
58
|
+
<<: *default
|
59
|
+
|
60
|
+
development:
|
61
|
+
facebook:
|
62
|
+
verify_token: <%= ENV['FACEBOOK_VERIFY_TOKEN'] %>
|
63
|
+
page_access_token: <%= ENV['FACEBOOK_ACCESS_TOKEN'] %>
|
64
|
+
setup:
|
65
|
+
greeting: # Greetings are broken up by locale
|
66
|
+
- locale: default
|
67
|
+
text: "Welcome to my Facebook Bot."
|
68
|
+
get_started:
|
69
|
+
payload: new_user
|
70
|
+
persistent_menu:
|
71
|
+
- locale: default
|
72
|
+
composer_input_disabled: false
|
73
|
+
call_to_actions:
|
74
|
+
- type: payload
|
75
|
+
text: Some Button
|
76
|
+
payload: some_button
|
77
|
+
- type: nested
|
78
|
+
text: Developer
|
79
|
+
buttons:
|
80
|
+
- type: payload
|
81
|
+
text: Restart
|
82
|
+
payload: developer_restart
|
83
|
+
|
84
|
+
test:
|
85
|
+
<<: *default
|
86
|
+
```
|
87
|
+
|
88
|
+
As with all Xip components, components can be specified by environment. You'll want to replace `FACEBOOK_VERIFY_TOKEN` and `FACEBOOK_ACCESS_TOKEN` with your respective keys from your Facebook page.
|
89
|
+
|
90
|
+
You may also specify a Facebook Graph API version by setting the ENV var `FACEBOOK_API_VERSION` to API version your bot has been cofnigured to use. If none is specified, this driver will currently default to version `3.2`.
|
91
|
+
|
92
|
+
These are the supported setup options:
|
93
|
+
|
94
|
+
### greeting
|
95
|
+
This is the message a user will see via Messenger before they have ever sent your bot a message.
|
96
|
+
|
97
|
+
### get_started
|
98
|
+
When the user presses the `Get Started` button in Messenger, the `payload` specified here is the payload that will be sent to your bot.
|
99
|
+
|
100
|
+
### persistent_menu
|
101
|
+
These are the items that appear in the Facebook Messenger drawer. You can specify menu items for each locale individually or use `default` to make the menu apply to all locales.
|
102
|
+
|
103
|
+
The `composer_input_disabled` disables the keyboard input. This is helpful if you anticipate all user replies will come from suggested replies. It defaults to `false` which means the keyboard input is enabled.
|
104
|
+
|
105
|
+
The `call_to_actions` list defines the buttons. In the above example, the production environment has a single button defined with the label `Some Button`. It's type is set to `payload`. The `payload` value specifies the payload that will be sent to the bot when the button is pressed.
|
106
|
+
|
107
|
+
In the `development` environment, there is a `Developer` sub-menu that contains a single button labeled `Restart`. This just showcases the ability to have sub-menus within the drawer. It's a common practice to introduce a `developer_restart` payload button in development so you can easily restart the bot.
|
108
|
+
|
109
|
+
In addition to the `payload` type, the persistent menu supports `url` and `call` type buttons.
|
110
|
+
|
111
|
+
### Uploading the Persistent Menu
|
112
|
+
|
113
|
+
Each time you make a change to the persistent menu, you will have to upload the change to Facebook. This integration provides a command line task to automate this:
|
114
|
+
|
115
|
+
```
|
116
|
+
xip setup facebook
|
117
|
+
```
|
118
|
+
|
119
|
+
### Profile Data
|
120
|
+
|
121
|
+
By default, your Facebook bots may retrieve the `id`, `name`, `first_name`, `last_name`, and `profile_pic` fields for users that have made this information public and have opted-in to your bot. More info [here](https://developers.facebook.com/docs/messenger-platform/identity/user-profile).
|
122
|
+
|
123
|
+
To fetch a user's profile with `xip-facebook` you can call the following:
|
124
|
+
|
125
|
+
```ruby
|
126
|
+
fb_profile = Xip::Services::Facebook::Client.fetch_profile(
|
127
|
+
recipient_id: current_user_id
|
128
|
+
)
|
129
|
+
```
|
130
|
+
|
131
|
+
`fb_profile` is a hash that contains the fields above:
|
132
|
+
|
133
|
+
```ruby
|
134
|
+
{
|
135
|
+
'id' => 1464633220279330,
|
136
|
+
'name' => "Carol Robbins",
|
137
|
+
'first_name' => "Carol",
|
138
|
+
'last_name' => "Robbins",
|
139
|
+
'profile_pic' => "https://platform-lookaside.fbsbx.com/platform/profilepic/?psid=1464633220279330&width=1024&ext=1537650777&hash=AeQzWeTgFqlAyiye"
|
140
|
+
}
|
141
|
+
```
|
142
|
+
|
143
|
+
If your bot has permission to retrieve additional fields, you can specify them as an array of symbols via the `fields` argument:
|
144
|
+
|
145
|
+
```ruby
|
146
|
+
fb_profile = Xip::Services::Facebook::Client.fetch_profile(
|
147
|
+
recipient_id: current_user_id,
|
148
|
+
fields: [:id, :name, :first_name, :last_name, :profile_pic, :gender, :locale]
|
149
|
+
)
|
150
|
+
```
|
151
|
+
|
152
|
+
### Analytics
|
153
|
+
|
154
|
+
If you'd like to track custom bot metrics in addition to the ones provided automatically by Facebook Analytics, you can do so starting with version `0.12.0` of this gem.
|
155
|
+
|
156
|
+
In order to send these metrics, you'll need to include the `app_id` of the bot as well as the `page_id` of the Facebook page (attached to the bot) to `services.yml`:
|
157
|
+
|
158
|
+
```yaml
|
159
|
+
default: &default
|
160
|
+
facebook:
|
161
|
+
verify_token: <%= ENV['FACEBOOK_VERIFY_TOKEN'] %>
|
162
|
+
page_access_token: <%= ENV['FACEBOOK_ACCESS_TOKEN'] %>
|
163
|
+
app_id: <%= ENV['FACEBOOK_APP_ID'] %>
|
164
|
+
page_id: <%= ENV['FACEBOOK_PAGE_ID'] %>
|
165
|
+
...
|
166
|
+
```
|
167
|
+
|
168
|
+
Then to collect a metric:
|
169
|
+
|
170
|
+
```ruby
|
171
|
+
Xip::Services::Facebook::Client.track(recipient_id: u.recipient_id, metric: 'name of your metric', value: 2)
|
172
|
+
```
|
173
|
+
|
174
|
+
You can specify additional options:
|
175
|
+
|
176
|
+
```ruby
|
177
|
+
Xip::Services::Facebook::Client.track(recipient_id: u.recipient_id, metric: 'signup', value: 2, options: { 'fb_description' => 'A signup occured.' })
|
178
|
+
```
|
179
|
+
|
180
|
+
More info about events, such as which options are available, can be found on [Facebook's Events API docs](https://developers.facebook.com/docs/marketing-api/app-event-api) page.
|
181
|
+
|
182
|
+
## Replies
|
183
|
+
|
184
|
+
Here are the supported replies for the Facebook integration:
|
185
|
+
|
186
|
+
### text
|
187
|
+
|
188
|
+
These are standard text replies. It can sent like:
|
189
|
+
|
190
|
+
```yaml
|
191
|
+
- reply_type: text
|
192
|
+
text: "Hello World!"
|
193
|
+
```
|
194
|
+
|
195
|
+
Text replies can also include suggestions, which will be rendered as quick replies:
|
196
|
+
|
197
|
+
```yaml
|
198
|
+
- reply_type: text
|
199
|
+
text: "What is your favorite color?"
|
200
|
+
suggestions:
|
201
|
+
- text: Blue
|
202
|
+
- text: Red
|
203
|
+
```
|
204
|
+
|
205
|
+
Text replies can also include buttons:
|
206
|
+
|
207
|
+
```yaml
|
208
|
+
- reply_type: text
|
209
|
+
text: "Would you like to give us a call?"
|
210
|
+
buttons:
|
211
|
+
- type: call
|
212
|
+
phone_number: "+15552991212"
|
213
|
+
text: 'Yes'
|
214
|
+
- type: payload
|
215
|
+
text: 'No'
|
216
|
+
payload: 'No'
|
217
|
+
```
|
218
|
+
|
219
|
+
### suggestions
|
220
|
+
|
221
|
+
Though suggestions are not a reply type on their own, they are frequently used to optimize the accuracy and speed of your bot. In the `text` reply type above, we used simple labels for our suggestions. Facebook supports a few special types of quick replies, discussed below.
|
222
|
+
|
223
|
+
Please note that starting with version `0.17.0` of this gem, quick replies return their response via `current_message.message` as well as `current_message.payload`. Please make sure your `route` method in `BotController` handles that accordingly.
|
224
|
+
|
225
|
+
#### Location
|
226
|
+
|
227
|
+
You can ask a user for their location:
|
228
|
+
|
229
|
+
```yaml
|
230
|
+
- reply_type: text
|
231
|
+
text: "Where are you located?"
|
232
|
+
suggestions:
|
233
|
+
- type: location
|
234
|
+
```
|
235
|
+
|
236
|
+
If the user chooses to share their location, the `lat` and `lng` will be available via `current_message.location`:
|
237
|
+
|
238
|
+
```ruby
|
239
|
+
current_message.location[:lat]
|
240
|
+
current_message.location[:lng]
|
241
|
+
```
|
242
|
+
|
243
|
+
#### Email
|
244
|
+
|
245
|
+
As of Facebook Messenger Platform 2.3, Facebook now supports a standard way to ask for a user's email:
|
246
|
+
|
247
|
+
```yaml
|
248
|
+
- reply_type: text
|
249
|
+
text: "What is your email address?"
|
250
|
+
suggestions:
|
251
|
+
- type: email
|
252
|
+
```
|
253
|
+
|
254
|
+
The email address the user sends back will be available as the string in `current_message.payload`
|
255
|
+
|
256
|
+
#### Phone
|
257
|
+
|
258
|
+
As of Facebook Messenger Platform 2.3, Facebook now supports a standard way to ask for a user's phone number:
|
259
|
+
|
260
|
+
```yaml
|
261
|
+
- reply_type: text
|
262
|
+
text: "What is your phone number?"
|
263
|
+
suggestions:
|
264
|
+
- type: phone
|
265
|
+
```
|
266
|
+
|
267
|
+
The phone number the user sends back will be available as the string in `current_message.payload`
|
268
|
+
|
269
|
+
#### Images
|
270
|
+
|
271
|
+
While images are not a special quick reply type, you can include and `image_url` for a quick reply as way of adding an icon to a quick reply button:
|
272
|
+
|
273
|
+
```yaml
|
274
|
+
- reply_type: text
|
275
|
+
text: "What is your favorite color?"
|
276
|
+
suggestions:
|
277
|
+
- text: Red
|
278
|
+
image_url: "http://example.com/img/red.png"
|
279
|
+
- text: Blue
|
280
|
+
image_url: "http://example.com/img/blue.png"
|
281
|
+
```
|
282
|
+
|
283
|
+
More info [here](https://developers.facebook.com/docs/messenger-platform/send-messages/quick-replies).
|
284
|
+
|
285
|
+
### buttons
|
286
|
+
|
287
|
+
As with `suggestions`, `buttons` are not a reply type of their own but are used to make your bot more efficient. Facebook supports a few button types and these are the ones currently supported by this integration:
|
288
|
+
|
289
|
+
#### payload
|
290
|
+
|
291
|
+
This is the most common button type. When a user presses a button that is `payload` type, that payload string will be sent to your bot. For example:
|
292
|
+
|
293
|
+
```yaml
|
294
|
+
- reply_type: text
|
295
|
+
text: "Please press the button below"
|
296
|
+
buttons:
|
297
|
+
- type: payload
|
298
|
+
text: 'Press me!'
|
299
|
+
payload: 'button pressed'
|
300
|
+
|
301
|
+
```
|
302
|
+
|
303
|
+
When a user presses the button labeled "Press me!", the payload `button pressed` will be accessible in bot via `current_message.payload`.
|
304
|
+
|
305
|
+
#### url
|
306
|
+
|
307
|
+
The `url` button is useful when sharing a link to a website. By default, it will open up within Facebook Messenger.
|
308
|
+
|
309
|
+
```yaml
|
310
|
+
- reply_type: text
|
311
|
+
text: "Find out more via our website"
|
312
|
+
buttons:
|
313
|
+
- type: url
|
314
|
+
text: 'Visit website'
|
315
|
+
url: 'https://example.org'
|
316
|
+
messenger_extensions: true
|
317
|
+
|
318
|
+
```
|
319
|
+
|
320
|
+
Enabling messenger_extensions allows your webview to access a selection of features from the Messenger platform. More info [here](https://developers.facebook.com/docs/messenger-platform/webview/extensions?source=post_page). Without this parameter set to true, the webview opens in a separate tab or window if a user is visiting from the 'messenger.com' domain.
|
321
|
+
|
322
|
+
You can also specify the height of the webview window that opens up in Messenger via: `webview_height`. You can choose between `compact`, `tall`, and `full`.
|
323
|
+
|
324
|
+
More info [here](https://developers.facebook.com/docs/messenger-platform/webview).
|
325
|
+
|
326
|
+
|
327
|
+
#### call
|
328
|
+
|
329
|
+
The `call` button type will prompt the user to dial the specified number. The number will be pre-filled in, but the user will still have to confirm by confirming via the modal that is shown. To create a `call` button:
|
330
|
+
|
331
|
+
```yaml
|
332
|
+
- reply_type: text
|
333
|
+
text: "Give us a ring!"
|
334
|
+
buttons:
|
335
|
+
- type: call
|
336
|
+
text: 'Call'
|
337
|
+
phone_number: "+15552991212"
|
338
|
+
|
339
|
+
```
|
340
|
+
|
341
|
+
### Delay
|
342
|
+
|
343
|
+
Delays are a very important part of bot design. They introduce a pause between text replies to give the user a chance to read each reply. With this integration, in addition to introducing a delay, we will also send a typing indicator to the user to indicate another reply is forthcoming. To insert a delay in your bot:
|
344
|
+
|
345
|
+
```yaml
|
346
|
+
- reply_type: delay
|
347
|
+
duration: 2
|
348
|
+
```
|
349
|
+
|
350
|
+
This will add a `2` second delay (with typing indicator). The `duration` can be specified as any floating point value, in seconds.
|
351
|
+
|
352
|
+
### Cards
|
353
|
+
|
354
|
+
Facebook distinguishes between a single card and a carousel of cards. This integration does not, however. You can send a single card the same way you would send 10 cards (the current maximum).
|
355
|
+
|
356
|
+
```yaml
|
357
|
+
- reply_type: cards
|
358
|
+
sharable: true
|
359
|
+
aspect_ratio: horizontal
|
360
|
+
elements:
|
361
|
+
- title: My App
|
362
|
+
subtitle: Download our app below or visit our website for more info.
|
363
|
+
image_url: "https://my-app.com/app-image.png"
|
364
|
+
buttons:
|
365
|
+
- type: url
|
366
|
+
url: "https://my-app.com"
|
367
|
+
text: 'View'
|
368
|
+
webview_height: 'tall'
|
369
|
+
- type: url
|
370
|
+
url: "https://itunes.apple.com/us/app/my-app"
|
371
|
+
text: 'Download iOS App'
|
372
|
+
```
|
373
|
+
|
374
|
+
The above is a single card with two buttons. If you want to include more cards, though, you would just need to specify another listing under the `elements` heading.
|
375
|
+
|
376
|
+
The `sharable` and `aspect_ratio` attributes are optional. When `sharable` is set to `true`, a native share button is shown in Messenger for the message. The `aspect_ratio` attribute specifies the aspect ratio of the main card image (specified by `image_url`). It can be set to `horizontal` or `square` with the default being `horizontal`.
|
377
|
+
|
378
|
+
More info about Facebook cards [here](https://developers.facebook.com/docs/messenger-platform/send-messages/template/generic).
|
379
|
+
|
380
|
+
### List
|
381
|
+
|
382
|
+
A Facebook list is useful for displaying things like a news feed. You can find more info about Facebook lists [here](https://developers.facebook.com/docs/messenger-platform/send-messages/template/list).
|
383
|
+
|
384
|
+
To generate a list with this component:
|
385
|
+
|
386
|
+
```yaml
|
387
|
+
- reply_type: list
|
388
|
+
top_element_style: large
|
389
|
+
buttons:
|
390
|
+
- type: payload
|
391
|
+
text: View More
|
392
|
+
payload: view_more
|
393
|
+
elements:
|
394
|
+
- title: Your Daily News Update
|
395
|
+
subtitle: The following stories have been curated just for you.
|
396
|
+
image_url: "https://loremflickr.com/320/240"
|
397
|
+
buttons:
|
398
|
+
- type: url
|
399
|
+
url: "https://news-articles.com/199"
|
400
|
+
text: 'View'
|
401
|
+
webview_height: 'tall'
|
402
|
+
- title: Breakthrough in AI
|
403
|
+
subtitle: Major breakthrough in the AI space.
|
404
|
+
image_url: "https://loremflickr.com/320/320"
|
405
|
+
default_action:
|
406
|
+
- url: "https://news-articles.com/232"
|
407
|
+
webview_height: 'tall'
|
408
|
+
```
|
409
|
+
|
410
|
+
The list itself supports having a single button that will be rendered on the bottom of the list. Each individual list item supports having one button as well. List items should have between 2-4 elements.
|
411
|
+
|
412
|
+
In addition to the button, a list item can specify a default action. The default action is what will fired when a user taps the list item. A default action can be specified by setting the `default_action` attribute. The `default_action` should be configured as you would a `url` type button.
|
413
|
+
|
414
|
+
The image of the first item in the list is displayed as a cover photo by default. To disable the cover image, set `top_element_style` to `compact`.
|
415
|
+
|
416
|
+
### Images
|
417
|
+
|
418
|
+
To send an image:
|
419
|
+
|
420
|
+
```yaml
|
421
|
+
- reply_type: image
|
422
|
+
image_url: 'https://example.org/image.png'
|
423
|
+
```
|
424
|
+
|
425
|
+
The `image_url` should be set to URL where the image has been uploaded.
|
426
|
+
|
427
|
+
Image replies support buttons and suggestions like text replies.
|
428
|
+
|
429
|
+
### Files
|
430
|
+
|
431
|
+
To send a file:
|
432
|
+
|
433
|
+
```yaml
|
434
|
+
- reply_type: file
|
435
|
+
file_url: 'https://example.org/some.pdf'
|
436
|
+
```
|
437
|
+
|
438
|
+
The `file_url` should be set to URL where the file has been uploaded.
|
439
|
+
|
440
|
+
File replies support buttons and suggestions like text replies.
|
441
|
+
|
442
|
+
### Video
|
443
|
+
|
444
|
+
To send a video:
|
445
|
+
|
446
|
+
```yaml
|
447
|
+
- reply_type: video
|
448
|
+
video_url: 'https://example.org/cool_video.mp4'
|
449
|
+
```
|
450
|
+
|
451
|
+
The `video_url` should be set to URL where the video has been uploaded.
|
452
|
+
|
453
|
+
Video replies support buttons and suggestions like text replies.
|
454
|
+
|
455
|
+
### Audio
|
456
|
+
|
457
|
+
To send an audio clip:
|
458
|
+
|
459
|
+
```yaml
|
460
|
+
- reply_type: audio
|
461
|
+
audio_url: 'https://example.org/podcast.mp3'
|
462
|
+
```
|
463
|
+
|
464
|
+
The `audio_url` should be set to URL where the video has been uploaded.
|
465
|
+
|
466
|
+
Audio replies support buttons and suggestions like text replies.
|
467
|
+
|
468
|
+
### Account Linking
|
469
|
+
|
470
|
+
Account Linking allows you to invite users to log-in using your own authentication flow, and to receive a Messenger page-scoped ID (PSID) upon completion. You can find more info about Facebook Account Linking [here](https://developers.facebook.com/docs/messenger-platform/identity/account-linking).
|
471
|
+
|
472
|
+
#### Login
|
473
|
+
|
474
|
+
The `login` button type will prompt the user to log-in using your own authentication flow in the case he or she has an account with your business. You can find more info about Facebook Log In Button [here](https://developers.facebook.com/docs/messenger-platform/reference/buttons/login).
|
475
|
+
|
476
|
+
To create a `login` button:
|
477
|
+
|
478
|
+
```yaml
|
479
|
+
- reply_type: text
|
480
|
+
text: "Log in to access your account information."
|
481
|
+
buttons:
|
482
|
+
- type: login
|
483
|
+
url: "https://my-app.com/login"
|
484
|
+
```
|
485
|
+
|
486
|
+
#### Logout
|
487
|
+
|
488
|
+
The `logout` button type is used in the account linking flow to unlink the message recipient's identity on Messenger with their account on your site. You can find more info about Facebook Log Out Button [here](https://developers.facebook.com/docs/messenger-platform/reference/buttons/logout).
|
489
|
+
|
490
|
+
To create a `logout` button:
|
491
|
+
|
492
|
+
```yaml
|
493
|
+
- reply_type: text
|
494
|
+
text: "Log out"
|
495
|
+
buttons:
|
496
|
+
- type: logout
|
497
|
+
```
|
498
|
+
|