Bookings on Facebook: Difference between revisions

No edit summary
No edit summary
 
(18 intermediate revisions by the same user not shown)
Line 1: Line 1:
<languages/>
<translate>
<!--T: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
}}
</translate>
<translate>
<!--T:2-->
<br><br>
<br><br>
==Call-to-action button for facebook fan page==
__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 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;">[[Special:MyLanguage/Custom CSS custom feature|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>
:1. Go to your Page’s cover photo and click <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">+ Add a Button</span>
</translate>
<br>
<translate>
<nomobile>[[File:Fb add button.png | center]]</nomobile>
<!--T:3-->
<mobileonly>[[File:M add booking button step 2 new.png | center]]</mobileonly>
:'''Video tutorial available '''<p><youtube>9o5fJkZD384</youtube></p>
<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.
==How to add and use booking option to Facebook/Instagram business page==
<br>
[[File:Fb book now option.png| border|center]]
<br><br>
<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.
: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.
<nomobile>[[File:Add booking button result.png | center]]</nomobile>
[[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]]
<mobileonly>[[File:M add booking button result.png | center]]</mobileonly>
 
<br><br>
<br><br>
==Facebook chat bot==
</translate>
<translate>
<!--T:4-->
:2. Login to your Facebook/Instagram business account(s) in another browser tab.
<br><br>
<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>
: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>
Contact support for more details.</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>
: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.
: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 bot enable v3.png | 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>
:2. Choose <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> near it to see basic instructions.
</translate>
[[File: Facebook bot settings path.png | center]]
<translate>
<!--T:5-->
: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>
:3. Log into the <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[https://developers.facebook.com/ Facebook Developer Console]. </span>
</translate>
[[File:Facebook developers login new.png | center]]
<translate>
<!--T:6-->
: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>
:(the representation options depend on your Facebook business page)
[[File:Facebook and insta new result.png|border|center]]
<br><br>
<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>
: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 create new app.png | center]]
[[File:Facebook and insta new add booking to post.png|border|center]]
<br><br>
<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]]
<br><br>
<br><br>
:6. On the next page you will see scenarios. Please skip this step.
[[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.
[[File:Fb bot add basic details.png | center]]
<br><br>
<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.
</translate>
[[File:Fb bot products path.png | center]]
<translate>
<!--T:7-->
==How to remove Book button from Facebook/Instagram pages==
<br><br>
<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.
: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:Fb bot messenger path.png | 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>
: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.
</translate>
[[File:Fb bot token copy.png | center]]
<translate>
<!--T:8-->
:2. Click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Logout</span> at the top of the page.
[[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>
:If you see the following error while selecting the page you may need to edit the permissions.
</translate>
[[File:Fb bot error permissions.png | border|center]]
<translate>
<!--T:9-->
==How to add and use booking option on Instagram only==
<br><br>
<br><br>
[[File:Permission steps facebook.png |border|center]]
: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>
<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>
:2. Navigate to your <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">profile</span> and select to edit it.
[[File:Fb bot token paste.png | center]]
<br><br>
<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>
: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 bot setup webhooks.png | center]]  
[[File:Insta setup.png|border|center]]
<br><br>
<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>
[[File:Fb bot setup webhooks step 2.png | center]]
<br><br>
<br><br>
:14. Click <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Verify and Save</span> button.
</translate>
: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.
<translate>
[[File:Pages messaging add.png | center]]
<!--T:10-->
==How to remove Book option from Instagram business page==
<br><br>
<br><br>
[[File:Fb bot submission step 1.png | center]]
: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>
:16. Complete the steps you see in the pop-up.(the steps may be changed by Facebook with time)
[[File:Fb but submit for review.png | center]]
<br><br>
<br><br>
:17. Submit your app for review.
</translate>
[[File:Fb bot submission step 3.png | center]]
<translate>
<br><br>
 
:18. You can also make your app live for approved users to test.
<!--T:11-->
:It will become available to all your page visitors after Facebook approval.
=Call-to-action button for Facebook fan page=
[[File:Fb bot make app public.png | center]]
<br><br>
<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.
: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>
:Here you can see how approved request will look like<br>
[[File:Bot approved.png | center]]
<br><br>
==Facebook widget==
===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 <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.
[[File:Fb new add action button.png|1200px|center|link=https://help.simplybook.me/images/b/b3/Fb_new_add_action_button.png]]
<br>
[[File:Facebook widget path v3.png | center]]
<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.
</translate>
<br>
<translate>
[[File:Simplybook tab on facebook.png | center]]
<!--T:12-->
: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 [[Special:MyLanguage/Facebook and Instagram Bookings]] custom feature
[[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>
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.
: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 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>
[[File:Facebook reorder.png | center]]
</translate>
<translate>
<!--T:13-->
:3. Paste your booking website link to the corresponding field and save settings.
[[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. 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>
: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.
<br>
[[File:Image.png|1200px|center|link=https://help.simplybook.me/images/3/34/Image.png]]
[[File:Facebook rename tab 2.png | center]]
<br><br>
<br><br>
[[File:Rename tab.png | center]]
</translate>
<translate>
 
<!--T:14-->
=How to add a Facebook Messenger chat to your booking page=
:'''Video tutorial available '''<p><youtube>PuFFtCOksc8</youtube></p>
<br><br>
<br><br>
===How to remove Facebook widget from my Facebook page?===
 
<br>
</translate>
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>
===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>