Requirement:
- A Google Tag Manager account connected with your website. If you don’t have one yet you can follow our guide to create an account and add GTM into your Magento 2 website.
- A Facebook Business Page (not personal Facebook page)
Configuration Guide
1. Import Messenger widget into GTM:
Inside your GTM dashboard, go to Admin > Import Container.
- Select file to import: select the file messenger.json you’ve just downloaded
- Choose workspace: Existing > Default Workspace. (only choose New if you know what you’re doing)
- Choose an import option: Merge > Overwrite conflicting tags, triggers and variables.
Then click Confirm
2. Configure the widget:
Go to Variables tab. This is where you’ll configure the necessary information for the Messenger Widget. The variables whose name starting with “INPUT” are the ones you can edit, where “NO EDIT” are the ones you must not touch.
To edit a variable, simply click on its name, edit the Value field, and then click Save.
- INPUT - Facebook Page ID (Required): enter your Facebook Page ID. (To find your Page ID go to About section in the left column of your Facebook Page and scroll down to More Info) This is the only required variable. You can already go to the next step to implement your Messenger Widget. Otherwise you can configure other variables below to customize your widget.
- INPUT - Messenger Chat Widget - Theme Color (Optional): The color to use as a theme for the widget, including the background color of the widget icon and the background color of any messages sent by users. Supports any hexadecimal color code with a leading number sign (e.g. #0084FF), except white. We highly recommend you choose a color that has a high contrast to white. (Default value: #0084ff)
- INPUT - Messenger Chat Widget - Logged In Greeting (Optional): The greeting text that will be displayed if the user is currently logged in to Facebook. Maximum 80 characters. Enter “no” if you don’t want to display this greeting message. (Default value: no)
- INPUT - Messenger Chat Widget - Logged Out Greeting (Optional): The greeting text that will be displayed if the user is currently not logged in to Facebook. Maximum 80 characters. Enter “no” if you don’t want to display this greeting message. (Default value: no)
- INPUT - Messenger Chat Widget - Greeting Dialog Display Mode (Optional): Sets how the greeting dialog will be displayed. The following values are supported (Default value: show):
+ show: The greeting dialog is shown and remains open on desktop and mobile after the number of seconds set by the "INPUT - Messenger Chat Widget - Greeting Dialog Delay (seconds) (Optional)" variable.
+ hide: The greeting dialog is hidden until a user clicks on the widget on desktop and mobile.
+ fade: The greeting dialog is shown briefly after the number of seconds set by the "INPUT - Messenger Chat Widget - Greeting Dialog Delay (seconds) (Optional)" variable, then fades away and is hidden on desktop.
- INPUT - Messenger Chat Widget - Greeting Dialog Delay (seconds) (Optional): Sets the number of seconds of delay before the greeting dialog is shown after the widget is loaded.
3. Enable your domain to display the Messenger Widget:
On your Facebook Page, go to Settings > Messaging.
At “Add Messenger to your website”, click Get Started.
From here you can choose to enable Guest Mode to let people chat with your business without logging in to Messenger. You can ignore other settings since we will not be using those but the GTM variables above.
Click Next until you reach Step 3.
Under ADD WEBSITE DOMAIN NAME, enter your Magento domain name(s) to allow Messenger Widget to display on this domain. Then click Save.
Finally, click Finish.
4. Preview your Messenger Widget:
*Important: make sure you disabled AdBlock on your browser.
In your GTM dashboard, click Preview.
A new tab will open. Enter your website URL into the popup and then click Start.
The URL you entered will be opened in a new window. In the current window, if you see the message “Connected!” as in the below screenshot, then your GTM implementation is working.
5. Apply the Messenger Widget to live site:
In your GTM dashboard, click Submit.
You can enter a Version Name & Version Description for this submit version (optional). Then click Publish.
Click Continue.
Done!
Share it on Google +