| Info |
|---|
CloudCX Connector Hub provides integration with Facebook via the API for Facebook. The configuration is done server-side, in an easy and straightforward way. Let's follow the instructions step by step to complete the integration with Facebook. |
| Note |
|---|
If users in your system intend to utilize the Facebook Messenger channel, configuring this application setting is crucial. |
| Table of Contents |
|---|
...
Create A
...
Meta App
To integrate with Facebook, you have to create a Facebook app in the developer portal. You can find more details about creating Facebook apps https://developers.facebook.com/docs/development#register.
Prerequisites
A valid Facebook Account.
A valid Facebook Meta Developer Account.
A verified Facebook Business Manager Account, after set up a Business Manager account, verify your business.
A valid Facebook Page.
Register
...
a Meta App
Go to Facebook developer portal and click on the “Create App” button
...
Select the option “Other”.
...
For the app type, choose “Business”.
...
...
For Business portfolio, select your Meta business portfolio, then click Next.
...
For Use cases, select Other, then click Next.
...
For App type, select Business, then click Next.
...
For App details, enter basic details like the app name and email, and select
...
your Business Manager Account.
Note: When creating the APP, it must be placed under the a verified Facebook Business Manager Account, otherwise the APP cannot be submitted.
...
Click Create app.
The Meta app is created; You are redirected to the App Dashboard page, you will have to obtain the App ID and App Secret. These values will be available in the app settings and will be required while setting up in the Connector Hub.
...
Configure Facebook Login
...
Set up the Meta App
Click Set up to add the Facebook Login for Business product via the Facebook app dashboard.
...
In the Settings, enable Client OAuth login, Web OAuth login, and add the Authorized Redirect URL
https://your_cx_domain/api/v1.0/facebook/integration/callbackto the Valid OAuth Redirect URIs.
...
Configure the Facebook App
In the App settings > Basic, add your
CloudCX installation domainas your app domain.
...
In the products section in your app settings page, Add “Messenger”
...
Go to the Messenger API Settings and connect Facebook pages to generate access tokens.
...
Click Set up to add the Messenger product via the Facebook app dashboard.
...
In the Messenger API Settings, scroll down to the 2. Generate access tokens section, and click Connect to add your Facebook Page.
...
After connecting the pages, click on “Generate” to generate access tokens.
...
Click on “Copy” to copy access token, this value will be required while setting up in the Configure webhooks.
...
Go to the Configure webhooks and click on “Configure”, paste the access token to the Verify Token.
...
Add the Webhook URL
https://your_cx_domain/fb/webhookas the Callback URL.
...
After configuring webhooks, Click on Add subscriptions from the page to add Webhook Subscriptions.
...
Subscribe to all the fields and save the subscription.
...
Configure Facebook Integration
Log in to your system administrator portal https://your_cx_domain:9006, go to Advance > Connector Hub Setting > Facebook to configure.
Paste the App ID & App secret to Client-id & Client-Secret, the App ID & App secret obtain from Facebook App Settings https://cloudfon.atlassian.net/wiki/spaces/CCSD/pages/edit-v2/52199764#Register-A-Facebook-App.
Copy the Authorized Redirect URL and paste to Facebook Login for Business https://cloudfon.atlassian.net/wiki/spaces/CCSD/pages/edit-v2/52199764#Configure-Facebook-Login.
Copy the Webhook URL and paste to Facebook Messenger API Settings https://cloudfon.atlassian.net/wiki/spaces/CCSD/pages/edit-v2/52199764#Configure-the-Facebook-App.
...
That's all the Facebook integration, now, you can connect your Facebook pages to the Inbox > Channels > Facebook in your tenant 3.1.2 Facebook!
(Optional) Add a Tester for Meta App
After a Meta app is created, only your Meta Developer account has permission to interact with the app. To keep your account safe, you can add a user as a Tester to aid with the testing process.
Prerequisites
The user who you want to add as a Tester must have a Meta developer account.
Add a user to business portfolio
Go to Business settings in Meta Business Manager, then select the business portfolio that is connected with your Meta app.
...
Go to Users > People, then click Invite people.
...
In the Email address field, enter the email address of the user who you want to add, then click Next.
...
Set the type of access that you want to assign as needed, then click Next.
...
Leave business asset(s) blank, then click Next.
...
Click Send invitation.
...
Click Done to close the window.
...
Meta will send an activation email to the user; The user needs to accept the invitation to join your business portfolio.
Assign the Meta app to the user
On the right of the desired user, click
then select Assign assets.
...
Assign the Meta app and test access to the user, then click Assign assets.
...
Click Done to close the window.
...
...
The user is added as a Tester and can interact with your Meta app.
Submit the
...
Meta App into production
Before you can start using your Facebook app in production, you will have to get it verified by Facebook. Refer to the docs https://developers.facebook.com/docs/apps/review/ on getting your app verified.
Prerequisites
You need to connect a Facebook Page in your Tenant, and then test message delivery between the Facebook Page and the system. About the tenant how to connect the Facebook Page, you can find more details about Facebook 3.1.2 Facebookin Tenant Administrator User Guide.
Before you Submit
Test message delivery between Facebook Page and the system.
(Optional) Add a user as a Tester.
By default, only your Meta Developer account has permission to interact with the app. You can directly use your Meta Developer account to test message delivery, but we recommend that you add a Tester account with limited access to aid with the testing process. This helps avoid exposing your Meta Developer account, as Meta requires a Facebook account to test your app.
Test message delivery and record five screencasts for the below permissions:
pages_show_list: A screencast that demonstrates how the system can access the list of Pages a person manages.
pages_manage_metadata: A screencast that demonstrates how the system can receive messages from the Page.
business_management: A screencast that demonstrates how the system can receive messages from different Pages.
Business Asset User Profile Access: A screencast that demonstrates how you can distinguish the different visitors from the visitor’s names in the system.
pages_messaging: A screencast that demonstrates how you can manage and access Page conversations in the system.
Note:
App Review - Best Practices may help improve the quality of your submission and reduce the chances of it being rejected.
Step-by-Step Instructions
Complete app settings
Go to App settings > Basic, complete the App’s details like the ”Contact email, Privacy Policy URL, Terms of Service URL, App Icon and Category”.
...
as below:
App domains: Enter your
CloudCX installation domainas your app domainContact email: Enter your contact email address.
Privacy Policy URL: Enter your organization's privacy policy URL.
Terms of Service URL: Enter your organization's terms of service URL.
App icon: Upload your organization's icon.
Category: Select Messaging.
...
Scroll down to the bottom of the page, add a website platform to share the system URL with Meta.
Click Add platform.
Select the checkbox of Website, then click Next.
In the Site URL field, enter the FQDN of your system.
Click Save changes.
...
Select permissions and features
Go to App Review > Permissions and Features,
...
pages_messaging
Business Asset User Profile Access
pages_manage_metadata
public_profile
business_management
pages_show_list
...
search for the public_profile permission and click Request advanced access.
...
Select the checkbox to agree that you will comply with the allowed usage, then click Confirm.
...
Fill in the following information based on your situation, then click Submit.
...
Click Submit in thedouble-check page and enter password to confirm your operation.
...
The page will refresh, the public_profile permission gained Advanced access. Then search for the below other required permissions and click the corresponding Request advanced access button to add them to your submission.
...
Permission | Description |
pages_manage_metadata | The pages_manage_metadata permission allows your app to subscribe and receive webhooks about activity on the Page, and to update settings on the Page. Allowed Usage · Subscribe to receive webhooks of your Page. · Update settings of your Page. |
pages_messaging | The pages_messaging permission allows your app to manage and access Page conversations in Messenger. Allowed Usage · Create interactive experiences initiated by a user. · Confirm customer interactions such as purchases, orders and bookings. · Send customer support messages. |
pages_show_list | The pages_show_list permission allows your app to access the list of Pages a person manages. Allowed Usage · Show a person the list of Pages they manage. · Verify that a person manages a Page. |
Business Asset User Profile Access | The Business Asset User Profile Access feature allows your app to read the User Fields for users engaging with your business assets such as id, ids_for_business, name, and picture. Allowed Usage · You can use this feature if your app uses one or more of the User Fields in its business app experience. |
public_profile | The public_profile permission allows an app to read the Default Public Profile Fields on the User node. This permission is automatically granted to all apps. Allowed Usage · Authenticate app users and provide them with a personalized in-app experience. |
business_management | The business_management permission allows your app to read and write with the Business Manager API. Allowed Usage · Manage business assets such as an ad account. · Claim ad accounts. |
Click Continue request.
Remove unnecessary permissions
Go to Messenger > Messenger API Settings, in the 3. Complete App Review section, click Request Permission.
...
Unselect the checkboxes of the permission pages_read_engagement, then click Request Permission.
...
You will be redirected to App Review > Requests.
Answer data handling questions
Go to App Review > Requests
...
, scroll down to the Data handling questions section, then click Answer questions about data handling.
...
Fill in the following information based on your situation, then click Submit.
...
Complete the following tasks to demonstrate why the pages_show_list permission with advanced access is needed and how the app uses it.
Click How will your app use the advanced access pages_show_list permission?.
...
b. Copy and paste the following text in the detailed description box.
This app is used to integrate the CX System with Facebook Messenger. After obtaining the "pages_show_list" permission, administrators can connect and manage the list of pages from a person within the CX System.
...
c. Click Upload file to upload the screencast that you have uploaded for pages_show_list.
...
d. Select the checkbox to agree that you will comply with the allowed usage, then click Save.
...
Complete the following tasks to demonstrate why the pages_manage_metadata permission with advanced access is needed and how the app uses it.
a. Click How will your app use the advanced access pages_manage_metadata permission?.
...
b. Copy and paste the following text in the detailed description box.
This app is used to integrate the CX System with Facebook Messenger. After obtaining the "pages_manage_metadata" permission, agents can receive Facebook messages sent from visitors and reply to visitor's messages directly within the CX System.
...
c. Click Upload file to upload the screencast that you have uploaded for pages_manage_metadata.
...
d. Select the checkbox to agree that you will comply with the allowed usage, then click Save.
...
Complete the following tasks to demonstrate why the pages_messaging permission with advanced access is needed and how the app uses it.
a. Click How will your app use the advanced access pages_messaging permission?.
...
b. Copy and paste the following text in the detailed description box.
This app is used to integrate the CX System with Facebook Messenger. After obtaining the "pages_messaging" permission, agents can manage Pages messages within the CX System.
...
c. In the Test and reproduce the functionality of your integration section, select your Facebook Page, copy and edit the following text based on your situation, then paste in the text field.
Step 1: Log in to the CX System with the following credentials:Login address:{CloudCX installation domain}Company: {company_name}Username: {account_or_email_address}Password: {password}Step 2: Log in to Facebook with the following credentials and send a message to the Facebook Page:{url_for_facebook_page}Email or phone: {email_address_or_phone_number}Password: {password}Step 3: Receive and reply to the message on your CX System.
...
d. Click Upload file to upload the screencast that demonstrates how you send a message to your Facebook Page and how the message is received and replied on the System.
...
e. Select the checkbox to agree that you will comply with the allowed usage, then click Save.
...
Complete the following tasks to demonstrate why the business_management permission with advanced access is needed and how the app uses it.
a. Click How will your app use the advanced access business_management permission?.
...
b. Copy and paste the following text in the detailed description box.
This app is used to integrate the CX System with Facebook Messenger. After obtaining the "business_management" permission, agents can receivemessages from different Pages within the CX System.
...
c. Click Upload file to upload the screencast that you have uploaded for business_management.
...
d. Select the checkbox to agree that you will comply with the allowed usage, then click Save.
...
Complete the following tasks to demonstrate why the Business Asset User Profile Access permission with advanced access is needed and how the app uses it.
a. Click How will your app use the advanced access Business asset user profile access feature?.
...
b. Copy and paste the following text in the detailed description box.
This app is used to integrate the CX System with Facebook Messenger. After obtaining the "Business Asset User Profile Access" permission, agents can view the name of Facebook users who send messages to the Page directly within the System, which enables them to identify different Facebook users and provide better services.
...
c. Click Upload file to upload the screencast that you have uploaded for Business Asset User Profile Access.
...
d. Select the checkbox to agree that you will comply with the allowed usage, then click Save.
...
After completing all requests, click
...
Submit for Review
...
and enter password to confirm your operation.
...
Note:
Each permission is required to submit a recorded video about how the permission is used in CloudCX system.
After Facebook has approved it, it will have a green label of "advanced access";
Permissions are more likely to be denied by Facebook, please keep in real-time communication with theircustomer their customer service;
Permission repeatedly denied to apply applying frequently, your account will be considered unstable account and will be banned by Facebook.
After obtaining advanced access and switching the App Mode to Live, the configuration on Facebook is finished.
...
Configure Facebook Integration in CloudCX
Log in to your system administrator portal https://your_cx_domain:9006, go to Advance > Connector Hub Setting > Facebook to configure.
Paste the App ID & App secret to Client-id & Client-Secret, the App ID & App secret obtain from Facebook App Settings https://cloudfon.atlassian.net/wiki/spaces/CCSD/pages/edit-v2/52199764#Register-A-Facebook-App .
Copy the Authorized Redirect URL and paste to Facebook Login for Business https://cloudfon.atlassian.net/wiki/spaces/CCSD/pages/edit-v2/52199764#Configure-Facebook-Login .
Copy the Webhook URL and paste to Facebook Messenger API Settings https://cloudfon.atlassian.net/wiki/spaces/CCSD/pages/edit-v2/52199764#Configure-the-Facebook-App .
...
Now, all the tenant in your system can connect to their Facebook pages, and then agents can receive and reply Facebook messages directly within your system!
Warning Message
This warning message indicates that the Meta Application on Facebook, configured on the System Connect Hub, is incorrect or invalid.
...