Difference between revisions of "Bookings on Facebook"

From SimplyBook.me
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<br><br>
 
<br><br>
==How to add SimplyBook.me to your Facebook fan page as call-to-action button==
+
__TOC__
 +
=Facebook and Instagram Bookings Custom Feature=
 +
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px; font-weight: bold;">Please note!</span><br>
 +
*<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">It is possible to connect booking option to Facebook Business and Instagram Business pages. This functionality cannot be added to a personal page.</span><br>
 +
*<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">The booking option is not shown on desktop Instagram version and can be used via mobile apps only.</span><br>
 +
*<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">Bookingtroll theme is used for the booking widget by default. If you need to adjust the styling please use <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Custom_Features#Custom_CSS|Custom CSS]]</span> feature.</span><br>
 +
*<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">The widget look may differ depending on Facebook preferences for different devices and applications</span><br>
 
<br><br>
 
<br><br>
:1. Go to your Page’s cover photo and click + Add a Button.
+
==How to add and use booking option to Facebook/Instagram business page==
 +
<br><br>
 +
:1. Enable <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Facebook & Instagram Bookings</span> custom feature on your <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Custom Features</span> page.
 +
[[File:Facebook and insta bookings enable path.png | border| center]]
 +
<br><br>
 +
:2. Login to your Facebook/Instagram business account(s) in another browser tab.
 +
<br><br>
 +
:3. Go back to SimplyBook.me interface and click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> near <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Facebook & Instagram Bookings.</span>
 +
[[File:Facebook and insta bookings settings path.png|border|center]]
 +
<br><br>
 +
:4. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Connect with Facebook</span> button on the page you see.
 +
[[File:Facebook and insta bookings settings overview.png |border|center]]
 +
<br><br>
 +
:5. You will be redirected to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Facebook</span> interface to manage the permissions and connection to SimplyBook.me.<br>
 +
:Please follow the steps 1-5 displayed below.<br>
 +
:(If you have Instagram business profile connected to your Facebook business page you will be able to connect it there as well <br>
 +
:and <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Book</span> button will automatically appear there)
 +
[[File:Facebook permisions setup.png|border|center]]
 +
<br><br>
 +
:6. Now you will have your services shown on your Facebook page with <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Book</span> buttons next to them that will redirect your clients to your booking site.<br>
 +
[[File:Fb client side services.png|border|center]]
 +
<br><br>
 +
:7. You can also add booking option to your Facebook page posts so that the customers will be able to quickly book your services.
 +
[[File:Fb adding bookings to post.png|border|center]]
 +
<br><br>
 +
<br><br>
 +
<br><br>
 +
<br><br>
 +
==How to remove Book button from Facebook/Instagram pages==
 +
<br><br>
 +
:1. Navigate to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Custom Features</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Facebook & Instagram Bookings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> on SimplyBook.me side.
 +
[[File:Facebook and insta bookings settings path.png|boredr|center]]
 +
<br><br>
 +
:2. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Logout</span> at the top of the page.
 +
[[File:Facebook logout.png|border|center]]
 +
<br><br>
 +
:3. You will be redirected to Facebook interface, where you just need to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">check the box with SimplyBook.me</span> and select <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Remove</span> option.
 +
[[File:Facebook remove simplybook.png|border|center]]
 +
<br><br>
 +
==How to add and use booking option on Instagram only==
 +
<br><br>
 +
:1. Open your <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Instagram</span> mobile application and login to your business page.
 +
<br><br>
 +
:2. Navigate to your <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">profile</span> and select to edit it.
 +
<br><br>
 +
:3. Follow the steps 1-8 below to add <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Book</span> button that will lead the customers to your booking site:
 +
[[File:Insta setup.png|border|center]]
 +
<br><br>
 +
<br><br>
 +
==How to remove Book option from Instagram business page==
 +
<br><br>
 +
:1. Open your <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Instagram</span> mobile application and navigate to editing your <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">profile.</span><br>
 +
:Follow the steps 1-5 below to remove <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Book</span> button:
 +
[[File:Insta button removal.png|border|center]]
 +
<br><br>
 +
<br><br>
 +
 
 +
=Call-to-action button for Facebook fan page=
 +
<br><br>
 +
:1. Go to your Page’s cover photo and click <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">+ Add a Button</span>
 
<br>
 
<br>
<nomobile>[[File:Add button.png | center]]</nomobile>
+
<nomobile>[[File:Fb add button.png | center]]</nomobile>
 
<mobileonly>[[File:M add booking button step 2 new.png | center]]</mobileonly>
 
<mobileonly>[[File:M add booking button step 2 new.png | center]]</mobileonly>
 
<br><br>
 
<br><br>
:2. Choose your call-to-action, then select "Link to website" option and enter the URL for your booking site.
+
:2. Choose your call-to-action, then select <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Link to website</span> option and enter the URL for your booking site.
 
<br>
 
<br>
<nomobile>[[File:Add booking button step 2.png | center]]</nomobile>
+
[[File:Fb book now option.png| border|center]]
<nomobile>[[File:Add booking button step 3.png | center]]</nomobile>
 
<nomobile>[[File:Add booking button step 4.png | center]]</nomobile>
 
<mobileonly>[[File:M add booking button step 3 new.png | center]]</mobileonly>
 
<mobileonly>[[File:M add booking button step 4 new.png | center]]</mobileonly>
 
<mobileonly>[[File:M add booking button step 5.png | center]]</mobileonly>
 
<br><br>
 
<br><br>
 
 
<br><br>
 
<br><br>
:3. Click on "Finish" and you will get the button "Book Now" as a result, so that your clients will be able to click on it, go to your booking site and book your services.
+
:3. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Finish</span> and you will get the button <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Book Now</span> as a result, so that your clients will be able to click on it, go to your booking site and book your services.
<nomobile>[[File:Add booking button step 5.png  | center]]</nomobile>
 
 
<nomobile>[[File:Add booking button result.png | center]]</nomobile>
 
<nomobile>[[File:Add booking button result.png | center]]</nomobile>
 
<mobileonly>[[File:M add booking button result.png | center]]</mobileonly>
 
<mobileonly>[[File:M add booking button result.png | center]]</mobileonly>
  
 
<br><br>
 
<br><br>
==How to use Facebook Chat bot==
+
=Facebook chat bot=
 +
 
 +
<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>
 
<br><br>
'''Please note!''' Facebook bot provides only basic functionality, so for example payments, client login, memberships, approve bookings, etc are not working there.<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.
Contact support for more details.
+
[[File:Facebook bot enable path newcf.png | border| center]]
 
<br><br>
 
<br><br>
:1. Enable "Facebook Bot" Custom feature on your Custom Features page  
+
: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 enable v3.png | center]]
+
[[File:Facebook bot settings path newcf.png | border| center]]
 
<br><br>
 
<br><br>
:2. Choose "Settings" near it to see basic instructions.
+
:3. Log into the <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[https://developers.facebook.com/ Facebook Developer Console]. </span>
[[File: Facebook bot settings path.png | center]]
+
[[File:Facebook developers login new.png | border| center]]
 
<br><br>
 
<br><br>
:3. Log into the [https://developers.facebook.com/ Facebook Developer Console].
+
: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:Facebook developers login new.png | center]]
+
[[File:Fb create new app.png | border| center]]
 
<br><br>
 
<br><br>
:4. Click on My Apps in the upper right-hand corner and choose to "Add a New App"
+
: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:Fb create new app.png | center]]
+
[[File:Facebook add new app create.png | border| center]]
 
<br><br>
 
<br><br>
:5. Enter a name and contact email address and click on "Create App ID".
+
: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:Create new app id new.png | center]]
+
[[File:Fb bot add basic details.png | border| center]]
 
<br><br>
 
<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>
 
<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>
 
<br><br>
:8. Then please click on "+" near "Products" 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>
 
<br><br>
:9. Scroll the page you see a little bit and click the "Set Up" button for the Messenger 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>
 
<br><br>
: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]]
 
 
<br><br>
 
<br><br>
:11. This will generate a Page Access Token. Enter it in Simplybook.me Facebook bot settings.
+
: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 token paste.png | center]]
+
[[File:Facebook bot insert token.png|border|center]]
 
<br><br>
 
<br><br>
:12. Click the Setup Webhooks button under the Webhooks section and enter Callback URL and Verify token.
+
: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:Fb bot setup webhooks.png | center]]  
+
[[File:Facebook bot copy token and url.png | border| center]]
 
<br><br>
 
<br><br>
:13. Check the messages and messaging_postbacks options under Subscription Fields.
+
[[File:Facebook webhooks paste token and url.png|border|center]]
[[File:Fb bot setup webhooks step 2.png | center]]
 
 
<br><br>
 
<br><br>
:14. Click "Verify and Save" button.
+
: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.
:15. Scroll to “App Review for Messenger” block, select the first option “pages_messaging” and add the details requested there.
+
[[File:Facebook webhooks add subscriptions select.png|border|center]]
[[File:Pages messaging add.png | center]]
 
 
<br><br>
 
<br><br>
[[File:Fb bot submission step 1.png | center]]
+
: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:Facebook add to submission pages messaging.png|border|center]]
 
<br><br>
 
<br><br>
:16. You can use the same details as on this image.
+
: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.
[[File:Fb bot submission step 2.png | center]]
+
[[File:Fb bot submission step 1.png|border|center]]
 +
<br><br>
 +
:16. In the popup that appears provide the details according to the following example.
 +
[[File:Facebook_items_for_submission.png|border|center]]
 +
<br><br>
 +
:Screencast example [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=JeBF41JElW4&feature=youtu.be]]
 
<br><br>
 
<br><br>
 
:17. Submit your app for review.
 
: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>
 
<br><br>
 
:18. You can also make your app live for approved users to test.
 
: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.
 
: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>
 
<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.
 
: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>
 
:Here you can see how approved request will look like<br>
[[File:Bot approved.png | center]]
+
[[File:Bot approved.png | border| center]]
 
<br><br>
 
<br><br>
 +
 +
=Facebook widget=
 
==How to add SimplyBook.me widget to your Facebook fan page==
 
==How to add SimplyBook.me widget to your Facebook fan page==
 
<br>
 
<br>
:1.You can add [https://simplybook.me SimplyBook.me] functionality to Facebook fan page (only to fan page, it can't be connected to your personal page) in Settings//Bookings on Webpage or Facebook//Facebook booking widget//Apply & add to facebook// choose the page to attach [https://simplybook.me Simplybook] to.
+
:1.You can add [https://simplybook.me SimplyBook.me] functionality to Facebook fan page (only to fan page, it can't be connected to your personal page) in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Bookings on Webpage or Facebook</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Facebook booking widget</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Apply & add to facebook</span> -> choose the page to attach [https://simplybook.me Simplybook] to.
 
<br>
 
<br>
 
[[File:Facebook widget path v3.png | center]]
 
[[File:Facebook widget path v3.png | center]]
Line 98: Line 165:
 
[[File:Simplybook tab on facebook.png | center]]
 
[[File:Simplybook tab on facebook.png | center]]
 
<br><br>
 
<br><br>
You can press Settings//Templates and tabs and make [https://simplybook.me SimplyBook.me] more visible for clients by dragging and dropping it higher in the list.
+
You can press <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Templates and tabs</span> and make [https://simplybook.me SimplyBook.me] more visible for clients by dragging and dropping it higher in the list.
 
<br><br>
 
<br><br>
 
[[File:Facebook reorder.png | center]]
 
[[File:Facebook reorder.png | center]]
 
<br><br>
 
<br><br>
:3. You may need to change the title "[https://simplybook.me Simplybook.me appointments]" to something else. For this, on your Facebook fan page go to Settings (upper bar)//Templates and tabs//SimplyBook.me appointments//Settings//Edit settings//Custom tab name.
+
:3. You may need to change the title <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[https://simplybook.me Simplybook.me appointments]</span> to something else. For this, on your Facebook fan page go to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span>(upper bar) -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Templates and tabs</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">SimplyBook.me appointments</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Edit settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Custom tab name.</span>
 
<br>
 
<br>
 
[[File:Facebook rename tab 2.png | center]]
 
[[File:Facebook rename tab 2.png | center]]
Line 110: Line 177:
 
==How to remove Facebook widget from my Facebook page?==
 
==How to remove Facebook widget from my Facebook page?==
 
<br>
 
<br>
On your Facebook fan page go to Settings (upper bar)//Templates and tabs//SimplyBook.me appointments//Settings//press "Off" near [https://simplybook.me Simplybook] app to remove this tab and save settings.
+
On your Facebook fan page go to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span>(upper bar) -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Templates and tabs</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">SimplyBook.me appointments</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> press <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Off</span> near <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">[https://simplybook.me Simplybook] app</span> to remove this tab and save settings.
 
<br><br>
 
<br><br>
 
[[File:Remove tab Facebook.png | center]]
 
[[File:Remove tab Facebook.png | center]]

Revision as of 13:42, 20 April 2020



Facebook and Instagram Bookings Custom Feature

Please note!

  • It is possible to connect booking option to Facebook Business and Instagram Business pages. This functionality cannot be added to a personal page.
  • The booking option is not shown on desktop Instagram version and can be used via mobile apps only.
  • Bookingtroll theme is used for the booking widget by default. If you need to adjust the styling please use Custom CSS feature.
  • The widget look may differ depending on Facebook preferences for different devices and applications



How to add and use booking option to Facebook/Instagram business page



1. Enable Facebook & Instagram Bookings custom feature on your Custom Features page.
Facebook and insta bookings enable path.png



2. Login to your Facebook/Instagram business account(s) in another browser tab.



3. Go back to SimplyBook.me interface and click on Settings near Facebook & Instagram Bookings.
Facebook and insta bookings settings path.png



4. Click on Connect with Facebook button on the page you see.
Facebook and insta bookings settings overview.png



5. You will be redirected to Facebook interface to manage the permissions and connection to SimplyBook.me.
Please follow the steps 1-5 displayed below.
(If you have Instagram business profile connected to your Facebook business page you will be able to connect it there as well
and Book button will automatically appear there)
Facebook permisions setup.png



6. Now you will have your services shown on your Facebook page with Book buttons next to them that will redirect your clients to your booking site.
Fb client side services.png



7. You can also add booking option to your Facebook page posts so that the customers will be able to quickly book your services.
Fb adding bookings to post.png









How to remove Book button from Facebook/Instagram pages



1. Navigate to Custom Features -> Facebook & Instagram Bookings -> Settings on SimplyBook.me side.
boredr



2. Click on Logout at the top of the page.
Facebook logout.png



3. You will be redirected to Facebook interface, where you just need to check the box with SimplyBook.me and select Remove option.
Facebook remove simplybook.png



How to add and use booking option on Instagram only



1. Open your Instagram mobile application and login to your business page.



2. Navigate to your profile and select to edit it.



3. Follow the steps 1-8 below to add Book button that will lead the customers to your booking site:
Insta setup.png





How to remove Book option from Instagram business page



1. Open your Instagram mobile application and navigate to editing your profile.
Follow the steps 1-5 below to remove Book button:
Insta button removal.png





Call-to-action button for Facebook fan page



1. Go to your Page’s cover photo and click + Add a Button


Fb add button.png
M add booking button step 2 new.png



2. Choose your call-to-action, then select Link to website option and enter the URL for your booking site.


Fb book now option.png



3. Click on Finish and you will get the button Book Now as a result, so that your clients will be able to click on it, go to your booking site and book your services.
Add booking button result.png
M add booking button result.png



Facebook chat bot

Please note! Facebook bot works in English only and provides only basic functionality, so for example payments, client login, memberships, approve bookings, etc. are not working there.
Contact support for more details.


1. Enable Facebook Bot custom feature on your Custom Features page.
Facebook bot enable path newcf.png



2. You will see its settings on the right side of the page
Facebook bot settings path newcf.png



3. Log into the Facebook Developer Console.
Facebook developers login new.png



4. Click on My Apps in the upper right-hand corner and choose to Add a New App.
Fb create new app.png



5. Enter a name and contact email address and click on Create App ID.
Facebook add new app create.png



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.
Fb bot add basic details.png



7. Then please click on + near Products on the left-side.
Fb bot products path.png



8. Click the Set Up button for the Messenger option.
Facebook select messenger.png



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



10. Click on Generate token button, check token generation warning and copy the token code.
Facebook generate token.png



Facebook copy token.png



11. Paste the token into SimplyBook.me Facebook Bot feature settings.
Facebook bot insert token.png



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.
Facebook bot copy token and url.png



Facebook webhooks paste token and url.png



13. Hit Add subscriptions, select messages and messaging_postbacks in the popup. Save.
Facebook webhooks add subscriptions select.png



14. Proceed to App review section and click on Add to submission in front of pages_messaging API.
Facebook add to submission pages messaging.png



15. Scroll down to Current submission section and click on Add details link.
Fb bot submission step 1.png



16. In the popup that appears provide the details according to the following example.
Facebook items for submission.png



Screencast example Youtube-Logo.png



17. Submit your app for review.
Fb bot submission step 3.png



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.
Fb bot make app public.png



You can add users here:
Facebook add test users.png
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
Bot approved.png



Facebook widget

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


1.You can add SimplyBook.me functionality to Facebook fan page (only to fan page, it can't be connected to your personal page) in Settings -> Bookings on Webpage or Facebook -> Facebook booking widget -> Apply & add to facebook -> choose the page to attach Simplybook to.


Facebook widget path v3.png



2. After you connected SimplyBook.me to Facebook fan page, it is listed in the left-side menu of the page under the photo of your company.


Simplybook tab on facebook.png



You can press Settings -> Templates and tabs and make SimplyBook.me more visible for clients by dragging and dropping it higher in the list.

Facebook reorder.png



3. You may need to change the title Simplybook.me appointments to something else. For this, on your Facebook fan page go to Settings(upper bar) -> Templates and tabs -> SimplyBook.me appointments -> Settings -> Edit settings -> Custom tab name.


Facebook rename tab 2.png



Rename tab.png



How to remove Facebook widget from my Facebook page?


On your Facebook fan page go to Settings(upper bar) -> Templates and tabs -> SimplyBook.me appointments -> Settings -> press Off near Simplybook app to remove this tab and save settings.

Remove tab Facebook.png



Facebook widget is not visible from mobiles


Unfortunately, Facebook does not show third-party apps from mobiles. Your clients need to access desktop version to book from Facebook.


I cannot change the email when book from Facebook


When you use Facebook widget, the system perceives a customer as Facebook user and uses his/her data to fill in the details. Thus, by default it uses email under which Facebook is registered. Unfortunately, it is not in our competency to change this, you can try contacting Facebook support to clarify this issue.