Change page_id for Facebook customer chat plugin in runtime

Question

In our webapp, we have the Facebook Customer chat plugin and it works fine.

But we have a requirement to be able to change the page_id it points to (so users chat with different pages associated with our application). So what I tried, was to not include the div in the index.html

<div class="fb-customerchat" page_id="MY PAGE ID"></div>

but instead, adding it dynamically in code (we use Angular 1.5):

    let fbChatDiv = document.createElement('div');
    fbChatDiv.className = 'fb-customerchat';
    fbChatDiv.setAttribute('page_id', page_id);
    fbChatDiv.setAttribute('ref', '');

    document.body.appendChild(fbChatDiv);

this approach actually works ... kind of. When I test locally, it works half the time. When I try it in the server, it doesn't work.

The chat bubble shows up, but nothings happens with you click on it.

I noticed that, when it works, if you go and inspect the html, the div disappears as if it gets "consumed" (I assume that by the FB javascript sdk), and when it doesn't, the div remains in the html elements. So I guess there is some processing during page load that takes the div and replaces it with the iframe stuff from facebook, and that for some reason, it doesn't happen at the right time (randomly in my local machine, never in the server).

So I was wondering if someone else ever had this use case and how it was solved, or at least get some insight on how the facebook SDK takes the div and injects the iframe content.