Chatbot Design Specs for Facebook Messenger

Facebook published a Messenger platform design kit, but given I am always getting questions from designers, I think we could all use a simpler reference guide.

Do keep in mind that Messenger is prone to bugs, particularly in the mobile experience.

We have noticed that some images get distorted in Messenger iOS on mobile but not on Android phones or on the desktop experience. When developing your chatbot, be sure to test your images across multiple platforms (mobile, desktop, iOS, Android, other…) so you can be sure all your visuals are rendering correctly in the multi-channel world!

Profile Photos: 80px X 80px

Background Images: 375px X 286px

All sizes are consistent across iOS and Android devices except where noted.

Most in-message graphics/images are 266px x 139px. That’s specifically for messages with a small hero image and supporting up to 3 button options.

When there’s an option that’s selected and it leads to an extension/secondary window (Ex. ordering food) the image is 375px x 169px.

For tertiary images: 76px x 76px and sometimes 70px x 70px.

Lastly, Bot Welcome Menus:

Main Menu images are 375px x 282px and Sub-Menu Images are 375px x 197px for iOS.

Main Menu images are 360px x 303px and Sub-Menu Images are 360px x 208px for Android.

OK, but what about video?

Yes, video is also a super important content element in your Messenger experience. When preparing video files for consumption on Messenger, we recommend a few “rules of thumb” to making sure the experience is optimized for mobile. Here are a few to consider.

H.264 video with AAC audio in MOV or MP4 format
An aspect ratio no larger than 1280px wide and divisible by 16px
A frame rate at, or below, 30fps
Stereo audio with a sample rate of 44,100hz

There you have it!

We will do our best to keep this post updated regularly anytime we notice specification changes that are reported through the Facebook Messenger developer community.