Converse.js render into a container - 2021

Question

First of all, sorry for my English.

I want to customize conversejs, so conversejs render its chatbox to another element.

I know similar questions were answered by jcbrand, make conversejs. Converse.js render into a container

But the question is too long ago. And the answer doesn't solve the problem. Because the code has been updated

please re-answer this question

Answer 1

Take a look at https://conversejs.org/trunk/demo/embedded.html for a demo of the chat being inserted into the DOM manually.

The code is here: https://github.com/conversejs/converse.js/blob/5dd00659368991b37446208b39e89a65fa8a48fd/demo/embedded.html#L75

You can put Converse inside any DOM element by putting a converse-root element inside it.

For example, let's assume you want to put Converse inside a DOM element with id my-element, then you'd do this:

<div id="my-element"><converse-root></converse-root></div>.

Unfortunately there is a bug in Converse 8.0.1 that causes this to not work properly. It's fixed here: https://github.com/conversejs/converse.js/commit/84c6a0039c78b6e1f1e6054ec9ee42586c45f600

I will be making a version 9 release soon which contains the fix.

For now, you can build Converse yourself (just run make dist inside a checkout of the repo, and then you have the necessary files in the ./dist folder).