{"__v":0,"_id":"5845a4a99f6fbb1b004307fe","category":{"version":"5845a4a89f6fbb1b004307b7","project":"54d3007669578e0d002730c9","_id":"5845a4a89f6fbb1b004307bd","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-08T18:48:02.369Z","from_sync":false,"order":5,"slug":"integrations","title":"Integrations"},"parentDoc":null,"project":"54d3007669578e0d002730c9","user":"55bf6cdcad601c2b00762d13","version":{"__v":1,"_id":"5845a4a89f6fbb1b004307b7","project":"54d3007669578e0d002730c9","createdAt":"2016-12-05T17:32:24.708Z","releaseDate":"2016-12-05T17:32:24.708Z","categories":["5845a4a89f6fbb1b004307b8","5845a4a89f6fbb1b004307b9","5845a4a89f6fbb1b004307ba","5845a4a89f6fbb1b004307bb","5845a4a89f6fbb1b004307bc","5845a4a89f6fbb1b004307bd","5845a4a89f6fbb1b004307be","5845a4a89f6fbb1b004307bf","5845a4a89f6fbb1b004307c0"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"25.0.0","version":"25"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-04-13T05:48:43.950Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"* [Overview](#overview)\n* [Video](#video)\n* [Setting Up a Facebook App and Page](#setting-up-a-facebook-app-and-page)\n* [Integrating API.AI Agent with FB Messenger Bot](#integrating-apiai-agent-with-fb-messenger-bot)\n* [Configuring Webhook in the Facebook App](#configuring-webhook-in-the-facebook-app)\n* [Testing Your Bot](#testing-your-bot)\n* [Hosting FB Messenger Bot with Heroku](#hosting-fb-messenger-bot-with-heroku)\n * [Setting up a Facebook App and Page](#section-setting-up-a-facebook-app-and-page)\n * [Enabling Facebook Integration in API.AI with Heroku Hosting](#section-enabling-facebook-integration-in-api-ai-with-heroku-hosting)\n * [Configuring Heroku App](#section-configuring-heroku-app)\n * [Configuring Webhook in the Facebook App](#section-configuring-webhook-in-the-facebook-app)\n * [Testing Your Bot](#section-testing-your-bot)\n* [Hosting Bots on Your Server](#hosting-bots-on-your-server)\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Overview\"\n}\n[/block]\n**API.AI Facebook Integration** allows you to easily create Facebook Messenger bots with natural language understanding based on the API.AI technology. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Video\"\n}\n[/block]\nWatch this video on how to integrate your API.AI agent with FB Messenger. Or you can follow the steps described in the documentation [below](#setting-up-a-facebook-app-and-page).\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F5iKdfPjEOJk%3Ffeature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D5iKdfPjEOJk&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F5iKdfPjEOJk%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\\\" width=\\\"640\\\" height=\\\"480\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://www.youtube.com/watch?v=5iKdfPjEOJk&feature=youtu.be\",\n  \"title\": \"Build Messenger bots with Api.ai\",\n  \"favicon\": \"https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico\",\n  \"image\": \"https://i.ytimg.com/vi/5iKdfPjEOJk/hqdefault.jpg\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Setting Up a Facebook App and Page\"\n}\n[/block]\n\nLog in to the <a href=\"https://developers.facebook.com\" target=\"_blank\">Facebook Developer Console</a> and select 'Add a New App' from the 'My Apps' menu.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/QvNU1Sv8Tdq4xqsztIxD_FB-Add-New-App.png\",\n        \"FB-Add-New-App.png\",\n        \"2383\",\n        \"742\",\n        \"#371e12\",\n        \"\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\nProvide the app name, email address, choose a category, and click 'Create App ID'.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/JTEat2smTMeWaczkjY9s_FB-App-details.png\",\n        \"FB-App-details.png\",\n        \"2272\",\n        \"1172\",\n        \"#1cab54\",\n        \"\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\nIn the Product Setup, click on 'Get Started' in the Messenger section.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/jGKN0rvFRNqQaNdQqLl7_FB-Add-Product-Messenger.png\",\n        \"FB-Add-Product-Messenger.png\",\n        \"2550\",\n        \"1186\",\n        \"#29ae7c\",\n        \"\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\nOn the Messenger Platform welcome page, click 'Get Started'. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/2rXdDvjQTI3CNjI2h79Q_FB-Messenger-Get-Started.png\",\n        \"FB-Messenger-Get-Started.png\",\n        \"2544\",\n        \"936\",\n        \"#bda14e\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nOn the next page, select a Facebook page in the Token Generation section. If you don't have a Facebook page yet, you'll need to create one.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/ydCBr6wiQQGrvlsnngZ7_FB-Select-Page.png\",\n        \"FB-Select-Page.png\",\n        \"2526\",\n        \"1244\",\n        \"#bc9f56\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nAfter you have selected a page, you'll see your Page Access Token. Copy it to the clipboard. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/QXCMNzTVTd69xMJnrBsN_FB-Page-Access-Token-generated.png\",\n        \"FB-Page-Access-Token-generated.png\",\n        \"2544\",\n        \"1112\",\n        \"#bea44e\",\n        \"\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Integrating API.AI Agent with FB Messenger Bot\"\n}\n[/block]\n<a href=\"https://console.api.ai/api-client/#/newAgent\" target=\"_blank\">Create an API.AI agent</a> with the help of the <a href=\"https://docs.api.ai/docs/key-concepts\" target=\"_blank\">API.AI NLU technology tools</a>.\n\nIn the left side menu, click Integrations and enable Facebook Messenger integration. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/5bhwNlBZSNyIKEQjDmao_FB-Integrations-enable.png\",\n        \"FB-Integrations-enable.png\",\n        \"2086\",\n        \"998\",\n        \"#2d9be0\",\n        \"\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\nCreate your own Verify Token inserting it into the 'Verify Token' field and paste the Facebook Page Access Token that you copied in your Facebook app settings. Then, click 'Start' to launch your Facebook Messenger bot.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/K82xPRxwRWORk6raTgmO_FB-agent-integration-settings.png\",\n        \"FB-agent-integration-settings.png\",\n        \"2214\",\n        \"1350\",\n        \"#5863d1\",\n        \"\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Configuring Webhook in the Facebook App\"\n}\n[/block]\nGo back to the Facebook app settings and click 'Setup Webhooks' in the Webhook section.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/QFjZcdN2QryxXx3Vw6Sa_FB-Setup-Webhooks.png\",\n        \"FB-Setup-Webhooks.png\",\n        \"2554\",\n        \"1416\",\n        \"#bba154\",\n        \"\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\nTo set up the webhook, do the following:\n\n- Go back to your API.AI agent settings, copy the Callback URL and insert it to the 'Callback URL' field.\n\n- Fill in the FB_VERIFY_TOKEN field with the token that you created in your API.AI agent settings.\n\n- Check the \"messages\" and \"messaging postbacks\" checkboxes.\n\n- Click the 'Verify and Save' button and wait until the \"Complete\" status appears.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/772cb7f-FB-integration_webhook-settings.jpg\",\n        \"FB-integration_webhook-settings.jpg\",\n        2488,\n        1272,\n        \"#929295\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"If you are using <a href=\\\"https://docs.api.ai/docs/rich-messages\\\" target=\\\"_blank\\\">rich messages</a>, be sure to check the `messages_postbacks` option in your Facebook app webhook settings.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Testing Your Bot\"\n}\n[/block]\nNow you can test your bot in your FB Messenger.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/S02YBSKT1uPhlFbyJyTA_FB_Messenger_Testing.png\",\n        \"FB_Messenger_Testing.png\",\n        \"480\",\n        \"766\",\n        \"#0982f4\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nTo make your Messenger bot public, submit your app for approval in the 'App Review' section of your Facebook app. Read more in the <a href=\"https://developers.facebook.com/docs/messenger-platform/app-review\" target=\"_blank\">Facebook developer documentation</a>.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/47dee75-FB-app-submit-for-approval.png\",\n        \"FB-app-submit-for-approval.png\",\n        2540,\n        768,\n        \"#e7e7e8\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\nBefore publishing your app, you can make it available for testing by adding testers in the Facebook app settings. To do so, click 'Roles' from the left side menu in your FB app and then 'Add Testers'.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/4a5f81f-FB-integration_add_testers.png\",\n        \"FB-integration_add_testers.png\",\n        2584,\n        1496,\n        \"#495260\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Hosting FB Messenger Bot with Heroku\"\n}\n[/block]\nHere’s an example of how you can host and launch your Facebook Messenger bot with Heroku.\n\n## Setting up a Facebook App and Page\n\nCreate a Facebook app as described [here](#setting-up-a-facebook-app-and-page).\n\n## Enabling Facebook Integration in API.AI with Heroku Hosting\n\n<a href=\"https://console.api.ai/api-client/#/newAgent\" target=\"_blank\">Create an API.AI agent</a> with the help of the <a href=\"https://docs.api.ai/docs/key-concepts\" target=\"_blank\">API.AI NLU technology tools</a>.\n\nIn the left side menu, click Integrations and enable Facebook Messenger integration. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/CUj9pI5GQTesWr6BOA01_FB-Integrations-enable.png\",\n        \"FB-Integrations-enable.png\",\n        \"2086\",\n        \"998\",\n        \"#2d9be0\",\n        \"\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\nThen, click on the ‘Deploy to Heroku’ button (you need to be logged in to your Heroku account).\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/CPoGKoEQT8ujm6TILUU4_FB-integration-host-with-Heroku.png\",\n        \"FB-integration-host-with-Heroku.png\",\n        \"2216\",\n        \"1356\",\n        \"#4869d3\",\n        \"\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\n## Configuring Heroku App\n\nOn the Heroku app settings page, fill in the following fields:\n\n**App Name** – insert your app name that will be used in your Facebook app settings.\n\n**FB_VERIFY_TOKEN** – create your own verification token (can be any string) that will be used in your Facebook app settings.\n\n**FB_PAGE_ACCESS_TOKEN** – paste the token that have been generated in the process of the Facebook app creation.\n\nThen, click the ‘Deploy for Free’ button and wait until “Your app was successfully deployed.” appears.\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/M3Wm63B6RjmtZVpMHDzn_fb-integration-heroku.png\",\n        \"fb-integration-heroku.png\",\n        \"2328\",\n        \"1422\",\n        \"#5e458f\",\n        \"\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\n## Configuring Webhook in the Facebook App\n\nGo back to the Facebook app settings and click the ‘Setup Webhooks’ button.\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/8z3kh85TB2pJJFBUSG2c_fb-webhook-setup.png\",\n        \"fb-webhook-setup.png\",\n        \"2034\",\n        \"822\",\n        \"#eeeef3\",\n        \"\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\nTo set up the webhook, do the following:\n\n- Insert the Heroku app URL to the ‘Callback URL’ field in the format `https://[YOUR_APP_NAME].herokuapp.com/webhook`\n\n- Fill in the FB_VERIFY_TOKEN field with the token that you created in you Heroku app.\n\n- Check the “messages” checkbox.\n\n- Click the ‘Verify and Save’ button and wait until the “Complete” status appears.\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/umKCEDrR5qfPAwrihDrg_fb-webhook-setup-details.png\",\n        \"fb-webhook-setup-details.png\",\n        \"2044\",\n        \"1108\",\n        \"#205846\",\n        \"\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"If you are using <a href=\\\"https://docs.api.ai/docs/rich-messages\\\" target=\\\"_blank\\\">rich messages</a>, be sure to check the `messages_postback` option in your Facebook app webhook settings.\"\n}\n[/block]\n## Testing Your Bot\n\nGo to the Facebook page and send a message.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/JriyqefPTpuO3Eyf8P9W_fb-testing-bot-assistant.png\",\n        \"fb-testing-bot-assistant.png\",\n        \"2066\",\n        \"1248\",\n        \"#5c6c79\",\n        \"\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\nIf your bot is not responding, please try to restart the Heroku service. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/OxLkxgYZQxa0RkOQMo6y_Xz29fv2vXl.gif\",\n        \"Xz29fv2vXl.gif\",\n        \"480\",\n        \"519\",\n        \"#a2a461\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"To make your Messenger bot public, submit your app for approval in the 'App Review for Messenger' section on the Messenger page of your Facebook app.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Hosting Bots on Your Server\"\n}\n[/block]\nYou can run our Docker image on your own server:\n\n    docker run -it --name fb_bot \\\n               -p <your_desired_port>:5000 \\\n               -e APIAI_ACCESS_TOKEN=\"API.AI client access token\" \\\n               -e FB_PAGE_ACCESS_TOKEN=\"Facebook Page Access Token\" \\\n               -e FB_VERIFY_TOKEN=\"Facebook Verify Token\" \\\n               api-ai/api-ai-facebook\n    \nYou can also use our source code from <a href=\"https://github.com/api-ai/apiai-nodejs-client/tree/master/samples/facebook\">github</a> to create your custom Facebook Messenger bots.","excerpt":"","slug":"facebook-integration","type":"basic","title":"Facebook Integration"}

Facebook Integration


* [Overview](#overview) * [Video](#video) * [Setting Up a Facebook App and Page](#setting-up-a-facebook-app-and-page) * [Integrating API.AI Agent with FB Messenger Bot](#integrating-apiai-agent-with-fb-messenger-bot) * [Configuring Webhook in the Facebook App](#configuring-webhook-in-the-facebook-app) * [Testing Your Bot](#testing-your-bot) * [Hosting FB Messenger Bot with Heroku](#hosting-fb-messenger-bot-with-heroku) * [Setting up a Facebook App and Page](#section-setting-up-a-facebook-app-and-page) * [Enabling Facebook Integration in API.AI with Heroku Hosting](#section-enabling-facebook-integration-in-api-ai-with-heroku-hosting) * [Configuring Heroku App](#section-configuring-heroku-app) * [Configuring Webhook in the Facebook App](#section-configuring-webhook-in-the-facebook-app) * [Testing Your Bot](#section-testing-your-bot) * [Hosting Bots on Your Server](#hosting-bots-on-your-server) [block:api-header] { "type": "basic", "title": "Overview" } [/block] **API.AI Facebook Integration** allows you to easily create Facebook Messenger bots with natural language understanding based on the API.AI technology. [block:api-header] { "type": "basic", "title": "Video" } [/block] Watch this video on how to integrate your API.AI agent with FB Messenger. Or you can follow the steps described in the documentation [below](#setting-up-a-facebook-app-and-page). [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F5iKdfPjEOJk%3Ffeature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D5iKdfPjEOJk&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F5iKdfPjEOJk%2Fhqdefault.jpg&key=02466f963b9b4bb8845a05b53d3235d7&type=text%2Fhtml&schema=youtube\" width=\"640\" height=\"480\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://www.youtube.com/watch?v=5iKdfPjEOJk&feature=youtu.be", "title": "Build Messenger bots with Api.ai", "favicon": "https://s.ytimg.com/yts/img/favicon-vflz7uhzw.ico", "image": "https://i.ytimg.com/vi/5iKdfPjEOJk/hqdefault.jpg" } [/block] [block:api-header] { "type": "basic", "title": "Setting Up a Facebook App and Page" } [/block] Log in to the <a href="https://developers.facebook.com" target="_blank">Facebook Developer Console</a> and select 'Add a New App' from the 'My Apps' menu. [block:image] { "images": [ { "image": [ "https://files.readme.io/QvNU1Sv8Tdq4xqsztIxD_FB-Add-New-App.png", "FB-Add-New-App.png", "2383", "742", "#371e12", "" ], "sizing": "full" } ] } [/block] Provide the app name, email address, choose a category, and click 'Create App ID'. [block:image] { "images": [ { "image": [ "https://files.readme.io/JTEat2smTMeWaczkjY9s_FB-App-details.png", "FB-App-details.png", "2272", "1172", "#1cab54", "" ], "sizing": "full" } ] } [/block] In the Product Setup, click on 'Get Started' in the Messenger section. [block:image] { "images": [ { "image": [ "https://files.readme.io/jGKN0rvFRNqQaNdQqLl7_FB-Add-Product-Messenger.png", "FB-Add-Product-Messenger.png", "2550", "1186", "#29ae7c", "" ], "sizing": "full" } ] } [/block] On the Messenger Platform welcome page, click 'Get Started'. [block:image] { "images": [ { "image": [ "https://files.readme.io/2rXdDvjQTI3CNjI2h79Q_FB-Messenger-Get-Started.png", "FB-Messenger-Get-Started.png", "2544", "936", "#bda14e", "" ] } ] } [/block] On the next page, select a Facebook page in the Token Generation section. If you don't have a Facebook page yet, you'll need to create one. [block:image] { "images": [ { "image": [ "https://files.readme.io/ydCBr6wiQQGrvlsnngZ7_FB-Select-Page.png", "FB-Select-Page.png", "2526", "1244", "#bc9f56", "" ] } ] } [/block] After you have selected a page, you'll see your Page Access Token. Copy it to the clipboard. [block:image] { "images": [ { "image": [ "https://files.readme.io/QXCMNzTVTd69xMJnrBsN_FB-Page-Access-Token-generated.png", "FB-Page-Access-Token-generated.png", "2544", "1112", "#bea44e", "" ], "sizing": "full" } ] } [/block] [block:api-header] { "type": "basic", "title": "Integrating API.AI Agent with FB Messenger Bot" } [/block] <a href="https://console.api.ai/api-client/#/newAgent" target="_blank">Create an API.AI agent</a> with the help of the <a href="https://docs.api.ai/docs/key-concepts" target="_blank">API.AI NLU technology tools</a>. In the left side menu, click Integrations and enable Facebook Messenger integration. [block:image] { "images": [ { "image": [ "https://files.readme.io/5bhwNlBZSNyIKEQjDmao_FB-Integrations-enable.png", "FB-Integrations-enable.png", "2086", "998", "#2d9be0", "" ], "sizing": "full" } ] } [/block] Create your own Verify Token inserting it into the 'Verify Token' field and paste the Facebook Page Access Token that you copied in your Facebook app settings. Then, click 'Start' to launch your Facebook Messenger bot. [block:image] { "images": [ { "image": [ "https://files.readme.io/K82xPRxwRWORk6raTgmO_FB-agent-integration-settings.png", "FB-agent-integration-settings.png", "2214", "1350", "#5863d1", "" ], "sizing": "full" } ] } [/block] [block:api-header] { "type": "basic", "title": "Configuring Webhook in the Facebook App" } [/block] Go back to the Facebook app settings and click 'Setup Webhooks' in the Webhook section. [block:image] { "images": [ { "image": [ "https://files.readme.io/QFjZcdN2QryxXx3Vw6Sa_FB-Setup-Webhooks.png", "FB-Setup-Webhooks.png", "2554", "1416", "#bba154", "" ], "sizing": "full" } ] } [/block] To set up the webhook, do the following: - Go back to your API.AI agent settings, copy the Callback URL and insert it to the 'Callback URL' field. - Fill in the FB_VERIFY_TOKEN field with the token that you created in your API.AI agent settings. - Check the "messages" and "messaging postbacks" checkboxes. - Click the 'Verify and Save' button and wait until the "Complete" status appears. [block:image] { "images": [ { "image": [ "https://files.readme.io/772cb7f-FB-integration_webhook-settings.jpg", "FB-integration_webhook-settings.jpg", 2488, 1272, "#929295" ], "sizing": "full" } ] } [/block] [block:callout] { "type": "warning", "body": "If you are using <a href=\"https://docs.api.ai/docs/rich-messages\" target=\"_blank\">rich messages</a>, be sure to check the `messages_postbacks` option in your Facebook app webhook settings." } [/block] [block:api-header] { "type": "basic", "title": "Testing Your Bot" } [/block] Now you can test your bot in your FB Messenger. [block:image] { "images": [ { "image": [ "https://files.readme.io/S02YBSKT1uPhlFbyJyTA_FB_Messenger_Testing.png", "FB_Messenger_Testing.png", "480", "766", "#0982f4", "" ] } ] } [/block] To make your Messenger bot public, submit your app for approval in the 'App Review' section of your Facebook app. Read more in the <a href="https://developers.facebook.com/docs/messenger-platform/app-review" target="_blank">Facebook developer documentation</a>. [block:image] { "images": [ { "image": [ "https://files.readme.io/47dee75-FB-app-submit-for-approval.png", "FB-app-submit-for-approval.png", 2540, 768, "#e7e7e8" ], "sizing": "full" } ] } [/block] Before publishing your app, you can make it available for testing by adding testers in the Facebook app settings. To do so, click 'Roles' from the left side menu in your FB app and then 'Add Testers'. [block:image] { "images": [ { "image": [ "https://files.readme.io/4a5f81f-FB-integration_add_testers.png", "FB-integration_add_testers.png", 2584, 1496, "#495260" ], "sizing": "full" } ] } [/block] [block:api-header] { "type": "basic", "title": "Hosting FB Messenger Bot with Heroku" } [/block] Here’s an example of how you can host and launch your Facebook Messenger bot with Heroku. ## Setting up a Facebook App and Page Create a Facebook app as described [here](#setting-up-a-facebook-app-and-page). ## Enabling Facebook Integration in API.AI with Heroku Hosting <a href="https://console.api.ai/api-client/#/newAgent" target="_blank">Create an API.AI agent</a> with the help of the <a href="https://docs.api.ai/docs/key-concepts" target="_blank">API.AI NLU technology tools</a>. In the left side menu, click Integrations and enable Facebook Messenger integration. [block:image] { "images": [ { "image": [ "https://files.readme.io/CUj9pI5GQTesWr6BOA01_FB-Integrations-enable.png", "FB-Integrations-enable.png", "2086", "998", "#2d9be0", "" ], "sizing": "full" } ] } [/block] Then, click on the ‘Deploy to Heroku’ button (you need to be logged in to your Heroku account). [block:image] { "images": [ { "image": [ "https://files.readme.io/CPoGKoEQT8ujm6TILUU4_FB-integration-host-with-Heroku.png", "FB-integration-host-with-Heroku.png", "2216", "1356", "#4869d3", "" ], "sizing": "full" } ] } [/block] ## Configuring Heroku App On the Heroku app settings page, fill in the following fields: **App Name** – insert your app name that will be used in your Facebook app settings. **FB_VERIFY_TOKEN** – create your own verification token (can be any string) that will be used in your Facebook app settings. **FB_PAGE_ACCESS_TOKEN** – paste the token that have been generated in the process of the Facebook app creation. Then, click the ‘Deploy for Free’ button and wait until “Your app was successfully deployed.” appears. [block:image] { "images": [ { "image": [ "https://files.readme.io/M3Wm63B6RjmtZVpMHDzn_fb-integration-heroku.png", "fb-integration-heroku.png", "2328", "1422", "#5e458f", "" ], "sizing": "full" } ] } [/block] ## Configuring Webhook in the Facebook App Go back to the Facebook app settings and click the ‘Setup Webhooks’ button. [block:image] { "images": [ { "image": [ "https://files.readme.io/8z3kh85TB2pJJFBUSG2c_fb-webhook-setup.png", "fb-webhook-setup.png", "2034", "822", "#eeeef3", "" ], "sizing": "full" } ] } [/block] To set up the webhook, do the following: - Insert the Heroku app URL to the ‘Callback URL’ field in the format `https://[YOUR_APP_NAME].herokuapp.com/webhook` - Fill in the FB_VERIFY_TOKEN field with the token that you created in you Heroku app. - Check the “messages” checkbox. - Click the ‘Verify and Save’ button and wait until the “Complete” status appears. [block:image] { "images": [ { "image": [ "https://files.readme.io/umKCEDrR5qfPAwrihDrg_fb-webhook-setup-details.png", "fb-webhook-setup-details.png", "2044", "1108", "#205846", "" ], "sizing": "full" } ] } [/block] [block:callout] { "type": "warning", "body": "If you are using <a href=\"https://docs.api.ai/docs/rich-messages\" target=\"_blank\">rich messages</a>, be sure to check the `messages_postback` option in your Facebook app webhook settings." } [/block] ## Testing Your Bot Go to the Facebook page and send a message. [block:image] { "images": [ { "image": [ "https://files.readme.io/JriyqefPTpuO3Eyf8P9W_fb-testing-bot-assistant.png", "fb-testing-bot-assistant.png", "2066", "1248", "#5c6c79", "" ], "sizing": "full" } ] } [/block] If your bot is not responding, please try to restart the Heroku service. [block:image] { "images": [ { "image": [ "https://files.readme.io/OxLkxgYZQxa0RkOQMo6y_Xz29fv2vXl.gif", "Xz29fv2vXl.gif", "480", "519", "#a2a461", "" ] } ] } [/block] [block:callout] { "type": "info", "body": "To make your Messenger bot public, submit your app for approval in the 'App Review for Messenger' section on the Messenger page of your Facebook app." } [/block] [block:api-header] { "type": "basic", "title": "Hosting Bots on Your Server" } [/block] You can run our Docker image on your own server: docker run -it --name fb_bot \ -p <your_desired_port>:5000 \ -e APIAI_ACCESS_TOKEN="API.AI client access token" \ -e FB_PAGE_ACCESS_TOKEN="Facebook Page Access Token" \ -e FB_VERIFY_TOKEN="Facebook Verify Token" \ api-ai/api-ai-facebook You can also use our source code from <a href="https://github.com/api-ai/apiai-nodejs-client/tree/master/samples/facebook">github</a> to create your custom Facebook Messenger bots.