Bookings on Facebook: Difference between revisions

Line 82:

=Facebook chat bot=

~~ ~~

'''Please note!''' Facebook bot works in English only and provides only basic functionality, so for example [[Accept_payments_custom_feature|payments]], [[Client_Login_custom_feature|client login]], [[Membership_custom_feature|memberships]], [[Approve_Bookings_custom_feature|approve bookings]], etc. are not working there.

Contact support for more details.

:1. Enable Facebook Bot custom feature on your Custom Features page.

[[File:Facebook bot enable v3.png | center]]

[[File:Facebook bot enable path newcf.png | border| center]]

:2. ~~Choose~~ ~~Settings~~ ~~near it to see basic instructions.~~

:2. You will see its settings on the right side of the page

[[File: Facebook bot settings path.png | center]]

[[File:Facebook bot settings path newcf.png | border| center]]

:3. Log into the [https://developers.facebook.com/ Facebook Developer Console].

[[File:Facebook developers login new.png | center]]

[[File:Facebook developers login new.png | border| center]]

:4. Click on My Apps in the upper right-hand corner and choose to Add a New App"

:4. Click on My Apps in the upper right-hand corner and choose to Add a New App.

[[File:Fb create new app.png | center]]

[[File:Fb create new app.png | border| center]]

:5. Enter a name and contact email address and click on Create App ID.

[[File:~~Create~~ new app ~~id new~~.png | center]]

[[File:Facebook add new app create.png | border| center]]

:6. Add all basic information about your company and application, required links, an icon for the application as well as GDPR related information if necessary in Settings -> Basic.

[[File:Fb bot add basic details.png | border| center]]

:6. On the ~~next page you will see scenarios. Please skip this step~~.

:7. Then please click on + near Products on the left-side.

[[File:Fb bot ~~skip step~~.png | center]]

[[File:Fb bot products path.png | border| center]]

:7. ~~Add all basic information about your company and bot, required links, an icon as well as GDPR related information if necessary~~.

:8. Click the Set Up button for the Messenger option.

[[File:~~Fb bot add basic details~~.png | center]]

[[File:Facebook select messenger.png | border| center]]

:8. ~~Then please click on + near~~ ~~Products~~ ~~on the left-side~~.

:9. Under the Access Tokens section, choose one of your Facebook business pages or create a new one.

[[File:~~Fb bot products path~~.png | center]]

[[File:Facebook select or create page.png | border| center]]

:9. ~~Scroll the page you see a little bit and click the~~ ~~Set Up~~ button ~~for~~ the ~~Messenger option~~.

:10. Click on Generate token button, check token generation warning and copy the token code.

[[File:~~Fb bot messenger path~~.png | center]]

[[File:Facebook generate token.png|border|center]]

~~:10. Under the Token Generation section, choose one of your Facebook pages, copy the token you get.~~

[[File:Facebook copy token.png|border|center]]

[[File:~~Fb bot~~ token ~~copy~~.png | center]]

:~~If you see~~ the ~~following error while selecting the page you may need to edit the permissions~~.

:11. Paste the token into SimplyBook.me Facebook Bot feature settings.

[[File:Fb bot ~~error permissions~~.png | border|center]]

[[File:Facebook bot insert token.png|border|center]]

[[File:~~Permission steps facebook~~.png |border|center]]

:12. Click the Add Callback URL button under the Webhooks section and paste Callback URL and Verify token copied from SimplyBook.me Facebook Bot feature settings.

[[File:Facebook bot copy token and url.png | border| center]]

:11. Then Page Access Token will be generated. Enter it in Simplybook.me Facebook bot settings.

[[File:Facebook webhooks paste token and url.png|border|center]]

[[File:~~Fb bot~~ token ~~paste~~.png | center]]

:12. ~~Click the~~ ~~Setup Webhooks~~ ~~button under the~~ ~~Webhooks~~ ~~section~~ and ~~enter~~ ~~Callback URL~~ ~~and Verify token copied from SimplyBook~~.~~me Facebook Bot feature settings~~.~~~~

:13. Hit Add subscriptions, select messages and messaging_postbacks in the popup. Save.

[[File:~~Fb bot setup~~ webhooks.png | center]]

[[File:Facebook webhooks add subscriptions select.png|border|center]]

:13. ~~Check the~~ ~~messages~~ and ~~messaging_postbacks~~ ~~options under Subscription Fields~~.~~~~

:14. Proceed to App review section and click on Add to submission in front of pages_messaging API.

[[File:~~Fb bot setup webhooks step 2~~.png | center]]

[[File:Facebook add to submission pages messaging.png|border|center]]

~~:14. Click Verify and Save button.~~

:15. Scroll down to Current submission section and click on Add details link.

:15. Scroll to ~~App Review for Messenger~~ ~~block, select the first option~~ ~~pages_messaging~~ ~~and add the details requested there~~.

[[File:Fb bot submission step 1.png|border|center]]

[[File:~~Pages messaging add~~.png | center]]

[[File:~~Fb bot submission step 1~~.png | center]]

:16. In the popup that appears provide the details according to the following example.

[[File:Facebook_items_for_submission.png|border|center]]

:~~16. Complete the steps you see in the pop-up.(the steps may be changed by Facebook with time)~~

:Screencast example [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=JeBF41JElW4&feature=youtu.be]]

[[File:~~Fb but submit for review~~.png | ~~center~~]]

:17. Submit your app for review.

[[File:Fb bot submission step 3.png | center]]

[[File:Fb bot submission step 3.png | border|center]]

:18. You can also make your app live for approved users to test.

:It will become available to all your page visitors after Facebook approval.

[[File:Fb bot make app public.png | center]]

[[File:Fb bot make app public.png | border| center]]

:You can add users here:

[[File:Facebook add test users.png|border|center]]

:19. It may take some time for Facebook to approve your application and your clients will be able to book using the chat bot.

:Here you can see how approved request will look like

[[File:Bot approved.png | center]]

[[File:Bot approved.png | border| center]]

=Facebook widget=

==How to add SimplyBook.me widget to your Facebook fan page==

@@ Line 82: / Line 82: @@
 <br><br>
 =Facebook chat bot=
-<br><br>
 <span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Please note!''' Facebook bot works in English only and provides only basic functionality, so for example <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Accept_payments_custom_feature|payments]]</span>, <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Client_Login_custom_feature|client login]]</span>, <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Membership_custom_feature|memberships]]</span>, <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Approve_Bookings_custom_feature|approve bookings]]</span>, etc. are not working there.<br>
 Contact support for more details.</span>
 <br><br>
 :1. Enable <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Facebook Bot</span> custom feature on your <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Custom Features</span> page.
-[[File:Facebook bot enable v3.png | center]]
+[[File:Facebook bot enable path newcf.png | border| center]]
 <br><br>
-:2. Choose <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> near it to see basic instructions.
+:2. You will see its settings on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">the right side of the page</span>
-[[File: Facebook bot settings path.png | center]]
+[[File:Facebook bot settings path newcf.png | border| center]]
 <br><br>
 :3. Log into the <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[https://developers.facebook.com/ Facebook Developer Console]. </span>
-[[File:Facebook developers login new.png | center]]
+[[File:Facebook developers login new.png | border| center]]
 <br><br>
-:4. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">My Apps</span> in the upper right-hand corner and choose to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Add a New App"</span>
+:4. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">My Apps</span> in the upper right-hand corner and choose to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Add a New App.</span>
-[[File:Fb create new app.png | center]]
+[[File:Fb create new app.png | border| center]]
 <br><br>
 :5. Enter a name and contact email address and click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Create App ID.</span>
-[[File:Create new app id new.png | center]]
+[[File:Facebook add new app create.png | border| center]]
+<br><br>
+:6. Add all basic information about your company and application, required links, an icon for the application as well as GDPR related information if necessary in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Basic.</span>
+[[File:Fb bot add basic details.png | border| center]]
 <br><br>
-:6. On the next page you will see scenarios. Please skip this step.
+:7. Then please click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">+</span> near <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Products</span> on the left-side.
-[[File:Fb bot skip step.png | center]]
+[[File:Fb bot products path.png | border| center]]
 <br><br>
-:7. Add all basic information about your company and bot, required links, an icon as well as GDPR related information if necessary.
+:8. Click the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Set Up</span> button for the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Messenger</span> option.
-[[File:Fb bot add basic details.png | center]]
+[[File:Facebook select messenger.png | border| center]]
 <br><br>
-:8. Then please click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">+</span> near <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Products</span> on the left-side.
+:9. Under the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Access Tokens</span> section, choose one of your Facebook business pages or create a new one.
-[[File:Fb bot products path.png | center]]
+[[File:Facebook select or create page.png | border| center]]
 <br><br>
-:9. Scroll the page you see a little bit and click the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Set Up</span> button for the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Messenger</span> option.
+:10. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Generate token</span> button, check token generation warning and copy the token code.
-[[File:Fb bot messenger path.png | center]]
+[[File:Facebook generate token.png|border|center]]
 <br><br>
-:10. Under the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Token Generation</span> section, choose one of your Facebook pages, copy the token you get.
+[[File:Facebook copy token.png|border|center]]
-[[File:Fb bot token copy.png | center]]
 <br><br>
-:If you see the following error while selecting the page you may need to edit the permissions.
+:11. Paste the token into SimplyBook.me <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Facebook Bot feature</span> settings.
-[[File:Fb bot error permissions.png | border|center]]
+[[File:Facebook bot insert token.png|border|center]]
 <br><br>
-[[File:Permission steps facebook.png |border|center]]
+:12. Click the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Add Callback URL</span> button under the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Webhooks</span> section and paste <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Callback URL</span> and <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Verify token</span> copied from SimplyBook.me <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Facebook Bot feature settings.</span>
+[[File:Facebook bot copy token and url.png | border| center]]
 <br><br>
-:11. Then <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Page Access Token</span> will be generated. Enter it in Simplybook.me <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Facebook bot settings.</span>
+[[File:Facebook webhooks paste token and url.png|border|center]]
-[[File:Fb bot token paste.png | center]]
 <br><br>
-:12. Click the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Setup Webhooks</span> button under the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Webhooks</span> section and enter <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Callback URL</span> and <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Verify token</span> copied from SimplyBook.me <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Facebook Bot feature settings.</span>
+:13. Hit <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Add subscriptions</span>, select <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">messages</span> and <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">messaging_postbacks</span> in the popup. Save.
-[[File:Fb bot setup webhooks.png | center]]
+[[File:Facebook webhooks add subscriptions select.png|border|center]]
 <br><br>
-:13. Check the <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">messages</span> and <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">messaging_postbacks</span> options under <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Subscription Fields.</span>
+:14. Proceed to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">App review</span> section and click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Add to submission</span> in front of pages_messaging API.
-[[File:Fb bot setup webhooks step 2.png | center]]
+[[File:Facebook add to submission pages messaging.png|border|center]]
 <br><br>
-:14. Click <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Verify and Save</span> button.
+:15. Scroll down to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Current submission</span> section and click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Add details</span> link.
-:15. Scroll to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">App Review for Messenger</span> block, select the first option <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">pages_messaging</span> and add the details requested there.
+[[File:Fb bot submission step 1.png|border|center]]
-[[File:Pages messaging add.png | center]]
 <br><br>
-[[File:Fb bot submission step 1.png | center]]
+:16. In the popup that appears provide the details according to the following example.
+[[File:Facebook_items_for_submission.png|border|center]]
 <br><br>
-:16. Complete the steps you see in the pop-up.(the steps may be changed by Facebook with time)
+:Screencast example [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=JeBF41JElW4&feature=youtu.be]]
-[[File:Fb but submit for review.png | center]]
 <br><br>
 :17. Submit your app for review.
-[[File:Fb bot submission step 3.png | center]]
+[[File:Fb bot submission step 3.png | border|center]]
 <br><br>
 :18. You can also make your app live for approved users to test.
 :It will become available to all your page visitors after Facebook approval.
-[[File:Fb bot make app public.png | center]]
+[[File:Fb bot make app public.png | border| center]]
 <br><br>
+:You can add users here:
+[[File:Facebook add test users.png|border|center]]
 :19. It may take some time for Facebook to approve your application and your clients will be able to book using the chat bot.
 :Here you can see how approved request will look like<br>
-[[File:Bot approved.png | center]]
+[[File:Bot approved.png | border| center]]
 <br><br>
 =Facebook widget=
 ==How to add SimplyBook.me widget to your Facebook fan page==