Bookings on Facebook: Difference between revisions

From SimplyBook.me
← Older edit
Visual
No edit summary
No edit summary
 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{#seo:
|title=Bookings on Facebook - SimplyBook.me
|description=Allow clients to book directly through your Facebook page. Increase visibility and bookings effortlessly. Get started today!
|titlemode=append
|keywords=faq, frequently asked questions, booking software, appointment system questions, appointments online, calendar software, booking system, booking calendar, scheduling software, online appointment scheduling, online scheduling, setup, setup help, support, help content
}}


<br><br>
<br><br>
==How to add SimplyBook.me widget to your Facebook fan page==
__TOC__
<br>
=Facebook and Instagram Bookings Custom Feature=
: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//Save settings and connect facebook page// choose the page to attach [https://simplybook.me Simplybook] to.
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px; font-weight: bold;">Please note!</span><br>
<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>
[[File: Facebook widget path.png | center]]
*<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 wish to change the styling please upgrade to Premium to select the desired theme and be able to use <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Custom_Features#Custom_CSS|Custom CSS]]</span> adjustments.</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>
:2. After you connected [https://simplybook.me SimplyBook.me] to Facebook fan page, it is listed in the left-side menu of the page under the photo of your company.
:'''Video tutorial available '''[[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=9o5fJkZD384&feature=youtu.be]]
<br>
[[File:Simplybook tab on facebook.png | center]]
<br><br>
<br><br>
You can press Settings//Edit page and make [https://simplybook.me SimplyBook.me] more visible for clients by dragging and dropping to  it higher in the list.
==How to add and use booking option to Facebook/Instagram business page==
<br><br>
<br><br>
[[File:Facebook reorder.png | center]]
: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 redesigned.png|1200px | border| center|link=https://help.simplybook.me/images/0/06/Facebook_and_insta_bookings_enable_path_redesigned.png]]
<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)//Edit page//SimplyBook.me appointments//Settings//Edit settings//Custom tab name.
:2. Login to your Facebook/Instagram business account(s) in another browser tab.
<br>
[[File:Facebook rename tab 2.png | center]]
<br><br>
<br><br>
[[File:Rename tab.png | center]]
: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 & insta bookings settings path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b6/Facebook_%26_insta_bookings_settings_path_redesigned.png]]
<br><br>
<br><br>
==How to remove Facebook widget from my Facebook page?==
:4. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Connect with Facebook</span> button on the page you see.
<br>
[[File:Connect with facebook button redesigned.png|1200px |border|center|link=https://help.simplybook.me/images/3/32/Connect_with_facebook_button_redesigned.png]]
On your Facebook fan page go to Settings (upper bar)//Edit page//SimplyBook.me appointments//Settings//press "Off" near [https://simplybook.me Simplybook] app to remove this tab and save settings.
<br><br>
<br><br>
[[File:Remove tab Facebook.png | center]]
: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 and insta new steps.png|border|center]]
<br><br>
<br><br>
==Facebook widget is not visible from mobiles==
: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 or <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Book now</span> button under the page banner that will redirect your clients to your booking site.<br>
<br>
:(the representation options depend on your Facebook business page)
:Unfortunately, Facebook does not show third-party apps from mobiles. Your clients need to access desktop version to book from Facebook.  
[[File:Facebook and insta new result.png|border|center]]
<br>
==I cannot change the email when book from Facebook==
<br>
:When you use Facebook widget, the [https://simplybook.me 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.
<br>
==How to add SimplyBook.me to your Facebook fan page as call-to-action button==
<br><br>
<br><br>
:1. Go to your Page’s cover photo and click + Add a Button.
:7. You can also add booking option to your Facebook page posts so that the customers will be able to quickly book your services.
<br>
[[File:Facebook and insta new add booking to post.png|border|center]]
[[File:Add button.png | center]]
<br><br>
<br><br>
:2. Choose your call-to-action, and enter the URL for your booking site.
<br>
[[File:Create button 2.png | left]]
[[File:Add link2.png ]]
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
:3. Click "Add button" and you will get the button "Book Now" as a result so that your clients will be able to click on it, go to booking page and book your services.
==How to remove Book button from Facebook/Instagram pages==
[[File:Result button.png  | center]]
<br><br>
<br><br>
==How to use Facebook Chat bot==
: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 & insta bookings settings path redesigned.png|1200px|boredr|center|link=https://help.simplybook.me/images/b/b6/Facebook_%26_insta_bookings_settings_path_redesigned.png]]
<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>
:2. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Logout</span> at the top of the page.
Contact support for more details.
[[File:Facebook & insta logout path redesidned.png|1200px|border|center|link=https://help.simplybook.me/images/1/16/Facebook_%26_insta_logout_path_redesidned.png]]
<br><br>
<br><br>
:1. Enable "Facebook Bot" Custom feature on your Custom Features page
==How to add and use booking option on Instagram only==
[[File:Facebook bot enable v3.png | center]]
<br><br>
<br><br>
:2. Choose "Settings" near it to see basic instructions.
:1. Open your <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Instagram</span> mobile application and login to your business page.
[[File: Facebook bot settings path.png | center]]
<br><br>
<br><br>
:3. Log into the [https://developers.facebook.com/ Facebook Developer Console].
:2. Navigate to your <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">profile</span> and select to edit it.
[[File:Facebook developers login new.png | center]]
<br><br>
<br><br>
:4. Click on My Apps in the upper right-hand corner and choose to "Add a New App"
: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:Fb create new app.png | center]]
[[File:Insta setup.png|border|center]]
<br><br>
<br><br>
:5. Enter a name and contact email address and click on "Create App ID".
[[File:Create new app id new.png | center]]
<br><br>
<br><br>
:6. On the next page you will see scenarios. Please skip this step.
==How to remove Book option from Instagram business page==
[[File:Fb bot skip step.png | 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.
: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>
[[File:Fb bot add basic details.png | center]]
: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>
:8. Then please click on "+" near "Products" on the left-side.
[[File:Fb bot products path.png | center]]
<br><br>
<br><br>
:9. Scroll the page you see a little bit and click the "Set Up" button for the Messenger option.
 
[[File:Fb bot messenger path.png | center]]
=Call-to-action button for Facebook fan page=
<br><br>
<br><br>
:10. Under the Token Generation section, choose one of your Facebook pages, copy the token you get.
:1. Go to your Facebook business page cover photo, click on three dots below the cover image and select <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Add action button</span>
[[File:Fb bot token copy.png | center]]
<br>
[[File:Fb new add action button.png|1200px|center|link=https://help.simplybook.me/images/b/b3/Fb_new_add_action_button.png]]
<br><br>
<br><br>
:11. This will generate a Page Access Token. Enter it in Simplybook.me Facebook bot settings.
:2. You can choose "Book now" or "Reserve" options as a call-to-action and then choose [https://simplybook.me/en/ SimplyBook.me]. That way you will enable [[Facebook and Instagram Bookings]] custom feature
[[File:Fb bot token paste.png | center]]
[[File:Fb action button new book.png|1200px|center|link=https://help.simplybook.me/images/6/64/Fb_action_button_new_book.png]]
<br><br>
<br><br>
:12. Click the Setup Webhooks button under the Webhooks section and enter Callback URL and Verify token.
:3. If you need to have a button leading to your booking website you can select "Contact us" or "Learn more" in that popup
[[File:Fb bot setup webhooks.png | center]]  
[[File:Fb new contact us action.png|1200px|center|link=https://help.simplybook.me/images/4/49/Fb_new_contact_us_action.png]]
<br><br>
<br><br>
:13. Check the messages and messaging_postbacks options under Subscription Fields.
:3. Paste your booking website link to the corresponding field and save settings.
[[File:Fb bot setup webhooks step 2.png | center]]
[[File:Add link to fb button.png|1200px|center|link=https://help.simplybook.me/images/0/03/Add_link_to_fb_button.png]]
<br><br>
<br><br>
:14. Click "Verify and Save" button.
:4. As the result you will have the action button with the text "Contact us" or "Learn more" that will lead to your booking website.
:15. Scroll to “App Review for Messenger” block, select the first option “pages_messaging” and add the details requested there.
[[File:Image.png|1200px|center|link=https://help.simplybook.me/images/3/34/Image.png]]
[[File:Pages messaging add.png | center]]
<br><br>
<br><br>
[[File:Fb bot submission step 1.png | center]]
 
<br><br>
=How to add a Facebook Messenger chat to your booking page=
:16. You can use the same details as on this image.
:'''Video tutorial available '''[[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=PuFFtCOksc8]]
[[File:Fb bot submission step 2.png | center]]
<br><br>
:17. Submit your app for review.
[[File:Fb bot submission step 3.png | 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]]
<br><br>
: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]]
<br><br>
<br><br>

Latest revision as of 15:51, 6 December 2024



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 wish to change the styling please upgrade to Premium to select the desired theme and be able to use Custom CSS adjustments.
  • The widget look may differ depending on Facebook preferences for different devices and applications



Video tutorial available



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



1. Enable Facebook & Instagram Bookings custom feature on your Custom Features page.



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.



4. Click on Connect with Facebook button on the page you see.



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)



6. Now you will have your services shown on your Facebook page with Book buttons next to them or Book now button under the page banner that will redirect your clients to your booking site.
(the representation options depend on your Facebook business page)



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









How to remove Book button from Facebook/Instagram pages



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



2. Click on Logout at the top of the page.



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:





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:





Call-to-action button for Facebook fan page



1. Go to your Facebook business page cover photo, click on three dots below the cover image and select Add action button




2. You can choose "Book now" or "Reserve" options as a call-to-action and then choose SimplyBook.me. That way you will enable Facebook and Instagram Bookings custom feature



3. If you need to have a button leading to your booking website you can select "Contact us" or "Learn more" in that popup



3. Paste your booking website link to the corresponding field and save settings.



4. As the result you will have the action button with the text "Contact us" or "Learn more" that will lead to your booking website.



How to add a Facebook Messenger chat to your booking page

Video tutorial available



Retrieved from "https://help.simplybook.me/index.php?title=Bookings_on_Facebook&oldid=11324"