Merge branch 'webcomponent-embedded'

08a76d8a · JC Brand · 2a2e4688 · 4e599600 · 08a76d8a · 08a76d8a
Commit 08a76d8a authored Feb 14, 2018 by JC Brand
27 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
@@ -9,7 +9,7 @@ CHROMIUM		?= ./node_modules/.bin/run-headless-chromium
 CLEANCSS		?= ./node_modules/clean-css-cli/bin/cleancss --skip-rebase
 ESLINT		  	?= ./node_modules/.bin/eslint
 HTTPSERVE	   	?= ./node_modules/.bin/http-server
-HTTPSERVE_PORT	        ?= 8000
+HTTPSERVE_PORT  ?= 8000
 PAPER		   	=
 PO2JSON		 	?= ./node_modules/.bin/po2json
 RJS			 	?= ./node_modules/.bin/r.js
@@ -131,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
@@ -157,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
+        bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
-        whitelisted_plugins: ['converse-muc-embedded'],
+        jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
-        // Blacklist plugins which aren't included in the build file, 
+                          // allow chatting with other XMPP servers).
-        // 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
+        view_mode: 'embedded',
-        jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
-                            // allow chatting with other XMPP servers).
-        keepalive: true,
-        hide_muc_server: true, // Federation is disabled, so no use in
-                                // showing the MUC server.
-        play_sounds: true,
-        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
@@ -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
 -------------
@@ -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

--- 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: {