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