Position issues when using multiple messenger boxes

[mysteryos]

Imagine the following scenario.

A messenger box is opened on the bottom right, using the code below, and stays permanently:

Messenger({extraClasses: 'messenger-fixed messenger-on-bottom messenger-on-right'}).post({
            message: 'My messenger box on the bottom right',
            hideAfter: 0,
            showCloseButton: false,
            type: 'info',
            id: 'btmrightmsg'
        });

Then, you tried to open another messenger box on the top, in the same page, as follows:

Messenger({extraClasses:'messenger-on-top messenger-fixed'}).post({
                          message: 'My messenger box on the top,
                          type: 'info',
                          id: 'notif-top',
                          hideAfter: 3
                        });

The moment the messenger box on top is shown, the messenger box on the bottom right will move to top, right below it..

Any way to fix this behaviour? So that the boxes stay where they were initially?

[geekjuice]

Currently, there is no way to have multiple positions for separate Messenger dialogs and this is by design. The extraClasses are not actually applied to individual dialogs, but the container that holds queue of dialogs. And because only one instance of the container ever exists when you invoke Messenger the classes get just override the current options.

If this is something that you would still like the leverage Messenger for, we definitely welcome and encourage pull requests in our projects. However, I can't imagine this is something we will change as it's not a very common use case for Messenger.