Difference between revisions of "Bookings on Facebook"

From SimplyBook.me
 
(5 intermediate revisions by the same user not shown)
Line 13: Line 13:
 
<br><br>
 
<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.
 
: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]]
+
[[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>
 
:2. Login to your Facebook/Instagram business account(s) in another browser tab.
 
:2. Login to your Facebook/Instagram business account(s) in another browser tab.
 
<br><br>
 
<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>
 
: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]]
+
[[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>
 
:4. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Connect with Facebook</span> button on the page you see.
 
: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]]
+
[[File:Connect with facebook button redesigned.png|1200px |border|center|link=https://help.simplybook.me/images/3/32/Connect_with_facebook_button_redesigned.png]]
 
<br><br>
 
<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>
 
: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>
Line 42: Line 42:
 
<br><br>
 
<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.
 
: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]]
+
[[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>
 
:2. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Logout</span> at the top of the page.
 
:2. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Logout</span> at the top of the page.
−
[[File:Facebook and insta new logout.png|border|center]]
+
[[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>
 
==How to add and use booking option on Instagram only==
 
==How to add and use booking option on Instagram only==
Line 67: Line 67:
 
=Call-to-action button for Facebook fan page=
 
=Call-to-action button for Facebook fan page=
 
<br><br>
 
<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>
+
: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>
 
<br>
 
<br>
−
<nomobile>[[File:Fb add button.png | center]]</nomobile>
+
[[File:Fb new add action button.png|1200px|center|link=https://help.simplybook.me/images/b/b3/Fb_new_add_action_button.png]]
−
<mobileonly>[[File:M add booking button step 2 new.png | center]]</mobileonly>
 
 
<br><br>
 
<br><br>
−
: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.
+
: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
−
<br>
+
[[File:Fb action button new book.png|1200px|center|link=https://help.simplybook.me/images/6/64/Fb_action_button_new_book.png]]
−
[[File:Fb book now option.png| border|center]]
 
−
<br><br>
 
−
: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 result.png | center]]</nomobile>
 
−
<mobileonly>[[File:M add booking button result.png | center]]</mobileonly>
 
−
 
 
−
<br><br>
 
−
=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>
−
: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.
+
: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:Facebook bot enable path newcf.png | border| 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>
−
:2. You will see its settings on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">the right side of the page</span>
+
:3. Paste your booking website link to the corresponding field and save settings.
−
[[File:Facebook bot settings path newcf.png | border| 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>
−
:3. Log into the <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[https://developers.facebook.com/ Facebook Developer Console]. </span>
+
: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.
−
[[File:Facebook developers login new.png | border| center]]
+
[[File:Image.png|1200px|center|link=https://help.simplybook.me/images/3/34/Image.png]]
−
<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>
 
−
[[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: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>
 
−
: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 products path.png | border| center]]
 
−
<br><br>
 
−
: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:Facebook select messenger.png | border| center]]
 
−
<br><br>
 
−
: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:Facebook select or create page.png | border| center]]
 
−
<br><br>
 
−
: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:Facebook generate token.png|border|center]]
 
−
<br><br>
 
−
[[File:Facebook copy token.png|border|center]]
 
−
<br><br>
 
−
:11. Paste the token into SimplyBook.me <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Facebook Bot feature</span> settings.
 
−
[[File:Facebook bot insert token.png|border|center]]
 
−
<br><br>
 
−
: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>
 
−
[[File:Facebook webhooks paste token and url.png|border|center]]
 
−
<br><br>
 
−
: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:Facebook webhooks add subscriptions select.png|border|center]]
 
−
<br><br>
 
−
: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>
 
−
: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 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>
 
−
:17. Submit your app for review.
 
−
[[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 | 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 | border| center]]
 
−
<br><br>
 
−
 
 
−
=Facebook widget=
 
−
==How to add SimplyBook.me widget to your Facebook fan page==
 
−
<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 <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widgets settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Facebook 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>
 
−
[[File:Facebook widget path new navigation.png|1200px|border | center]]
 
−
<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.
 
−
<br>
 
−
[[File:Simplybook tab on facebook.png | center]]
 
−
<br><br>
 
−
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>
 
−
[[File:Facebook reorder.png | center]]
 
−
<br><br>
 
−
: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>
 
−
[[File:Facebook rename tab 2.png | center]]
 
−
<br><br>
 
−
[[File:Rename tab.png | center]]
 
 
<br><br>
 
<br><br>
  
−
==How to remove Facebook widget from my Facebook page?==
+
=How to add a Facebook Messenger chat to your booking page=
−
<br>
+
:'''Video tutorial available '''[[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=PuFFtCOksc8]]
−
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>
 
−
[[File:Remove tab Facebook.png | center]]
 
 
<br><br>
 
<br><br>
−
==Facebook widget is not visible from mobiles==
 
−
<br>
 
−
:Unfortunately, Facebook does not show third-party apps from mobiles. Your clients need to access desktop version to book from Facebook.
 
−
<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>
 

Latest revision as of 14:17, 2 August 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 Youtube-Logo.png



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 redesigned.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 & insta bookings settings path redesigned.png



4. Click on Connect with Facebook button on the page you see.
Connect with facebook button redesigned.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 and insta new steps.png



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)
Facebook and insta new result.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.
Facebook and insta new add booking 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 & insta logout path redesidned.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 Facebook business page cover photo, click on three dots below the cover image and select Add action button


Fb new add action button.png



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
Fb action button new book.png



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



3. Paste your booking website link to the corresponding field and save settings.
Add link to fb button.png



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.
Image.png



How to add a Facebook Messenger chat to your booking page

Video tutorial available Youtube-Logo.png



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