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
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).