diff --git a/src/converse-chatview.js b/src/converse-chatview.js
index a4d924703..ccfa559c2 100644
--- a/src/converse-chatview.js
+++ b/src/converse-chatview.js
@@ -753,18 +753,24 @@
                             return;
                         }
                     }
-                    let fullname = _converse.xmppstatus.get('fullname');
-                    fullname = _.isEmpty(fullname)? _converse.bare_jid: fullname;
-
-                    const message = this.model.messages.create({
-                        fullname,
-                        sender: 'me',
-                        time: moment().format(),
-                        message: emojione.shortnameToUnicode(text)
-                    });
+                    const attrs = this.getOutgoingMessageAttributes(text)
+                    const message = this.model.messages.create(attrs);
                     this.sendMessage(message);
                 },
 
+                getOutgoingMessageAttributes (text) {
+                    /* Overridable method which returns the attributes to be
+                     * passed to Backbone.Message's constructor.
+                     */
+                    const fullname = _converse.xmppstatus.get('fullname');
+                    return {
+                        'fullname': _.isEmpty(fullname) ? _converse.bare_jid : fullname,
+                        'sender': 'me',
+                        'time': moment().format(),
+                        'message': emojione.shortnameToUnicode(text)
+                    }
+                },
+
                 sendChatState () {
                     /* Sends a message with the status of the user in this chat session
                      * as taken from the 'chat_state' attribute of the chat box.
diff --git a/src/converse-spoilers.js b/src/converse-spoilers.js
index 92aae5ba2..e20e9feea 100644
--- a/src/converse-spoilers.js
+++ b/src/converse-spoilers.js
@@ -61,11 +61,20 @@
                     return result;
                 },
 
-                isEditSpoilerMessage () {
-                    return this.el.querySelector('.toggle-spoiler-edit').getAttribute('active') === 'true';
+                getOutgoingMessageAttributes (text) {
+                    debugger;
+                    const { __ } = this.__super__._converse,
+                          attrs = this.__super__.getOutgoingMessageAttributes.apply(this, arguments);
+
+                    if (this.model.get('sending_spoiler')) {
+                        const spoiler = this.el.querySelector('.chat-textarea-hint')
+                        attrs.is_spoiler = true;
+                        attrs.spoiler_hint = spoiler.textContent.length > 0 ? spoiler.textContent : __('Spoiler');
+                    }
+                    return attrs;
                 },
 
-                'toggleSpoilerMessage': function (event) {
+                toggleSpoilerMessage (event) {
                     const { _converse } = this.__super__,
                           { __ } = _converse;
 
@@ -109,7 +118,7 @@
                     return hintTextArea;
                 },
 
-                'toggleEditSpoilerMessage': function () {
+                toggleEditSpoilerMessage () {
                     const { _converse } = this.__super__,
                           { __ } = _converse;
 
@@ -117,10 +126,10 @@
                     const textArea = this.el.querySelector('.chat-textarea');
                     const spoiler_button = this.el.querySelector('.toggle-spoiler-edit');
 
-                    if (this.isEditSpoilerMessage()) {
+                    if (this.model.get('sending_spoiler')) {
                         textArea.style['background-color'] = '';
                         textArea.setAttribute('placeholder', __('Personal message'));
-                        spoiler_button.setAttribute("active", "false");
+                        this.model.set('sending_spoiler', false);
                         spoiler_button.innerHTML = '<a class="icon-eye" title="' + __('Click here to write a message as a spoiler') + '"></a>'; // better get the element <a></a> and change the class?
                         const hintTextArea = document.querySelector('.chat-textarea-hint');
                         if ( hintTextArea ) {
@@ -129,7 +138,7 @@
                     } else {
                         textArea.style['background-color'] = '#D5FFD2';
                         textArea.setAttribute('placeholder', __('Write your spoiler\'s content here'));
-                        spoiler_button.setAttribute("active", "true");
+                        this.model.set('sending_spoiler', true);
                         // TODO template
                         spoiler_button.innerHTML = '<a class="icon-eye-blocked" title="' + __('Cancel writing spoiler message') + '"></a>';
                         // better get the element <a></a> and change the class?
@@ -139,7 +148,7 @@
                 },
 
                 addSpoilerElement (stanza) {
-                    if (this.isEditSpoilerMessage()) {
+                    if (this.model.get('sending_spoiler')) {
                         const has_hint = this.el.querySelector('.chat-textarea-hint').value.length > 0;
                         if (has_hint) {
                             const hint = document.querySelector('.chat-textarea-hint').value;
diff --git a/src/templates/spoiler_button.html b/src/templates/spoiler_button.html
index 2f25ddb57..d59c0d4e4 100644
--- a/src/templates/spoiler_button.html
+++ b/src/templates/spoiler_button.html
@@ -1,3 +1,3 @@
-<li class="toggle-spoiler-edit" data-active="false">
+<li class="toggle-spoiler-edit">
     <a class="icon-eye" title="{{ o.title }}"></a>
 </li>