converse.js/src/plugins/rootview/view.js

import { api, converse } from '@converse/headless/converse-core';

const u = converse.env.utils;

converse.plugins.add('converse-rootview', {
    initialize () {
        api.settings.extend({
            'auto_insert': true
        });

        function ensureElement () {
            if (!api.settings.get('auto_insert')) {
                return;
            }
            const root = api.settings.get('root');
            if (!root.querySelector('converse-root#conversejs')) {
                const el = document.createElement('converse-root');
                el.setAttribute('id', 'conversejs');
                u.addClass(`theme-${api.settings.get('theme')}`, el);
                const body = root.querySelector('body');
                if (body) {
                    body.appendChild(el);
                } else {
                    root.appendChild(el); // Perhaps inside a web component?
                }
            }
        }

        api.listen.on('chatBoxesInitialized', ensureElement);
    }
});