Fix picture_url and user tags for Messenger

[dmk23]

Make sure these checkboxes are checked before raising an issue, thank you!

• [x] Check that you are using node version >= 8.9
• [x] Search the documentation
• [x] Search the help portal

Please also fill in these fields:

---

Botpress version: 10.3.2

Channels: Messenger,Web

Right now BP stores incorrectly formatted picture_url into DB

This results in the Audience tab not showing pictures correctly

I tracked down the issue, to problem with just one symbol, need to substitute $1 for ?

Wrong URL (as is now): https://platform-lookaside.fbsbx.com/platform/profilepic/$1psid=1708032305962195&width=1024&ext=1537859463&hash=AeT7iJAa5vXMNjRY

URL as it should be: https://platform-lookaside.fbsbx.com/platform/profilepic/?psid=1708032305962195&width=1024&ext=1537859463&hash=AeT7iJAa5vXMNjRY

[dmytropanontko]

Hi @dmk23 . Can you tell me how did you add new user with image to webchat because I haven't possibility to test in FB. Thanks)

[dmk23]

@dmytropanontko I added the user by interacting with the bot in Facebook

User already authorized the bot, I just sent an extra message

Why aren't you able to test in FB?

[dmytropanontko]

@dmk23 Thanks. When you create you FB app?

[dmk23]

@dmytropanontko Recently, around July or so. Why is that a factor?

[dmytropanontko]

@dmk23 it's factor for other issue. Do you send your app to FB review?

[dmk23]

@dmytropanontko Yes, it was reviewed and approved on 07/26

In any case, I had this problem with another app as well. This looks like some text handling issue within BP, and in any case the fix would be a global substitution of $1 for ? in the profile_url field

[dmytropanontko]

@dmk23 I think you are right, but I need wait until my app is unreviewed. Thanks a lot)

[dmk23]

@dmytropanontko I believe you can use API while app is still in review

At least with designated test users or app admins. All configurable under app settings

[jainsourabh2]

I am not getting images displayed within facebook messenger window when displaying card or carousel. Is it similar issue?

[dmytropanontko]

Hi @jainsourabh2 , which image url you have when tried use card or carousel ?

[jainsourabh2]

I have used image from my local machine as required by the carousel. Please see snapshot below:

[dmk23]

I am seeing the same issue with images in cards failing to show

Will be debugging this today and hopefully committing a fix

[dmk23]

OK, I found the problem & temp fix for the images not showing up in cards

By default botUrl is set to http://localhost:${port} in the botfile. This means the messages are served to Facebook with localhost image URLs, which obviously fails

The workaround is to set BOTPRESS_URL to the same domain (prefixed by https://) as specified in hostname in channel-messenger.json

Long term however, BOTPRESS_URL and hostname should be configured in one place

[jainsourabh2]

@dmk23 I made below change in botfile.js

const port = process.env.BOTPRESS_PORT || process.env.PORT || 3000 const botUrl = process.env.BOTPRESS_URL || https://82222394.ngrok.io:${port}

However still I am not getting images in the facebook card and carousel.

[dmk23]

Don't change the Botfile, put this line in your environment script:

export BOTPRESS_URL = https://82222394.ngrok.io

[dmk23]

Regarding the original issue, I just noticed that initially the picture_url is stored correctly in the database (with ? instead of $1). It only get corrupted when the Audience UI tab is loaded, so the bugs have to be somewhere in the audience module code, not in the Messenger channel

Additionally, looks like user tags do not get displayed, even when they exist for the user

I haven't had chance to look at the Audience code in depth

@dmytropanontko

[jainsourabh2]

@dmk23 I tried exporting it but still the images are not appearing for both cards and carousels.

It appears correctly in the botpress emulator and URLs also are formed correctly but images are not seen on facebook messenger.

[dmk23]

@jainsourabh2 I found that even if you pass a valid URL to Facebook, if the image is slow to load, Facebook would NOT include it into the card

You can test your setup by hacking the code to log all the image URLs passed to Facebook to confirm that they actually exist. After that - you could work on reducing their loading times in your setup...

Maybe ngrok is just too slow/unreliable... I have been using serveo instead...

[jainsourabh2]

@dmk23 Bulls Eye!!

I changed it to serveo instead of ngrok and the images are appearing now. I will put this point into my architectural considerations. Thanks a ton for your help!!