How do I add a chat box in Facebook?

The trick to getting your chat box into Facebook is to create a Page Tab.  You'll need to have a page created for your organization (not a personal Facebook page).  Don't already have one?  Here's where you can make one.

As an example, here's the Facebook page for LibraryH3lp.  You can see our chat box by clicking "Support Chat" in the left sidebar.

Limitations

1. Only Pages with 2000 or more likes can create custom Page tabs.

2. The amount of space available to your tab app is bounded by the outer context of Facebook. It may be configured to display with a width of 520 pixels (default) or 810 pixels.

Create a Page Tab

1. Go to the App Dashboard in Facebook
    
2. Click "Create App" and select "Business" as the app type.
    
3. Provide your desired Display Name and your Contact Email address. No business account is needed. Then click "Create app"
    
4. Select Settings > Basic in the left sidebar.
    
5. At the top of the basic settings page, make sure the following fields are filled out: "display name", "contact email", and "privacy policy URL". These will be institution-specific, not LibraryH3lp-specific.
    
   • Under App Domains, add ONLY ONE of the following:
     • libraryh3lp.com (if you use the main, US server)
     • ca.libraryh3lp.com
     • eu.libraryh3lp.com
     • sg.libraryh3lp.com
        
6. Now scroll down the bottom of the basic settings page and click on the Add Platform button and choose Page Tab from the dialog.
    
   • The Secure Page Tab URL is the URL for your chat box and is based upon which LibraryH3lp server you use:
     
     Main, US server: https://libraryh3lp.com/fb/chat/QUEUE-NAME@chat.libraryh3lp.com?skin=SKIN-ID
     Canada: https://ca.libraryh3lp.com/fb/chat/QUEUE-NAME@chat.ca.libraryh3lp.com?skin=SKIN-ID
     Europe: https://eu.libraryh3lp.com/fb/chat/QUEUE-NAME@chat.eu.libraryh3lp.com?skin=SKIN-ID
     Singapore: https://sg.libraryh3lp.com/chat/fb/QUEUE-NAME@chat.sg.libraryh3lp.com?skin=SKIN-ID
     
     Where QUEUE-NAME and SKIN-ID are your queue name and chat box skin (widget) ID. 
     
     It is OK to omit the "?skin=SKIN-ID" portion of the URL above, but you must supply a queue name.
      
   • Page Tab Name can be anything you wish. It is the label your guest will click on to reach your chat box.
      
   • Page Tab Image can be anything you wish, whatever sort of avatar you think makes sense for chat. It must be 111 x 74 pixels and less than 1MB in size.
      
7. Save your changes and set the status to live (instead of development mode).

As an EXAMPLE ONLY, here's what our App settings and Page Tab settings look like for the LibraryH3lp support queue:

Add your Page Tab to your Organization's Page

In your browser and in a new tab or window, go to the following URL based upon the LibraryH3lp server you use:

• Main, US server: https://www.facebook.com/dialog/pagetab?app_id=APP-ID&next=https%3A%2F%2Flibraryh3lp.com
• Canada: https://www.facebook.com/dialog/pagetab?app_id=APP-ID&next=https%3A%2F%2Fca.libraryh3lp.com
• Europe: https://www.facebook.com/dialog/pagetab?app_id=APP-ID&next=https%3A%2F%2Feu.libraryh3lp.com
• Singapore: https://www.facebook.com/dialog/pagetab?app_id=APP-ID&next=https%3A%2F%2Fsg.libraryh3lp.com

where APP-ID is the App ID you received when you created your Page Tab above.

If successful, Facebook will ask to which page you'd like to add your Page Tab.  At this time, you can select your organization's page which you manage.

FAQ URL: