(Marked this version for translation) |
(Updated via BpDeleteTranslateTags script) |
||
Line 1: | Line 1: | ||
− | + | = Facebook Messenger Integration Configuration= | |
When Bright Pattern Contact Center is integrated with Facebook Messenger, your Bright Pattern Agent Desktop environment is equipped to handle customer-initiated interactions from the Messenger application or the Facebook application on a customer’s mobile phone, tablet, or computer. Incoming chat interactions are routed to the integrated Agent Desktop environment, where agents also have direct access to the phone, live chat, email, SMS, various other mobile messenger apps, customer and agent records, interaction details, and more. | When Bright Pattern Contact Center is integrated with Facebook Messenger, your Bright Pattern Agent Desktop environment is equipped to handle customer-initiated interactions from the Messenger application or the Facebook application on a customer’s mobile phone, tablet, or computer. Incoming chat interactions are routed to the integrated Agent Desktop environment, where agents also have direct access to the phone, live chat, email, SMS, various other mobile messenger apps, customer and agent records, interaction details, and more. | ||
− | |||
Integration configuration involves linking your Facebook Page to your Bright Pattern Contact Center. | Integration configuration involves linking your Facebook Page to your Bright Pattern Contact Center. | ||
− | |||
To configure Facebook Messenger integration, you will need system access to: | To configure Facebook Messenger integration, you will need system access to: | ||
* Your organization’s Facebook App and Facebook Page | * Your organization’s Facebook App and Facebook Page | ||
* The Contact Center Administrator application as admin | * The Contact Center Administrator application as admin | ||
− | |||
The Facebook App contains the settings for your webhook and access token. Your Facebook Page is what is used as your organization’s identity. Messaging events for your Facebook Page are sent securely to your webhook. Contact Center Administrator is where you add the Messenger integration account to Bright Pattern Contact Center. | The Facebook App contains the settings for your webhook and access token. Your Facebook Page is what is used as your organization’s identity. Messaging events for your Facebook Page are sent securely to your webhook. Contact Center Administrator is where you add the Messenger integration account to Bright Pattern Contact Center. | ||
− | == Configuration Procedure == | + | == Configuration Procedure == |
=== Step 1: Create a Facebook App and a Facebook Page === | === Step 1: Create a Facebook App and a Facebook Page === | ||
Go to [http://developers.facebook.com developers.facebook.com], and create a Facebook App and a [https://www.facebook.com/pages/create/ Facebook Page] for your organization. If you have already done this, skip this step and proceed to Step 2. | Go to [http://developers.facebook.com developers.facebook.com], and create a Facebook App and a [https://www.facebook.com/pages/create/ Facebook Page] for your organization. If you have already done this, skip this step and proceed to Step 2. | ||
− | |||
Note that for your Facebook Page, you will additionally need to create a username for it. The [https://www.facebook.com/help/121237621291199 Page username] is what appears in your Facebook Page’s URL, beneath the Facebook Page’s name on the page itself, and in search results. You will need your Page username later in this configuration procedure. See Facebook’s [https://www.facebook.com/help/121237621291199 Help Center] for more information on how to create one. | Note that for your Facebook Page, you will additionally need to create a username for it. The [https://www.facebook.com/help/121237621291199 Page username] is what appears in your Facebook Page’s URL, beneath the Facebook Page’s name on the page itself, and in search results. You will need your Page username later in this configuration procedure. See Facebook’s [https://www.facebook.com/help/121237621291199 Help Center] for more information on how to create one. | ||
− | === Step 2: Manage your Facebook App === | + | === Step 2: Manage your Facebook App === |
After registering as a developer and creating both your Facebook App and Page, log in to your Facebook app management page at [https://developers.facebook.com/ developers.facebook.com.] On the dashboard, you should see your App ID. | After registering as a developer and creating both your Facebook App and Page, log in to your Facebook app management page at [https://developers.facebook.com/ developers.facebook.com.] On the dashboard, you should see your App ID. | ||
− | === Step 3: Add Messenger as a product === | + | === Step 3: Add Messenger as a product === |
Adding Messenger as a product to your Facebook App allows your Facebook Page to use the Messenger API to handle chat interactions. | Adding Messenger as a product to your Facebook App allows your Facebook Page to use the Messenger API to handle chat interactions. | ||
− | |||
# From the left-hand menu, next to ''Product'', click '''+''' to add a new product.<br /><br /> | # From the left-hand menu, next to ''Product'', click '''+''' to add a new product.<br /><br /> | ||
# Select the product called '''Messenger'''.<br /><br /> | # Select the product called '''Messenger'''.<br /><br /> | ||
Line 33: | Line 28: | ||
− | === Step 4: Update token settings === | + | === Step 4: Update token settings === |
The Messenger Platform’s ''Settings'' displays sections called ''Access Tokens'', ''Webhooks'', and ''Pages'', among others. | The Messenger Platform’s ''Settings'' displays sections called ''Access Tokens'', ''Webhooks'', and ''Pages'', among others. | ||
− | |||
# In the ''Access Tokens'' section, next to the desired Facebook Page, click '''Generate Token'''. This will generate the Page Access Token.<br /><br /> | # In the ''Access Tokens'' section, next to the desired Facebook Page, click '''Generate Token'''. This will generate the Page Access Token.<br /><br /> | ||
# If you did not already create a Facebook Page, click the '''Create New Page''' link.<br /><br /> | # If you did not already create a Facebook Page, click the '''Create New Page''' link.<br /><br /> | ||
Line 43: | Line 37: | ||
− | |||
[[File:FB-Token-Generated-5312.png|800px|thumbnail|center|Token Generation]] | [[File:FB-Token-Generated-5312.png|800px|thumbnail|center|Token Generation]] | ||
− | === Step 5: Create a new integration account in Contact Center Administrator === | + | === Step 5: Create a new integration account in Contact Center Administrator === |
Now, in a new browser tab, configure the integration account that will link Facebook Messenger to Bright Pattern Contact Center. Keep this tab open so it is easy to switch between sites and copy and paste credentials. | Now, in a new browser tab, configure the integration account that will link Facebook Messenger to Bright Pattern Contact Center. Keep this tab open so it is easy to switch between sites and copy and paste credentials. | ||
− | |||
# Log in as Admin to the Contact Center Administrator application.<br /><br /> | # Log in as Admin to the Contact Center Administrator application.<br /><br /> | ||
# Navigate to ''Configuration > Integration Accounts''.<br /><br /> | # Navigate to ''Configuration > Integration Accounts''.<br /><br /> | ||
Line 58: | Line 50: | ||
− | === Step 6: Specify Facebook Messenger integration account properties === | + | === Step 6: Specify Facebook Messenger integration account properties === |
Using the credentials for your Facebook App, enter values for the following screen properties. (If you do not know your credentials, ask your system administrator.) | Using the credentials for your Facebook App, enter values for the following screen properties. (If you do not know your credentials, ask your system administrator.) | ||
− | |||
* '''Page Username''' - The name of your Facebook Messenger integration account (any) | * '''Page Username''' - The name of your Facebook Messenger integration account (any) | ||
− | |||
* '''Type''' - Facebook | * '''Type''' - Facebook | ||
− | |||
* '''Page ID''' - Your Facebook Page ID (string). You can find the Page ID in the "About" section of your page. | * '''Page ID''' - Your Facebook Page ID (string). You can find the Page ID in the "About" section of your page. | ||
− | |||
* '''Token''' - The Page Access Token for your Facebook Page | * '''Token''' - The Page Access Token for your Facebook Page | ||
− | |||
* '''Webhook Verify Token''' - The token used to confirm that Facebook is the real server, which is needed for Facebook to send you a message from the customer; if you do not have a token, click the Generate random token below | * '''Webhook Verify Token''' - The token used to confirm that Facebook is the real server, which is needed for Facebook to send you a message from the customer; if you do not have a token, click the Generate random token below | ||
− | |||
* '''Generate random token''' - Creates a random webhook token that you can copy and paste into your your Facebook App management page in ''Webhooks > Verify Token'' | * '''Generate random token''' - Creates a random webhook token that you can copy and paste into your your Facebook App management page in ''Webhooks > Verify Token'' | ||
− | |||
* '''Test Connection''' - This button tests the credentials and confirms whether the connection is valid. | * '''Test Connection''' - This button tests the credentials and confirms whether the connection is valid. | ||
− | |||
Click '''Apply''' to save your changes. | Click '''Apply''' to save your changes. | ||
− | |||
[[File:FB-Integration-Properties-5312.PNG|650px|thumbnail|center|Facebook Messenger integration account properties]] | [[File:FB-Integration-Properties-5312.PNG|650px|thumbnail|center|Facebook Messenger integration account properties]] | ||
− | === Step 7: Edit your page subscription settings === | + | === Step 7: Edit your page subscription settings === |
Now that your integration account is set up, go back to your Facebook Developers page and continue working on configuration there. | Now that your integration account is set up, go back to your Facebook Developers page and continue working on configuration there. | ||
− | |||
# In the ''Webhooks'' section, click '''Edit Callback URL''' to update the Callback URL and Verify Token fields. <br /><br />[[File:FB-Edit-Callback-URL-5312.PNG|650px|thumbnail|center|Edit Callback URL]]<br /><br /> | # In the ''Webhooks'' section, click '''Edit Callback URL''' to update the Callback URL and Verify Token fields. <br /><br />[[File:FB-Edit-Callback-URL-5312.PNG|650px|thumbnail|center|Edit Callback URL]]<br /><br /> | ||
# Enter a Callback URL for a webhook. The URL should be of the form '''https://<tenant_url>/clientweb/fb/webhook''', where '''<tenant_url>''' should be changed to the domain of your Bright Pattern Contact Center client web server.<ref>Starting with Bright Pattern Contact Center version 5.3, we no longer require the Page ID to be included in the Callback URL. The Page ID is taken from the event body. Therefore, one Facebook app can work with multiple Facebook Pages, and multiple integrations can be added per each such page in Bright Pattern configuration, sharing the same webhook.</ref><br /><br />For example: '''https://example-company.brightpattern.com/clientweb/fb/webhook'''<br /><br /> | # Enter a Callback URL for a webhook. The URL should be of the form '''https://<tenant_url>/clientweb/fb/webhook''', where '''<tenant_url>''' should be changed to the domain of your Bright Pattern Contact Center client web server.<ref>Starting with Bright Pattern Contact Center version 5.3, we no longer require the Page ID to be included in the Callback URL. The Page ID is taken from the event body. Therefore, one Facebook app can work with multiple Facebook Pages, and multiple integrations can be added per each such page in Bright Pattern configuration, sharing the same webhook.</ref><br /><br />For example: '''https://example-company.brightpattern.com/clientweb/fb/webhook'''<br /><br /> | ||
Line 104: | Line 86: | ||
− | |||
See facebook.com for more information about the [https://developers.facebook.com/docs/messenger-platform/ Messenger Platform]. | See facebook.com for more information about the [https://developers.facebook.com/docs/messenger-platform/ Messenger Platform]. | ||
− | === Step 8: Add "Send Message" button to your Facebook Page === | + | === Step 8: Add "Send Message" button to your Facebook Page === |
Now that your integration is set up, you need to add the "Send Message" button to your Facebook Page and point it to the Messenger platform. | Now that your integration is set up, you need to add the "Send Message" button to your Facebook Page and point it to the Messenger platform. | ||
Line 116: | Line 97: | ||
− | |||
<references/> | <references/> | ||
− | |||
− |
Latest revision as of 04:09, 29 May 2024
Facebook Messenger Integration Configuration
When Bright Pattern Contact Center is integrated with Facebook Messenger, your Bright Pattern Agent Desktop environment is equipped to handle customer-initiated interactions from the Messenger application or the Facebook application on a customer’s mobile phone, tablet, or computer. Incoming chat interactions are routed to the integrated Agent Desktop environment, where agents also have direct access to the phone, live chat, email, SMS, various other mobile messenger apps, customer and agent records, interaction details, and more.
Integration configuration involves linking your Facebook Page to your Bright Pattern Contact Center.
To configure Facebook Messenger integration, you will need system access to:
- Your organization’s Facebook App and Facebook Page
- The Contact Center Administrator application as admin
The Facebook App contains the settings for your webhook and access token. Your Facebook Page is what is used as your organization’s identity. Messaging events for your Facebook Page are sent securely to your webhook. Contact Center Administrator is where you add the Messenger integration account to Bright Pattern Contact Center.
Configuration Procedure
Step 1: Create a Facebook App and a Facebook Page
Go to developers.facebook.com, and create a Facebook App and a Facebook Page for your organization. If you have already done this, skip this step and proceed to Step 2.
Note that for your Facebook Page, you will additionally need to create a username for it. The Page username is what appears in your Facebook Page’s URL, beneath the Facebook Page’s name on the page itself, and in search results. You will need your Page username later in this configuration procedure. See Facebook’s Help Center for more information on how to create one.
Step 2: Manage your Facebook App
After registering as a developer and creating both your Facebook App and Page, log in to your Facebook app management page at developers.facebook.com. On the dashboard, you should see your App ID.
Step 3: Add Messenger as a product
Adding Messenger as a product to your Facebook App allows your Facebook Page to use the Messenger API to handle chat interactions.
- From the left-hand menu, next to Product, click + to add a new product.
- Select the product called Messenger.
- Once it has been added, you will see Messenger on the left-hand menu.
- Under Messenger, click Settings.
Step 4: Update token settings
The Messenger Platform’s Settings displays sections called Access Tokens, Webhooks, and Pages, among others.
- In the Access Tokens section, next to the desired Facebook Page, click Generate Token. This will generate the Page Access Token.
- If you did not already create a Facebook Page, click the Create New Page link.
- Note that you must also set permissions for which pages the admin user can access.
- In the Token Generated dialog, click I Understand and then copy the token. You will need this when configuring your integration account in later steps.
Step 5: Create a new integration account in Contact Center Administrator
Now, in a new browser tab, configure the integration account that will link Facebook Messenger to Bright Pattern Contact Center. Keep this tab open so it is easy to switch between sites and copy and paste credentials.
- Log in as Admin to the Contact Center Administrator application.
- Navigate to Configuration > Integration Accounts.
- Click the Add "+" button to add a new account.
- In the Create integration account window that appears, select Messenger and click OK.
- In Type, select Facebook.
Step 6: Specify Facebook Messenger integration account properties
Using the credentials for your Facebook App, enter values for the following screen properties. (If you do not know your credentials, ask your system administrator.)
- Page Username - The name of your Facebook Messenger integration account (any)
- Type - Facebook
- Page ID - Your Facebook Page ID (string). You can find the Page ID in the "About" section of your page.
- Token - The Page Access Token for your Facebook Page
- Webhook Verify Token - The token used to confirm that Facebook is the real server, which is needed for Facebook to send you a message from the customer; if you do not have a token, click the Generate random token below
- Generate random token - Creates a random webhook token that you can copy and paste into your your Facebook App management page in Webhooks > Verify Token
- Test Connection - This button tests the credentials and confirms whether the connection is valid.
Click Apply to save your changes.
Step 7: Edit your page subscription settings
Now that your integration account is set up, go back to your Facebook Developers page and continue working on configuration there.
- In the Webhooks section, click Edit Callback URL to update the Callback URL and Verify Token fields.
- Enter a Callback URL for a webhook. The URL should be of the form https://<tenant_url>/clientweb/fb/webhook, where <tenant_url> should be changed to the domain of your Bright Pattern Contact Center client web server.[1]
For example: https://example-company.brightpattern.com/clientweb/fb/webhook - In Verify Token, set the Webhook Verify Token you generated in your integration account properties in Step 6 of this procedure.
- Then click Verify and Save. This allows Facebook to send an HTTP request to the callback URL to verify that it is legitimate.
- Edit webhooks options by clicking Edit.
- In Edit Page Subscriptions, select subscription fields to subscribe to webhook events. The following are the minimum set of subscription fields needed: messages, message_deliveries, and message_reads.
- When done, click Save.
See facebook.com for more information about the Messenger Platform.
Step 8: Add "Send Message" button to your Facebook Page
Now that your integration is set up, you need to add the "Send Message" button to your Facebook Page and point it to the Messenger platform.
- ↑ Starting with Bright Pattern Contact Center version 5.3, we no longer require the Page ID to be included in the Callback URL. The Page ID is taken from the event body. Therefore, one Facebook app can work with multiple Facebook Pages, and multiple integrations can be added per each such page in Bright Pattern configuration, sharing the same webhook.