config.json

{
  "plugin_type": "widget",
  "name": "Facebook Messenger Widget",
  "edit_page_url": "https://www.atticandbutton.com",
  "form_schema": [
    {
      "default_value": "<<YOUR FACEBOOK APP ID>>",
      "field_type": "text",
      "name": "appId",
      "label": "Facebook App ID",
      "options": null
    },
    {
      "default_value": "<<YOUR FACEBOOK PAGE ID>>",
      "field_type": "text",
      "name": "pageId",
      "label": "Facebook Page ID",
      "options": null
    },
    {
      "default_value": "#1eb2fc",
      "field_type": "color",
      "name": "theme",
      "label": "Theme Color",
      "options": {
        "mode": "hex"
      }
    },
    {
      "default_value": "Need some help? We're here to chat!",
      "field_type": "text",
      "name": "greeting",
      "label": "Greeting Message",
      "options": null
    },
    {
      "default_value": "Need some help? Login to Facebook to chat",
      "field_type": "text",
      "name": "loggedOut",
      "label": "Logged Out Message",
      "options": null
    },
    {
      "default_value": "true",
      "field_type": "toggle",
      "name": "minimized",
      "label": "Minimized",
      "options": {
        "choices": [
          {
            "value": "true",
            "label": "True"
          },
          {
            "value": "false",
            "label": "False"
          }
        ]
      }
    }
  ],
  "description": "Applies a Facebook Messenger Chat widget to any webpage.",
  "options": {
    "html": "<div class=\"fb-customerchat\" page_id=\"{{extension.pageId}}\" ref=\"opened_widget\" theme_color=\"{{extension.theme}}\" logged_in_greeting=\"{{extension.greeting}}\" logged_out_greeting=\"{{extension.loggedOut}}\" minimized = \"{{extension.minimized}}\">\n</div>",
    "css": "",
    "apply_js": "// For full developer documentation see: \n// https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin\n\nvar utils = optimizely.get('utils');\n\n// Function to initialize Facebook JS SDK\nwindow.fbAsyncInit = function() {\n  FB.init({\t\n    appId            : extension.appId,\n    autoLogAppEvents : true,\n    xfbml            : true,\n    version          : 'v2.12'\n  });\n};\n\n// Async function to load Facebook SDK\n(function(d, s, id){\n   var js, fjs = d.getElementsByTagName(s)[0];\n   if (d.getElementById(id)) {return;}\n   js = d.createElement(s); js.id = id;\n   js.src = \"https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js\";\n   fjs.parentNode.insertBefore(js, fjs);\n }(document, 'script', 'facebook-jssdk'));\n\n// Optimizely utility function to wait for the Body to appear in the DOM before appending FB Messeenger Widget\n// https://developers.optimizely.com/x/solutions/javascript/reference/#function_waitforelement\nutils.waitForElement('body').then(function(el){\t\n\tel.insertAdjacentHTML('afterbegin', extension.$html);\n});\n",
    "undo_js": "var extensionHtml = document.getElementById('.fb-customerchat');\nif (extensionHtml) extensionHtml.remove();\n"
  }
}