Line 733: |
Line 733: |
| <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. | | :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> | | <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> | | <br><br> |
| :3. Log into the <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[https://developers.facebook.com/ Facebook Developer Console]. </span> | | :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> | | <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> | | <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> | | :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> | | <br><br> |
− | :6. On the next page you will see scenarios. Please skip this step. | + | :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 skip step.png | center]] | + | [[File:Fb bot add basic details.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. | + | :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 add basic details.png | center]] | + | [[File:Fb bot products path.png | border| 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. | + | :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 products path.png | center]] | + | [[File:Facebook select messenger.png | border| center]] |
| <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. | + | :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 messenger path.png | center]] | + | [[File:Facebook select or create page.png | border| center]] |
| <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. | + | :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 token copy.png | center]] | + | [[File:Facebook generate token.png|border|center]] |
| <br><br> | | <br><br> |
− | :If you see the following error while selecting the page you may need to edit the permissions.
| + | [[File:Facebook copy token.png|border|center]] |
− | [[File:Fb bot error permissions.png | border|center]] | |
| <br><br> | | <br><br> |
− | [[File:Permission steps facebook.png |border|center]] | + | :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> | | <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> | + | :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 token paste.png | center]] | + | [[File:Facebook bot copy token and url.png | border| 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>
| + | [[File:Facebook webhooks paste token and url.png|border|center]] |
− | [[File:Fb bot setup webhooks.png | 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> | + | :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 step 2.png | center]] | + | [[File:Facebook webhooks add subscriptions select.png|border|center]] |
| <br><br> | | <br><br> |
− | :14. Click <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Verify and Save</span> button. | + | :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. |
− | :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:Facebook add to submission pages messaging.png|border|center]] |
− | [[File:Pages messaging add.png | center]] | |
| <br><br> | | <br><br> |
− | [[File:Fb bot submission step 1.png | center]] | + | :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> | | <br><br> |
− | :16. Complete the steps you see in the pop-up.(the steps may be changed by Facebook with time) | + | :16. In the popup that appears provide the details according to the following example. |
− | [[File:Fb but submit for review.png | center]] | + | [[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> |
| + | |
| ------- | | ------- |
| | | |