Search code examples
facebook-messenger

Styling Facebook Messenger Platform


I have integrated Messenger Platform on the website. Thought the chat box does not contrast enough with the website and feels it is sometimes invisible.

So I inverted the chat bubble, so now it has a blue outline and white logo. And would like to have a blue border on the squared pop-up (around the chat field itself).

Anyone knows how to style it?

I tried searching for guidelines on Facebook developers, but came up empty. And tried inspecting the chat box on the browser, but it showed me no styling.


Solution

  • If I understand it correctly, you speak about Customer Chat Plugin.

    In the provided link above, you will find how and where to style the plugin. Right now, you can only change the theme color. The plugin itself uses border shadow so it should be visible on white pages as well. This might not work for some old browsers though.

    The plugin itself is served using iframe so you cannot style it with css as it is basically a different web page.