Merge remote-tracking branch 'origin/master'

4c8ec6aa · Weblate · e361081d · 08a76d8a · 4c8ec6aa · 4c8ec6aa
Commit 4c8ec6aa authored Feb 14, 2018 by Weblate
34 changed files
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -13,12 +13,18 @@ though they should be private._
 ### New features
 - XEP-0382 Spoiler Messages (currently only for private chats)
 - Listen for new room bookmarks pushed from the user's PEP service.
+- Simplified the [embedded](https://conversejs.org/demo/embedded.html) usecase.
+    - No need to manually blacklist or whitelist any plugins.
+    - Relies on the [view_mode](https://conversejs.org/docs/html/configurations.html#view-mode) being set to `'embedded'`.
 ### API changes
 - New API method `_converse.disco.getIdentity` to check whether a JID has a given identity.
-### New configuration settings
+### Configuration settings
+- `auto_reconnect` is now set to `true` by default.
 - New configuration setting [allow_public_bookmarks](https://conversejs.org/docs/html/configurations.html#allow-public-bookmarks)
+- New configuration setting [root](https://conversejs.org/docs/html/configurations.html#root)
+- The [view_mode](https://conversejs.org/docs/html/configurations.html#view-mode) setting now has a new possible value: `embedded`
 ## 3.3.2 (2018-01-29)

--- a/Makefile
+++ b/Makefile
@@ -100,6 +100,7 @@ release:
 	$(SED) -ri s/version\ =\ \'[0-9]\+\.[0-9]\+\.[0-9]\+\'/version\ =\ \'$(VERSION)\'/ docs/source/conf.py
 	$(SED) -ri s/release\ =\ \'[0-9]\+\.[0-9]\+\.[0-9]\+\'/release\ =\ \'$(VERSION)\'/ docs/source/conf.py
 	$(SED) -ri "s/(Unreleased)/`date +%Y-%m-%d`/" CHANGES.md
+	$(SED) -ri "s/cdn.conversejs.org\/[0-9]+\.[0-9]+\.[0-9]+/cdn.conversejs.org\/$(VERSION)/" docs/source/quickstart.rst
 	make pot
 	make po
 	make po2json
@@ -130,7 +131,7 @@ dev: stamp-bundler stamp-npm
 ## Builds
 .PHONY: css
-css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css
+css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css css/fonts.css
 css/inverse.css:: dev sass sass/*
 	$(SASS) -I $(BOURBON_TEMPLATES) sass/inverse/inverse.scss css/inverse.css
@@ -156,6 +157,9 @@ css/theme.min.css:: stamp-npm css/theme.css
 css/mobile.min.css:: stamp-npm sass/*
 	$(CLEANCSS) css/mobile.css > css/mobile.min.css
+css/fonts.css:: dev sass/*
+	$(SASS) -I $(BOURBON_TEMPLATES) sass/only-fonts.scss css/fonts.css
 .PHONY: watch
 watch: dev
 	$(SASS) --watch -I ./node_modules/bourbon/app/assets/stylesheets/ sass/converse/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css sass/inverse/inverse.scss:css/inverse.css

--- a/css/converse-muc-embedded.css
+++ b/css/converse-muc-embedded.css
@@ -3,7 +3,7 @@
    https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
    http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
 */
-#converse-embedded-chat {
+#conversejs.converse-embedded {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
@@ -11,56 +11,56 @@
  right: auto;
  position: relative;
  width: 100%; }
-  #converse-embedded-chat *, #converse-embedded-chat *:before, #converse-embedded-chat *:after {
+  #conversejs.converse-embedded *, #conversejs.converse-embedded *:before, #conversejs.converse-embedded *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
-  #converse-embedded-chat form.pure-form.converse-centered-form {
+  #conversejs.converse-embedded form.pure-form.converse-centered-form {
    position: absolute;
    top: 30%;
    transform: translateY(-50%); }
-  #converse-embedded-chat .chatroom {
+  #conversejs.converse-embedded .chatroom {
    width: auto; }
-  #converse-embedded-chat .flyout {
+  #conversejs.converse-embedded .flyout {
    bottom: auto;
    display: block;
    position: relative; }
-  #converse-embedded-chat .chatbox {
+  #conversejs.converse-embedded .chatbox {
    float: none; }
-    #converse-embedded-chat .chatbox .box-flyout {
+    #conversejs.converse-embedded .chatbox .box-flyout {
      box-shadow: none; }
-    #converse-embedded-chat .chatbox .chat-title {
+    #conversejs.converse-embedded .chatbox .chat-title {
      padding: 0.3em;
      font-size: 120%; }
-  #converse-embedded-chat .chatbox-btn {
+  #conversejs.converse-embedded .chatbox-btn {
    display: none; }
-  #converse-embedded-chat .chatroom .box-flyout {
+  #conversejs.converse-embedded .chatroom .box-flyout {
    min-width: auto;
    width: 100%;
    height: 55vh; }
-    #converse-embedded-chat .chatroom .box-flyout .chat-body {
+    #conversejs.converse-embedded .chatroom .box-flyout .chat-body {
      height: -webkit-calc(100% - 55px);
      height: calc(100% - 55px); }
-    #converse-embedded-chat .chatroom .box-flyout .occupants-heading {
+    #conversejs.converse-embedded .chatroom .box-flyout .occupants-heading {
      font-size: 120%; }
-    #converse-embedded-chat .chatroom .box-flyout .chat-content {
+    #conversejs.converse-embedded .chatroom .box-flyout .chat-content {
      height: calc(100% - 97px); }
-      #converse-embedded-chat .chatroom .box-flyout .chat-content .chat-message {
+      #conversejs.converse-embedded .chatroom .box-flyout .chat-content .chat-message {
        margin: 0.5em;
        font-size: 120%; }
-    #converse-embedded-chat .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
+    #conversejs.converse-embedded .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
      padding: 0.5em;
      font-size: 110%; }
-    #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container {
+    #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container {
      font-size: 180%;
      float: left;
      height: 100%;
      position: relative; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input {
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input {
        font-size: 60%; }
-    #converse-embedded-chat .chatroom .box-flyout .occupants .occupant-list {
+    #conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list {
      padding-left: 0.3em; }
-      #converse-embedded-chat .chatroom .box-flyout .occupants .occupant-list li.occupant {
+      #conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list li.occupant {
        font-size: 120%; }
 /*# sourceMappingURL=converse-muc-embedded.css.map */
--- a/css/fonts.css
+++ b/css/fonts.css
+/*
+    Color scheme helpers:
+    https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
+    http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
+ */
+@font-face {
+  font-family: 'Converse-js';
+  src: url("../fonticons/fonts/icomoon.eot?wvi0ht");
+  src: url("../fonticons/fonts/icomoon.eot?wvi0ht#iefix") format("embedded-opentype"), url("../fonticons/fonts/icomoon.ttf?wvi0ht") format("truetype"), url("../fonticons/fonts/icomoon.woff?wvi0ht") format("woff"), url("../fonticons/fonts/icomoon.svg?wvi0ht#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+.icon-conversejs {
+  padding-right: 0.2em;
+  font-family: 'Converse-js';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+.icon-conversejs:before {
+  content: "\e600"; }
+#converse-embedded-chat .icon-address-book:before,
+#conversejs .icon-address-book:before {
+  content: "\270f"; }
+#converse-embedded-chat .icon-attachment:before,
+#conversejs .icon-attachment:before {
+  content: "\e032"; }
+#converse-embedded-chat .icon-away:before,
+#conversejs .icon-away:before {
+  content: "\25fb"; }
+#converse-embedded-chat .icon-blocked:before,
+#conversejs .icon-blocked:before {
+  content: "\2718"; }
+#converse-embedded-chat .icon-bold:before,
+#conversejs .icon-bold:before {
+  content: "\e04d"; }
+#converse-embedded-chat .icon-bubbles2:before,
+#conversejs .icon-bubbles2:before {
+  content: "\e016"; }
+#converse-embedded-chat .icon-bubbles3:before,
+#conversejs .icon-bubbles3:before {
+  content: "\e017"; }
+#converse-embedded-chat .icon-bubbles:before,
+#conversejs .icon-bubbles:before {
+  content: "\e015"; }
+#converse-embedded-chat .icon-busy:before,
+#conversejs .icon-busy:before {
+  content: "\e004"; }
+#converse-embedded-chat .icon-dnd:before,
+#conversejs .icon-dnd:before {
+  content: "\e004"; }
+#converse-embedded-chat .icon-cancel-circle:before,
+#conversejs .icon-cancel-circle:before {
+  content: "\e058"; }
+#converse-embedded-chat .icon-checkmark:before,
+#conversejs .icon-checkmark:before {
+  content: "\2713"; }
+#converse-embedded-chat .icon-close:before,
+#conversejs .icon-close:before {
+  content: "\2715"; }
+#converse-embedded-chat .icon-closed:before,
+#conversejs .icon-closed:before {
+  content: "\25ba"; }
+#converse-embedded-chat .icon-cog:before,
+#conversejs .icon-cog:before {
+  content: "\e02f"; }
+#converse-embedded-chat .icon-cogs:before,
+#conversejs .icon-cogs:before {
+  content: "\e022"; }
+#converse-embedded-chat .icon-conversejs:before,
+#conversejs .icon-conversejs:before {
+  content: "\e600"; }
+#converse-embedded-chat .icon-database:before,
+#conversejs .icon-database:before {
+  content: "\f1c0"; }
+#converse-embedded-chat .icon-envelope:before,
+#conversejs .icon-envelope:before {
+  content: "\f003"; }
+#converse-embedded-chat .icon-exit:before,
+#conversejs .icon-exit:before {
+  content: "\e601"; }
+#converse-embedded-chat .icon-eye-blocked:before,
+#conversejs .icon-eye-blocked:before {
+  content: "\e031"; }
+#converse-embedded-chat .icon-eye:before,
+#conversejs .icon-eye:before {
+  content: "\e030"; }
+#converse-embedded-chat .icon-github:before,
+#conversejs .icon-github:before {
+  content: "\eab0"; }
+#converse-embedded-chat .icon-globe:before,
+#conversejs .icon-globe:before {
+  content: "\f0ac"; }
+#converse-embedded-chat .icon-google2:before,
+#conversejs .icon-google2:before {
+  content: "\ea89"; }
+#converse-embedded-chat .icon-group:before,
+#conversejs .icon-group:before {
+  content: "\f0c0"; }
+#converse-embedded-chat .icon-happy:before,
+#conversejs .icon-happy:before {
+  content: "\263b"; }
+#converse-embedded-chat .icon-heart2:before,
+#conversejs .icon-heart2:before {
+  content: "\f004"; }
+#converse-embedded-chat .icon-heart:before,
+#conversejs .icon-heart:before {
+  content: "\2764"; }
+#converse-embedded-chat .icon-heart_empty:before,
+#conversejs .icon-heart_empty:before {
+  content: "\f08a"; }
+#converse-embedded-chat .icon-hide-users:before,
+#conversejs .icon-hide-users:before {
+  content: "\e01c"; }
+#converse-embedded-chat .icon-home:before,
+#conversejs .icon-home:before {
+  content: "\e000"; }
+#converse-embedded-chat .icon-idcard-dark:before,
+#conversejs .icon-idcard-dark:before {
+  content: "\f2c2"; }
+#converse-embedded-chat .icon-idcard:before,
+#conversejs .icon-idcard:before {
+  content: "\f2c3"; }
+#converse-embedded-chat .icon-image:before,
+#conversejs .icon-image:before {
+  content: "\2b14"; }
+#converse-embedded-chat .icon-info:before,
+#conversejs .icon-info:before {
+  content: "\2360"; }
+#converse-embedded-chat .icon-italic:before,
+#conversejs .icon-italic:before {
+  content: "\e04f"; }
+#converse-embedded-chat .icon-key:before,
+#conversejs .icon-key:before {
+  content: "\e028"; }
+#converse-embedded-chat .icon-legal:before,
+#conversejs .icon-legal:before {
+  content: "\f0e3"; }
+#converse-embedded-chat .icon-lock-2:before,
+#conversejs .icon-lock-2:before {
+  content: "\e027"; }
+#converse-embedded-chat .icon-minus:before,
+#conversejs .icon-minus:before {
+  content: "\e05a"; }
+#converse-embedded-chat .icon-music:before,
+#conversejs .icon-music:before {
+  content: "\266b"; }
+#converse-embedded-chat .icon-newtab:before,
+#conversejs .icon-newtab:before {
+  content: "\e053"; }
+#converse-embedded-chat .icon-notebook:before,
+#conversejs .icon-notebook:before {
+  content: "\2710"; }
+#converse-embedded-chat .icon-notification:before,
+#conversejs .icon-notification:before {
+  content: "\e01f"; }
+#converse-embedded-chat .icon-offline:before,
+#conversejs .icon-offline:before {
+  content: "\e002"; }
+#converse-embedded-chat .icon-logout:before,
+#conversejs .icon-logout:before {
+  content: "\e002"; }
+#converse-embedded-chat .icon-online:before,
+#conversejs .icon-online:before {
+  content: "\25fc"; }
+#converse-embedded-chat .icon-opened:before,
+#conversejs .icon-opened:before {
+  content: "\25bc"; }
+#converse-embedded-chat .icon-pencil:before,
+#conversejs .icon-pencil:before {
+  content: "\270e"; }
+#converse-embedded-chat .icon-phone-hang-up:before,
+#conversejs .icon-phone-hang-up:before {
+  content: "\260e"; }
+#converse-embedded-chat .icon-phone:before,
+#conversejs .icon-phone:before {
+  content: "\260f"; }
+#converse-embedded-chat .icon-plus:before,
+#conversejs .icon-plus:before {
+  content: "\271a"; }
+#converse-embedded-chat .icon-pushpin:before,
+#conversejs .icon-pushpin:before {
+  content: "\e012"; }
+#converse-embedded-chat .icon-quotes-left:before,
+#conversejs .icon-quotes-left:before {
+  content: "\e01d"; }
+#converse-embedded-chat .icon-reddit:before,
+#conversejs .icon-reddit:before {
+  content: "\eac6"; }
+#converse-embedded-chat .icon-remove:before,
+#conversejs .icon-remove:before {
+  content: "\e02d"; }
+#converse-embedded-chat .icon-room-info:before,
+#conversejs .icon-room-info:before {
+  content: "\e059"; }
+#converse-embedded-chat .icon-save:before,
+#conversejs .icon-save:before {
+  content: "\f0c7"; }
+#converse-embedded-chat .icon-search:before,
+#conversejs .icon-search:before {
+  content: "\e021"; }
+#converse-embedded-chat .icon-show-users:before,
+#conversejs .icon-show-users:before {
+  content: "\e01e"; }
+#converse-embedded-chat .icon-smiley:before,
+#conversejs .icon-smiley:before {
+  content: "\263a"; }
+#converse-embedded-chat .icon-snowflake:before,
+#conversejs .icon-snowflake:before {
+  content: "\f2dc"; }
+#converse-embedded-chat .icon-spell-check:before,
+#conversejs .icon-spell-check:before {
+  content: "\e045"; }
+#converse-embedded-chat .icon-spinner:before,
+#conversejs .icon-spinner:before {
+  content: "\231b"; }
+#converse-embedded-chat .icon-star:before,
+#conversejs .icon-star:before {
+  content: "\f005"; }
+#converse-embedded-chat .icon-star_empty:before,
+#conversejs .icon-star_empty:before {
+  content: "\f006"; }
+#converse-embedded-chat .icon-strikethrough:before,
+#conversejs .icon-strikethrough:before {
+  content: "\e050"; }
+#converse-embedded-chat .icon-twitter:before,
+#conversejs .icon-twitter:before {
+  content: "\ea96"; }
+#converse-embedded-chat .icon-underline:before,
+#conversejs .icon-underline:before {
+  content: "\e04e"; }
+#converse-embedded-chat .icon-unlocked:before,
+#conversejs .icon-unlocked:before {
+  content: "\e025"; }
+#converse-embedded-chat .icon-user:before,
+#conversejs .icon-user:before {
+  content: "\e01a"; }
+#converse-embedded-chat .icon-users:before,
+#conversejs .icon-users:before {
+  content: "\e01b"; }
+#converse-embedded-chat .icon-warning:before,
+#conversejs .icon-warning:before {
+  content: "\26a0"; }
+#converse-embedded-chat .icon-wrench:before,
+#conversejs .icon-wrench:before {
+  content: "\e024"; }
+#converse-embedded-chat .icon-xa:before,
+#conversejs .icon-xa:before {
+  content: "\e602"; }
+#converse-embedded-chat .icon-zoomin:before,
+#conversejs .icon-zoomin:before {
+  content: "\e02b"; }
+#converse-embedded-chat .icon-zoomout:before,
+#conversejs .icon-zoomout:before {
+  content: "\e02a"; }
+#converse-embedded-chat [data-icon]:before,
+#conversejs [data-icon]:before {
+  content: attr(data-icon);
+  font-family: 'Converse-js';
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+  speak: none;
+  text-transform: none;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+#converse-embedded-chat [class^="icon-"]:before, #converse-embedded-chat [class*=" icon-"]:before,
+#conversejs [class^="icon-"]:before,
+#conversejs [class*=" icon-"]:before {
+  background-position: 14px 14px;
+  background-image: none;
+  font-family: 'Converse-js';
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  width: auto;
+  height: auto;
+  line-height: 1;
+  speak: none;
+  text-transform: none;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+/*# sourceMappingURL=fonts.css.map */
--- a/demo/anonymous.html
+++ b/demo/anonymous.html
@@ -40,7 +40,7 @@
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
-                        <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
+                        <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse</h1>
                        <p class="intro-text">Anonymous login demo</p>
                    </div>
                </div>

--- a/demo/embedded.html
+++ b/demo/embedded.html
@@ -41,7 +41,7 @@
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
-                        <h1 class="brand-heading brand-heading-embedded"><a style="color: white;" href="/"><i class="icon-conversejs"></i>Converse.js</a></h1>
+                        <h1 class="brand-heading brand-heading-embedded"><a style="color: white;" href="/"><i class="icon-conversejs"></i>Converse</a></h1>
                        <p class="intro-text">Embedded MUC chat demo</p>
                        <div id="converse-embedded-chat"></div>
@@ -54,44 +54,18 @@
 <script>
    converse.initialize({
-        allow_logout: false, // No point in logging out when we have auto_login as true.
-        allow_muc_invitations: false, // Doesn't make sense to allow because only
-                                        // roster contacts can be invited
-        allow_contact_requests: false, // Contacts from other servers cannot,
-                                        // be added and anonymous users don't
-                                        // know one another's JIDs, so disabling.
-        auto_reconnect: true,
        authentication: 'anonymous',
        auto_login: true,
        auto_join_rooms: [
            'anonymous@conference.nomnom.im',
        ],
-        // Whitelist non-core plugins that we need
-        whitelisted_plugins: ['converse-muc-embedded'],
-        // Blacklist plugins which aren't included in the build file, 
-        // so that other code cannot register their own plugins under
-        // those names.
-        blacklisted_plugins: [
-            "converse-bookmarks",
-            "converse-controlbox",
-            "converse-dragresize",
-            "converse-headline",
-            "converse-minimize",
-            "converse-otr",
-            "converse-register",
-            "converse-vcard",
-        ],
-        notify_all_room_messages: [
-            'anonymous@conference.nomnom.im',
-        ],
        bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
        jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
                          // allow chatting with other XMPP servers).
-        keepalive: true,
+        notify_all_room_messages: [
-        hide_muc_server: true, // Federation is disabled, so no use in
+            'anonymous@conference.nomnom.im',
-                                // showing the MUC server.
+        ],
-        play_sounds: true,
+        view_mode: 'embedded',
-        strict_plugin_dependencies: false
    });
 </script>
 </html>
--- a/demo/index.html
+++ b/demo/index.html
@@ -67,7 +67,7 @@
    <section class="intro" class="container">
        <div class="row">
-            <h1 class="brand-heading"><i class="icon-conversejs"></i> Converse.js</h1>
+            <h1 class="brand-heading"><i class="icon-conversejs"></i> Converse</h1>
            <div class="col-md-8 col-md-offset-2">
                <p class="intro-text">Demos:</p>
                <p class="intro-text">

--- a/demo/without_bundled_dependencies.html
+++ b/demo/without_bundled_dependencies.html
@@ -59,7 +59,7 @@
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
-                        <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
+                        <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse</h1>
                        <p class="intro-text">An example page where external dependencies are loaded seperately and not within the converse.js bundle.</p>
                        <p class="intro-text">Look at the page source for details.</p>
                        <p class="intro-text">For this page to work, you'll need to

--- a/dist/converse-muc-embedded.js
+++ b/dist/converse-muc-embedded.js
--- a/docs/source/configuration.rst
+++ b/docs/source/configuration.rst
@@ -6,7 +6,7 @@
 Configuration
 =============
-The included minified JS and CSS files can be used for demoing or testing, but
+The included minified JavaScript and CSS files can be used for demoing or testing, but
 you'll want to configure *Converse.js* to suit your needs before you deploy it
 on your website.
@@ -19,7 +19,7 @@ Please refer to the `Configuration settings`_ section below for info on
 all the available configuration settings.
 After you have configured *Converse.js*, you'll have to regenerate the minified
-JS file so that it will include the new settings. Please refer to the
+JavaScript file so that it will include the new settings. Please refer to the
 :ref:`minification` section for more info on how to do this.
 .. _`configuration-settings`:
@@ -133,7 +133,7 @@ allow_contact_removal
 * Default:  ``true``
 Allow the user to remove roster contacts by clicking on the delete icon
-(i.e. traschcan) next to a contact's name in the roster.
+(i.e. trashcan) next to a contact's name in the roster.
 allow_contact_requests
 ----------------------
@@ -151,7 +151,7 @@ allow_dragresize
 * Default: ``true``
 Allow users to resize chats by dragging the edges. The min-height and min-width
-CSS properties set on a chat boxes (specifically on the ``#converse.js .chatbox > .box-flyout`` element)
+CSS properties set on a chatboxes (specifically on the ``#converse.js .chatbox > .box-flyout`` element)
 will be honored, IF they are set in pixels.
 allow_muc
@@ -167,9 +167,9 @@ allow_muc_invitations
 * Default:  ``true``
-Allows users to be invited to join MUC chat rooms. An "Invite" widget will
+Allows users to be invited to join MUC chatrooms. An "Invite" widget will
-appear in the sidebar of the chat room where you can type in the JID of a user
+appear in the sidebar of the chatroom where you can type in the JID of a user
-to invite into the chat room.
+to invite into the chatroom.
 .. _`allow_non_roster_messaging`:
@@ -224,7 +224,7 @@ animate
 * Default:  ``true``
-Show animations, for example when opening and closing chat boxes.
+Show animations, for example when opening and closing chatboxes.
 archived_messages_page_size
 ---------------------------
@@ -237,10 +237,10 @@ This feature applies to `XEP-0313: Message Archive Management (MAM) <https://xmp
 and will only take effect if your server supports MAM.
 It allows you to specify the maximum amount of archived messages to be returned per query.
-When you open a chat box or room, archived messages will be displayed (if
+When you open a chatbox or room, archived messages will be displayed (if
 available) and the amount returned will be no more than the page size.
-You will be able to query for even older messages by scrolling upwards in the chat box or room
+You will be able to query for even older messages by scrolling upwards in the chatbox or room
 (the so-called infinite scrolling pattern).
 auto_list_rooms
@@ -251,7 +251,7 @@ auto_list_rooms
 If true, and the XMPP server on which the current user is logged in supports
 multi-user chat, then a list of rooms on that server will be fetched.
-Not recommended for servers with lots of chat rooms.
+Not recommended for servers with lots of chatrooms.
 For each room on the server a query is made to fetch further details (e.g.
 features, number of occupants etc.), so on servers with many rooms this
@@ -941,15 +941,15 @@ muc_history_max_stanzas
 * Default:  ``undefined``
 This option allows you to specify the maximum amount of messages to be shown in a
-chat room when you enter it. By default, the amount specified in the room
+chatroom when you enter it. By default, the amount specified in the room
 configuration or determined by the server will be returned.
 Please note, this option is not related to
 `XEP-0313 Message Archive Management <https://xmpp.org/extensions/xep-0313.html>`_,
-which also allows you to show archived chat room messages, but follows a
+which also allows you to show archived chatroom messages, but follows a
 different approach.
-If you're using MAM for archiving chat room messages, you might want to set
+If you're using MAM for archiving chatroom messages, you might want to set
 this option to zero.
 muc_instant_rooms
@@ -971,9 +971,9 @@ muc_nickname_from_jid
 * Default: ``false``
 When set to ``true``, then users will not be prompted to provide nicknames for
-chat rooms. Instead, the node part of a user's JID (i.e. JID = node@domain/resource)
+chatrooms. Instead, the node part of a user's JID (i.e. JID = node@domain/resource)
 will be used. If the user's nickname is already taken by another user in the
-chat room, then an integer will be added to make it unique.
+chatroom, then an integer will be added to make it unique.
 So, for example, if john@example.com joins a chatroom, his nickname will
 automatically be "john". If now john@differentdomain.com tries to join the
@@ -985,7 +985,7 @@ muc_show_join_leave
 * Default; ``true``
-Determines whether Converse.js will show info messages inside a chat room
+Determines whether Converse.js will show info messages inside a chatroom
 whenever a user joins or leaves it.
 notify_all_room_messages
@@ -1028,7 +1028,7 @@ play_sounds
 * Default:  ``false``
 Plays a notification sound when you receive a personal message or when your
-nickname is mentioned in a chat room.
+nickname is mentioned in a chatroom.
 Inside the ``./sounds`` directory of the Converse.js repo you'll see MP3 and Ogg
 formatted sound files. We need both, because neither format is supported by all browsers.
@@ -1091,6 +1091,35 @@ providers_link
 The hyperlink on the registration form which points to a directory of public
 XMPP servers.
+root
+----
+* Default: ``window.document``
+When using converse.js inside a web component's shadow DOM, you will need to set this settings'
+value to the shadow-root of the shadow DOM.
+For example:
+.. code-block:: javascript
+  class CustomChatComponent extends HTMLElement {
+    constructor() {
+      super();
+      const shadowRoot  = this.attachShadow({mode: "open"});
+      this.initConverse(shadowRoot);
+    }
+    initConverse(shadowRoot) {
+        window.addEventListener("converse-loaded", function(event) {
+            converse.initialize({
+                root: shadowRoot,
+                // Other settings go here...
+            });
+        });
+      }
+    }
 roster_groups
 -------------
@@ -1310,7 +1339,7 @@ use_otr_by_default
 * Default:  ``false``
 If set to ``true``, Converse.js will automatically try to initiate an OTR (off-the-record)
-encrypted chat session every time you open a chat box.
+encrypted chat session every time you open a chatbox.
 use_vcards
 ----------
@@ -1335,7 +1364,7 @@ visible_toolbar_buttons
        toggle_occupants: true
    }
-Allows you to show or hide buttons on the chat boxes' toolbars.
+Allows you to show or hide buttons on the chatboxes' toolbars.
 * *call*:
    Provides a button with a picture of a telephone on it.
@@ -1349,11 +1378,11 @@ Allows you to show or hide buttons on the chat boxes' toolbars.
            // ... Third-party library code ...
        });
 * *clear*:
-    Provides a button for clearing messages from a chat box.
+    Provides a button for clearing messages from a chatbox.
 * *emoji*:
    Enables rendering of emoji and provides a toolbar button for choosing them.
 * *toggle_occupants*:
-    Shows a button for toggling (i.e. showing/hiding) the list of occupants in a chat room.
+    Shows a button for toggling (i.e. showing/hiding) the list of occupants in a chatroom.
 .. _`websocket-url`:
@@ -1388,20 +1417,21 @@ view_mode
 ---------
 * Default: ``overlayed``
-* Allowed values: ``overlayed``, ``fullscreen``, ``mobile``
+* Allowed values: ``overlayed``, ``fullscreen``, ``mobile``, ``embedded``
 The ``view_mode`` setting configures converse.js's mode and resulting behavior.
 Before the introduction of this setting (in version 3.3.0), there were there
-different builds, each for the diffent modes.
+different builds, each for the different modes.
 These were:
-* ``converse.js`` for the ``overlayed`` mode
 * ``converse-mobile.js`` for the ``mobile`` mode
+* ``converse-muc-embedded.js`` for embedding a single MUC room into the page.
+* ``converse.js`` for the ``overlayed`` mode
 * ``inverse.js`` for the ``fullscreen`` mode
-Besides having three different builds, certain plugins had to be whitelisted
+Besides having different builds, certain plugins had to be whitelisted
 and blacklisted for the different modes.
 ``converse-singleton`` had to be whitelisted for the ``mobile`` and ``fullscreen``
@@ -1411,11 +1441,25 @@ modes, additionally ``converse-inverse`` had to be whitelisted for the
 For both those modes the ``converse-minimize`` and ``converse-dragresize``
 plugins had to be blacklisted.
-Since version 3.3.0, the last two builds no longer exist, and instead the
+When using ``converse-muc-embedded.js`` various plugins also had to manually be
-standard ``converse.js`` build is used, together with the appropraite
+blacklisted.
-``view_mode`` value.
+Since version 3.3.0 it's no longer necessary to blacklist any plugins (except
+for ``converse-muc-embedded.js``, which is from version 3.3.3).
+Blacklisting now happens automatically.
+Since version 3.3.0, the ``inverse.js`` and ``converse-mobile.js`` builds no
+longer exist. Instead the standard ``converse.js`` build is used, together with
+the appropriate ``view_mode`` value.
+The ``converse-muc-embedded.js`` build is still kept, because it's smaller than
+``converse.js`` due to unused code being removed. It doesn't however contain
+any new code, so the full ``converse.js`` build could be used instead, as long
+as ``view_mode`` is set to ``embedded``.
-Furthermore, it's no longer necessary to whitelist or blacklist any plugins.
+Furthermore, it's no longer necessary to whitelist or blacklist any plugins
+when switching view modes.
 .. note::
    Although the ``view_mode`` setting has removed the need for different
@@ -1519,7 +1563,9 @@ xhr_user_search
 There are two ways to add users.
 * The user inputs a valid JID (Jabber ID), and the user is added as a pending contact.
-* The user inputs some text (for example part of a firstname or lastname), an XHR (Ajax Request) will be made to a remote server, and a list of matches are returned. The user can then choose one of the matches to add as a contact.
+* The user inputs some text (for example part of a first name or last name),
+  an XHR (Ajax Request) will be made to a remote server, and a list of matches are returned.
+  The user can then choose one of the matches to add as a contact.
 This setting enables the second mechanism, otherwise by default the first will be used.

--- a/docs/source/developer_api.rst
+++ b/docs/source/developer_api.rst
@@ -751,35 +751,35 @@ You may also provide the fullname. If not present, we use the jid as fullname:
 The **chats** grouping
 ----------------------
-Note, for MUC chat rooms, you need to use the "rooms" grouping instead.
+Note, for MUC chatrooms, you need to use the "rooms" grouping instead.
 get
 ~~~
-Returns an object representing a chat box. The chat box should already be open.
+Returns an object representing a chatbox. The chatbox should already be open.
-To return a single chat box, provide the JID of the contact you're chatting
+To return a single chatbox, provide the JID of the contact you're chatting
-with in that chat box:
+with in that chatbox:
 .. code-block:: javascript
    _converse.api.chats.get('buddy@example.com')
-To return an array of chat boxes, provide an array of JIDs:
+To return an array of chatboxes, provide an array of JIDs:
 .. code-block:: javascript
    _converse.api.chats.get(['buddy1@example.com', 'buddy2@example.com'])
-To return all open chat boxes, call the method without any JIDs::
+To return all open chatboxes, call the method without any JIDs::
    _converse.api.chats.get()
 open
 ~~~~
-Opens a chat box and returns a `Backbone.View <http://backbonejs.org/#View>`_ object
+Opens a chatbox and returns a `Backbone.View <http://backbonejs.org/#View>`_ object
-representing a chat box.
+representing a chatbox.
 Note that converse doesn't allow opening chats with users who aren't in your roster
 (unless you have set :ref:`allow_non_roster_messaging` to ``true``).
@@ -787,13 +787,13 @@ Note that converse doesn't allow opening chats with users who aren't in your ros
 Before opening a chat, you should first wait until the roster has been populated.
 This is the :ref:`rosterContactsFetched` event/promise.
-Besides that, it's a good idea to also first wait until already opened chat boxes
+Besides that, it's a good idea to also first wait until already opened chatboxes
 (which are cached in sessionStorage) have also been fetched from the cache.
 This is the :ref:`chatBoxesFetched` event/promise.
 These two events fire only once per session, so they're also available as promises.
-So, to open a single chat box:
+So, to open a single chatbox:
 .. code-block:: javascript
@@ -810,7 +810,7 @@ So, to open a single chat box:
      }
    });
-To return an array of chat boxes, provide an array of JIDs:
+To return an array of chatboxes, provide an array of JIDs:
 .. code-block:: javascript
@@ -828,14 +828,14 @@ To return an array of chat boxes, provide an array of JIDs:
    });
-*The returned chat box object contains the following methods:*
+*The returned chatbox object contains the following methods:*
 +-------------------+------------------------------------------+
 | Method            | Description                              |
 +===================+==========================================+
-| close             | Close the chat box.                      |
+| close             | Close the chatbox.                      |
 +-------------------+------------------------------------------+
-| focus             | Focuses the chat box textarea            |
+| focus             | Focuses the chatbox textarea            |
 +-------------------+------------------------------------------+
 | model.endOTR      | End an OTR (Off-the-record) session.     |
 +-------------------+------------------------------------------+
@@ -843,13 +843,13 @@ To return an array of chat boxes, provide an array of JIDs:
 +-------------------+------------------------------------------+
 | model.initiateOTR | Start an OTR (off-the-record) session.   |
 +-------------------+------------------------------------------+
-| model.maximize    | Minimize the chat box.                   |
+| model.maximize    | Minimize the chatbox.                   |
 +-------------------+------------------------------------------+
-| model.minimize    | Maximize the chat box.                   |
+| model.minimize    | Maximize the chatbox.                   |
 +-------------------+------------------------------------------+
 | model.set         | Set an attribute (i.e. mutator).         |
 +-------------------+------------------------------------------+
-| show              | Opens/shows the chat box.                |
+| show              | Opens/shows the chatbox.                |
 +-------------------+------------------------------------------+
 *The get and set methods can be used to retrieve and change the following attributes:*
@@ -857,9 +857,9 @@ To return an array of chat boxes, provide an array of JIDs:
 +-------------+-----------------------------------------------------+
 | Attribute   | Description                                         |
 +=============+=====================================================+
-| height      | The height of the chat box.                         |
+| height      | The height of the chatbox.                         |
 +-------------+-----------------------------------------------------+
-| url         | The URL of the chat box heading.                    |
+| url         | The URL of the chatbox heading.                    |
 +-------------+-----------------------------------------------------+
 .. _`listen-grouping`:
@@ -929,7 +929,7 @@ The **rooms** grouping
 get
 ~~~
-Returns an object representing a multi user chat box (room).
+Returns an object representing a multi user chatbox (room).
 It takes 3 parameters:
 * the room JID (if not specified, all rooms will be returned).
@@ -961,7 +961,7 @@ It takes 3 parameters:
 open
 ~~~~
-Opens a multi user chat box and returns an object representing it.
+Opens a multi user chatbox and returns an object representing it.
 Similar to the ``chats.get`` API.
 It takes 2 parameters:
@@ -970,7 +970,7 @@ It takes 2 parameters:
 * A map (object) containing any extra room attributes. For example, if you want
  to specify the nickname, use ``{'nick': 'bloodninja'}``.
-To open a single multi user chat box, provide the JID of the room:
+To open a single multi user chatbox, provide the JID of the room:
 .. code-block:: javascript
@@ -1056,8 +1056,8 @@ For example, opening a room with a specific default configuration:
 close
 ~~~~~
-Lets you close open chat rooms. You can call this method without any arguments
+Lets you close open chatrooms. You can call this method without any arguments
-to close all open chat rooms, or you can specify a single JID or an array of
+to close all open chatrooms, or you can specify a single JID or an array of
 JIDs.
 .. _`promises-grouping`:

--- a/docs/source/events.rst
+++ b/docs/source/events.rst
@@ -50,7 +50,7 @@ Here follows the different events that are emitted:
 afterMessagesFetched
 ~~~~~~~~~~~~~~~~~~~~
-Emitted whenever a chat box has fetched its messages from ``sessionStorage`` and
+Emitted whenever a chatbox has fetched its messages from ``sessionStorage`` and
 **NOT** from the server.
 This event is listened to by the ``converse-mam`` plugin to know when it can
@@ -83,7 +83,7 @@ See also the `roster`_ event further down.
 callButtonClicked
 ~~~~~~~~~~~~~~~~~
-When a call button (i.e. with class .toggle-call) on a chat box has been clicked.
+When a call button (i.e. with class .toggle-call) on a chatbox has been clicked.
 ``_converse.on('callButtonClicked', function (connection, model) { ... });``
@@ -92,10 +92,10 @@ When a call button (i.e. with class .toggle-call) on a chat box has been clicked
 chatBoxesFetched
 ~~~~~~~~~~~~~~~~
-Any open chat boxes (from this current session) has been retrieved from the local cache (`sessionStorage`).
+Any open chatboxes (from this current session) has been retrieved from the local cache (`sessionStorage`).
 You should wait for this event or promise before attempting to do things
-related to open chat boxes.
+related to open chatboxes.
 ``_converse.on('chatBoxesFetched', function (items) { ... });``
@@ -110,42 +110,42 @@ Also available as an `ES2015 Promise <http://es6-features.org/#PromiseUsage>`_:
 chatBoxInitialized
 ~~~~~~~~~~~~~~~~~~
-When a chat box has been initialized. Relevant to converse-chatview.js plugin.
+When a chatbox has been initialized. Relevant to converse-chatview.js plugin.
 ``_converse.on('chatBoxInitialized', function (chatbox) { ... });``
 chatBoxOpened
 ~~~~~~~~~~~~~
-When a chat box has been opened. Relevant to converse-chatview.js plugin.
+When a chatbox has been opened. Relevant to converse-chatview.js plugin.
 ``_converse.on('chatBoxOpened', function (chatbox) { ... });``
 chatRoomOpened
 ~~~~~~~~~~~~~~
-When a chat room has been opened. Relevant to converse-chatview.js plugin.
+When a chatroom has been opened. Relevant to converse-chatview.js plugin.
 ``_converse.on('chatRoomOpened', function (chatbox) { ... });``
 chatBoxClosed
 ~~~~~~~~~~~~~
-When a chat box has been closed. Relevant to converse-chatview.js plugin.
+When a chatbox has been closed. Relevant to converse-chatview.js plugin.
 ``_converse.on('chatBoxClosed', function (chatbox) { ... });``
 chatBoxFocused
 ~~~~~~~~~~~~~~
-When the focus has been moved to a chat box. Relevant to converse-chatview.js plugin.
+When the focus has been moved to a chatbox. Relevant to converse-chatview.js plugin.
 ``_converse.on('chatBoxFocused', function (chatbox) { ... });``
 chatBoxToggled
 ~~~~~~~~~~~~~~
-When a chat box has been minimized or maximized. Relevant to converse-chatview.js plugin.
+When a chatbox has been minimized or maximized. Relevant to converse-chatview.js plugin.
 ``_converse.on('chatBoxToggled', function (chatbox) { ... });``
@@ -239,15 +239,15 @@ The user has logged out.
 messageAdded
 ~~~~~~~~~~~~
-Once a message has been added to a chat box. The passed in data object contains
+Once a message has been added to a chatbox. The passed in data object contains
-a `chatbox` attribute, referring to the chat box receiving the message, as well
+a `chatbox` attribute, referring to the chatbox receiving the message, as well
 as a `message` attribute which refers to the Message model.
 .. code-block:: javascript
    _converse.on('messageAdded', function (data) {
        // The message is at `data.message`
-        // The original chat box is at `data.chatbox`.
+        // The original chatbox is at `data.chatbox`.
    });
 messageSend

--- a/docs/source/features.rst
+++ b/docs/source/features.rst
@@ -69,17 +69,17 @@ Languages increase the size of the Converse.js significantly.
 If you only need one, or a subset of the available languages, it's better to
 make a custom build which includes only those languages that you need.
-Moderating chat rooms
+Moderating chatrooms
-=====================
+====================
-Here are the different commands that may be used to moderate a chat room:
+Here are the different commands that may be used to moderate a chatroom:
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+
 | Event Type | When is it triggered?                                                                        | Example (substitue $nickname with an actual user's nickname)  |
 +============+==============================================================================================+===============================================================+
-| **ban**    | Ban a user from the chat room. They will not be able to join again.                          | /ban $nickname                                                |
+| **ban**    | Ban a user from the chatroom. They will not be able to join again.                           | /ban $nickname                                                |
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+
-| **clear**  | Clear the messages shown in the chat room.                                                   | /clear                                                        |
+| **clear**  | Clear the messages shown in the chatroom.                                                    | /clear                                                        |
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+
 | **deop**   | Make a moderator a normal occupant.                                                          | /deop $nickname [$reason]                                     |
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+
@@ -95,7 +95,7 @@ Here are the different commands that may be used to moderate a chat room:
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+
 | **op**     | Make a normal occupant a moderator.                                                          | /op $nickname [$reason]                                       |
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+
-| **topic**  | Set the topic of the chat room.                                                              | /topic ${topic text}                                          |
+| **topic**  | Set the topic of the chatroom.                                                               | /topic ${topic text}                                          |
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+
 | **voice**  | Allow a muted user to post messages to the room.                                             | /voice $nickname [$reason]                                    |
 +------------+----------------------------------------------------------------------------------------------+---------------------------------------------------------------+

--- a/docs/source/manual.rst
+++ b/docs/source/manual.rst
@@ -168,7 +168,7 @@ A normal contact
 If the person accepts your contact request, they will get a *chat status
 indicator* in your roster and will also become clickable. Clicking on the name
-of the user will open a chat box in which you can then start chatting with that
+of the user will open a chatbox in which you can then start chatting with that
 user.
 .. figure:: images/remove-contact.png

--- a/docs/source/other_frameworks.rst
+++ b/docs/source/other_frameworks.rst
@@ -52,7 +52,7 @@ Below is an example code that wraps converse.js as an angular.js service.
                                     // file src/locales.js to include only those
                                     // translations that you care about.
-            "converse-chatview",     // Renders standalone chat boxes for single user chat
+            "converse-chatview",     // Renders standalone chatboxes for single user chat
            "converse-controlbox",   // The control box
            "converse-bookmarks",    // XEP-0048 Bookmarks
            "converse-mam",          // XEP-0313 Message Archive Management
@@ -62,8 +62,8 @@ Below is an example code that wraps converse.js as an angular.js service.
            "converse-register",     // XEP-0077 In-band registration
            "converse-ping",         // XEP-0199 XMPP Ping
            "converse-notification", // HTML5 Notifications
-            "converse-minimize",     // Allows chat boxes to be minimized
+            "converse-minimize",     // Allows chatboxes to be minimized
-            "converse-dragresize",   // Allows chat boxes to be resized by dragging them
+            "converse-dragresize",   // Allows chatboxes to be resized by dragging them
            "converse-headline",     // Support for headline messages
            // END: Removable components

--- a/docs/source/plugin_development.rst
+++ b/docs/source/plugin_development.rst
@@ -340,7 +340,7 @@ method of the plugin:
    });
 In this case, the plugin waits for the ``chatBoxOpened`` event, before it then
-calls ``renderMinimizeButton``, which adds a new button to the chat box (which
+calls ``renderMinimizeButton``, which adds a new button to the chatbox (which
 enables you to minimize it).
 Finding the right promises and/or events to listen to, can be a bit

--- a/docs/source/quickstart.rst
+++ b/docs/source/quickstart.rst
@@ -22,8 +22,8 @@ The latest versions of these files are available at these URLs:
 To load a specific version of Converse.js you can put the version in the URL, like so:
-* https://cdn.conversejs.org/3.0.3/dist/converse.min.js
+* https://cdn.conversejs.org/3.3.2/dist/converse.min.js
-* https://cdn.conversejs.org/3.0.3/css/converse.min.css
+* https://cdn.conversejs.org/3.3.2/css/converse.min.css
 You can include these two URLs inside the *<head>* element of your website
 via the *script* and *link* tags:
@@ -100,7 +100,7 @@ Headless build
 There is also the option of making a headless build of converse.js.
 This means a build without any UI but still containing core functionality of
-maintaining a roster, chat boxes and messages.
+maintaining a roster, chatboxes and messages.
 The file `src/headless.js <https://github.com/jcbrand/converse.js/blob/master/src/headless.js>`_
 is used to determine which plugins are included in the build.

--- a/sass/_muc_embedded.scss
+++ b/sass/_muc_embedded.scss
 @import "bourbon";
 @import "converse/variables";
-#converse-embedded-chat {
+#conversejs.converse-embedded {
    @include box-sizing(border-box);
    *, *:before, *:after {

--- a/sass/only-fonts.scss
+++ b/sass/only-fonts.scss
+@import "bourbon";
+@import "converse/variables";
+@import "fonts";
--- a/src/converse-bookmarks.js
+++ b/src/converse-bookmarks.js
@@ -478,7 +478,7 @@
                insertIntoControlBox () {
                    const controlboxview = _converse.chatboxviews.get('controlbox');
                    if (!_.isUndefined(controlboxview) &&
-                            !document.body.contains(this.el)) {
+                            !_converse.root.contains(this.el)) {
                        const container = controlboxview.el.querySelector('#chatrooms');
                        if (!_.isNull(container)) {
                            container.insertBefore(this.el, container.firstChild);

--- a/src/converse-chatboxes.js
+++ b/src/converse-chatboxes.js
@@ -418,12 +418,17 @@
                    * If the #conversejs element doesn't exist, create it.
                    */
                    if (!this.el) {
-                        let el = document.querySelector('#conversejs');
+                        let el = _converse.root.querySelector('#conversejs');
                        if (_.isNull(el)) {
                            el = document.createElement('div');
                            el.setAttribute('id', 'conversejs');
-                            // Converse.js expects a <body> tag to be present.
+                            const body = _converse.root.querySelector('body');
-                            document.querySelector('body').appendChild(el);
+                            if (body) {
+                                body.appendChild(el);
+                            } else {
+                                // Perhaps inside a web component?
+                                _converse.root.appendChild(el);
+                            }
                        }
                        el.innerHTML = '';
                        this.setElement(el, false);

--- a/src/converse-chatview.js
+++ b/src/converse-chatview.js
@@ -74,15 +74,16 @@
            // New functions which don't exist yet can also be added.
            //
            registerGlobalEventHandlers: function () {
+                const { _converse } = this.__super__;
                this.__super__.registerGlobalEventHandlers();
-                document.addEventListener(
+                _converse.root.addEventListener(
                    'click', function (ev) {
                        if (_.includes(ev.target.classList, 'toggle-toolbar-menu') ||
                            _.includes(ev.target.classList, 'insert-emoji')) {
                            return;
                        }
                        u.slideInAllElements(
-                            document.querySelectorAll('.toolbar-menu')
+                            _converse.root.querySelectorAll('.toolbar-menu')
                        )
                    }
                );
@@ -430,7 +431,7 @@
                     * as well as src/converse-muc.js (if those plugins are
                     * enabled).
                     */
-                    const container = document.querySelector('#conversejs');
+                    const container = _converse.root.querySelector('#conversejs');
                    if (this.el.parentNode !== container) {
                        container.insertBefore(this.el, container.firstChild);
                    }
@@ -1024,7 +1025,7 @@
                        }
                    }
                    const elements = _.difference(
-                        document.querySelectorAll('.toolbar-menu'),
+                        _converse.root.querySelectorAll('.toolbar-menu'),
                        [this.emoji_picker_view.el]
                    );
                    u.slideInAllElements(elements)

--- a/src/converse-controlbox.js
+++ b/src/converse-controlbox.js
@@ -426,8 +426,8 @@
                    const tab = ev.target,
                        sibling_li = tab.parentNode.nextElementSibling || tab.parentNode.previousElementSibling,
                        sibling = sibling_li.firstChild,
-                        sibling_panel = document.querySelector(sibling.getAttribute('href')),
+                        sibling_panel = _converse.root.querySelector(sibling.getAttribute('href')),
-                        tab_panel = document.querySelector(tab.getAttribute('href'));
+                        tab_panel = _converse.root.querySelector(tab.getAttribute('href'));
                    u.hideElement(sibling_panel);
                    u.removeClass('current', sibling);
@@ -656,7 +656,7 @@
                    xhr.onload = function () {
                        if (xhr.status >= 200 && xhr.status < 400) {
                            const data = JSON.parse(xhr.responseText),
-                                  ul = document.querySelector('.search-xmpp ul');
+                                  ul = _converse.root.querySelector('.search-xmpp ul');
                            u.removeElement(ul.querySelector('li.found-user'));
                            u.removeElement(ul.querySelector('li.chat-info'));
                            if (!data.length) {
@@ -769,7 +769,7 @@
                onClick (e) {
                    e.preventDefault();
-                    if (u.isVisible(document.querySelector("#controlbox"))) {
+                    if (u.isVisible(_converse.root.querySelector("#controlbox"))) {
                        const controlbox = _converse.chatboxes.get('controlbox');
                        if (_converse.connection.connected) {
                            controlbox.save({closed: true});

--- a/src/converse-core.js
+++ b/src/converse-core.js
@@ -4,7 +4,7 @@
 // Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
 // Licensed under the Mozilla Public License (MPLv2)
 //
-/*global Backbone, define, window, document, JSON */
+/*global Backbone, define, window, JSON */
 (function (root, factory) {
    define(["sizzle",
            "es6-promise",
@@ -79,6 +79,7 @@
        'converse-mam',
        'converse-minimize',
        'converse-muc',
+        'converse-muc-embedded',
        'converse-notification',
        'converse-otr',
        'converse-ping',
@@ -87,8 +88,8 @@
        'converse-roomslist',
        'converse-rosterview',
        'converse-singleton',
-        'converse-vcard',
+        'converse-spoilers',
-        'converse-spoilers'
+        'converse-vcard'
    ];
    // Make converse pluggable
@@ -288,7 +289,7 @@
            authentication: 'login', // Available values are "login", "prebind", "anonymous" and "external".
            auto_away: 0, // Seconds after which user status is set to 'away'
            auto_login: false, // Currently only used in connection with anonymous login
-            auto_reconnect: false,
+            auto_reconnect: true,
            auto_subscribe: false,
            auto_xa: 0, // Seconds after which user status is set to 'xa'
            blacklisted_plugins: [],
@@ -318,6 +319,7 @@
            priority: 0,
            registration_domain: '',
            rid: undefined,
+            root: window.document,
            roster_groups: true,
            show_only_online_users: false,
            show_send_button: false,
@@ -591,19 +593,25 @@
        this.incrementMsgCounter = function () {
            this.msg_counter += 1;
            const unreadMsgCount = this.msg_counter;
-            if (document.title.search(/^Messages \(\d+\) /) === -1) {
+            let title = document.title;
-                document.title = `Messages (${unreadMsgCount}) ${document.title}`;
+            if (_.isNil(title)) {
+                return;
+            }
+            if (title.search(/^Messages \(\d+\) /) === -1) {
+                title = `Messages (${unreadMsgCount}) ${title}`;
            } else {
-                document.title = document.title.replace(
+                title = title.replace(/^Messages \(\d+\) /, `Messages (${unreadMsgCount})`);
-                    /^Messages \(\d+\) /, `Messages (${unreadMsgCount}) `
-                );
            }
        };
        this.clearMsgCounter = function () {
            this.msg_counter = 0;
-            if (document.title.search(/^Messages \(\d+\) /) !== -1) {
+            let title = document.title;
-                document.title = document.title.replace(/^Messages \(\d+\) /, "");
+            if (_.isNil(title)) {
+                return;
+            }
+            if (title.search(/^Messages \(\d+\) /) !== -1) {
+                title = title.replace(/^Messages \(\d+\) /, "");
            }
        };
@@ -1795,6 +1803,21 @@
            const whitelist = _converse.core_plugins.concat(
                _converse.whitelisted_plugins);
+            if (_converse.view_mode === 'embedded') {
+                _.forEach([ // eslint-disable-line lodash/prefer-map
+                    "converse-bookmarks",
+                    "converse-controlbox",
+                    "converse-dragresize",
+                    "converse-headline",
+                    "converse-minimize",
+                    "converse-otr",
+                    "converse-register",
+                    "converse-vcard",
+                ], (name) => {
+                    _converse.blacklisted_plugins.push(name)
+                });
+            }
            _converse.pluggable.initializePlugins({
                'updateSettings' () {
                    _converse.log(
@@ -1839,13 +1862,10 @@
            i18n.fetchTranslations(
                _converse.locale,
                _converse.locales,
-                _.template(_converse.locales_url)({'locale': _converse.locale})
+                _.template(_converse.locales_url)({'locale': _converse.locale}))
-            ).then(() => {
+            .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL))
-                finishInitialization();
+            .then(finishInitialization)
-            }).catch((reason) => {
+            .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
-                finishInitialization();
-                _converse.log(reason, Strophe.LogLevel.ERROR);
-            });
        }
        return init_promise;
    };
@@ -1996,7 +2016,7 @@
    };
    // The public API
-    return {
+    window.converse = {
        'initialize' (settings, callback) {
            return _converse.initialize(settings, callback);
        },
@@ -2028,4 +2048,6 @@
            'utils': utils
        }
    };
+    window.dispatchEvent(new Event('converse-loaded'));
+    return window.converse;
 }));
--- a/src/converse-disco.js
+++ b/src/converse-disco.js
@@ -7,7 +7,7 @@
 /* This is a Converse.js plugin which add support for XEP-0030: Service Discovery */
-/*global Backbone, define, window, document */
+/*global Backbone, define, window */
 (function (root, factory) {
    define(["converse-core", "sizzle", "strophe.disco"], factory);
 }(this, function (converse, sizzle) {

--- a/src/converse-dragresize.js
+++ b/src/converse-dragresize.js
@@ -4,7 +4,7 @@
 // Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
 // Licensed under the Mozilla Public License (MPLv2)
 //
-/*global define, window */
+/*global define, window, document */
 (function (root, factory) {
    define(["converse-core",

--- a/src/converse-fullscreen.js
+++ b/src/converse-fullscreen.js
@@ -21,7 +21,7 @@
    converse.plugins.add('converse-fullscreen', {
        enabled (_converse) {
-            return _.includes(['mobile', 'fullscreen'], _converse.view_mode);
+            return _.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode);
        },
        overrides: {
@@ -37,7 +37,8 @@
                },
                insertBrandHeading () {
-                    const el = document.getElementById('converse-login-panel');
+                    const { _converse } = this.__super__;
+                    const el = _converse.root.getElementById('converse-login-panel');
                    el.parentNode.insertAdjacentHTML(
                        'afterbegin',
                        this.createBrandHeadingHTML()

--- a/src/converse-minimize.js
+++ b/src/converse-minimize.js
@@ -4,7 +4,7 @@
 // Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
 // Licensed under the Mozilla Public License (MPLv2)
 //
-/*global define, window */
+/*global define, window, document */
 (function (root, factory) {
    define(["converse-core",

--- a/src/converse-muc-embedded.js
+++ b/src/converse-muc-embedded.js
@@ -11,6 +11,11 @@
    const { Backbone, _ } = converse.env;
    converse.plugins.add('converse-muc-embedded', {
+        enabled (_converse) {
+            return _converse.view_mode === 'embedded';
+        },
        overrides: {
            // Overrides mentioned here will be picked up by converse.js's
            // plugin architecture they will replace existing methods on the
@@ -37,14 +42,10 @@
                }
            },
-            ChatRoomView: {
+            ChatBoxViews: {
-                insertIntoDOM () {
+                initialize () {
-                    if (!document.body.contains(this.el)) {
+                    this.__super__.initialize.apply(this, arguments);
-                        const container = document.querySelector('#converse-embedded-chat');
+                    this.el.classList.add('converse-embedded');
-                        container.innerHTML = '';
-                        container.appendChild(this.el);
-                    }
-                    return this;
                }
            }
        },
@@ -53,6 +54,13 @@
            /* The initialize function gets called as soon as the plugin is
             * loaded by converse.js's plugin machinery.
             */
+            this._converse.api.settings.update({
+                'allow_logout': false, // No point in logging out when we have auto_login as true.
+                'allow_muc_invitations': false, // Doesn't make sense to allow because only
+                                                // roster contacts can be invited
+                'hide_muc_server': true, // Federation is disabled, so no use in
+                                         // showing the MUC server.
+            });
            const { _converse } = this;
            if (!_.isArray(_converse.auto_join_rooms)) {
                throw new Error("converse-muc-embedded: auto_join_rooms must be an Array");

--- a/src/converse-notification.js
+++ b/src/converse-notification.js
@@ -71,7 +71,7 @@
            };
            _converse.isMessageToHiddenChat = function (message) {
-                if (_.includes(['mobile', 'fullscreen'], _converse.view_mode)) {
+                if (_.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode)) {
                    const jid = Strophe.getBareJidFromJid(message.getAttribute('from'));
                    const model = _converse.chatboxes.get(jid);
                    if (!_.isNil(model)) {

--- a/src/converse-otr.js
+++ b/src/converse-otr.js
@@ -403,9 +403,10 @@
                toggleOTRMenu (ev) {
                    ev.stopPropagation();
+                    const { _converse } = this.__super__;
                    const menu = this.el.querySelector('.toggle-otr ul');
                    const elements = _.difference(
-                        document.querySelectorAll('.toolbar-menu'),
+                        _converse.root.querySelectorAll('.toolbar-menu'),
                        [menu]
                    );
                    utils.slideInAllElements(elements).then(

--- a/src/converse-profile.js
+++ b/src/converse-profile.js
@@ -79,7 +79,7 @@
                toggleOptions (ev) {
                    ev.preventDefault();
                    utils.slideInAllElements(
-                        document.querySelectorAll('#conversejs .contact-form-container')
+                        _converse.root.querySelectorAll('#conversejs .contact-form-container')
                    );
                    utils.slideToggleElement(this.el.querySelector("#target dd ul"));
                },

--- a/src/converse-roomslist.js
+++ b/src/converse-roomslist.js
@@ -176,7 +176,7 @@
                insertIntoControlBox () {
                    const controlboxview = _converse.chatboxviews.get('controlbox');
                    if (!_.isUndefined(controlboxview) &&
-                            !document.body.contains(this.el)) {
+                            !_converse.root.contains(this.el)) {
                        const container = controlboxview.el.querySelector('#chatrooms');
                        if (!_.isNull(container)) {
                            container.insertBefore(this.el, container.firstChild);

--- a/src/converse-singleton.js
+++ b/src/converse-singleton.js
@@ -4,7 +4,7 @@
 // Copyright (c) 2012-2017, JC Brand <jc@opkode.com>
 // Licensed under the Mozilla Public License (MPLv2)
 //
-/*global Backbone, define, window, document, JSON */
+/*global Backbone, define, window, JSON */
 /* converse-singleton
 * ******************
@@ -40,7 +40,7 @@
        dependencies: ['converse-muc', 'converse-controlbox', 'converse-rosterview'],
        enabled (_converse) {
-            return _.includes(['mobile', 'fullscreen'], _converse.view_mode);
+            return _.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode);
        },
        overrides: {