diff --git a/addons/im_livechat/__manifest__.py b/addons/im_livechat/__manifest__.py
index 5703bf19b67..21bd5cc9573 100644
--- a/addons/im_livechat/__manifest__.py
+++ b/addons/im_livechat/__manifest__.py
@@ -62,8 +62,7 @@ Help your customers with this chat, and analyse their feedback.
             'mail/static/src/services/messaging_service.js',
         ],
         'web.assets_backend': [
-            'im_livechat/static/src/js/im_livechat_channel_form_view.js',
-            'im_livechat/static/src/js/im_livechat_channel_form_controller.js',
+            'im_livechat/static/src/js/colors_reset_button/*',
             'im_livechat/static/src/js/im_livechat_chatbot_form_view.js',
             'im_livechat/static/src/js/im_livechat_chatbot_form_controller.js',
             'im_livechat/static/src/js/im_livechat_chatbot_step_form_view_dialog.js',
diff --git a/addons/im_livechat/static/src/js/colors_reset_button/colors_reset_button.js b/addons/im_livechat/static/src/js/colors_reset_button/colors_reset_button.js
new file mode 100644
index 00000000000..05921151955
--- /dev/null
+++ b/addons/im_livechat/static/src/js/colors_reset_button/colors_reset_button.js
@@ -0,0 +1,23 @@
+/** @odoo-module **/
+
+import { registry } from '@web/core/registry';
+import { standardWidgetProps } from "@web/views/widgets/standard_widget_props";
+
+const { Component } = owl;
+
+export class ColorsResetButton extends Component {
+    onColorsResetButtonClick() {
+        this.props.record.update(this.props.default_colors);
+    }
+}
+ColorsResetButton.template = `im_livechat.ColorsResetButton`;
+ColorsResetButton.props = {
+    ...standardWidgetProps,
+    default_colors: { type: Object },
+};
+ColorsResetButton.extractProps = ({ attrs }) => {
+    // Note: `options` should have `default_colors`. It's specified when using the widget.
+    return attrs.options;
+};
+
+registry.category('view_widgets').add('colors_reset_button', ColorsResetButton);
diff --git a/addons/im_livechat/static/src/js/colors_reset_button/colors_reset_button.xml b/addons/im_livechat/static/src/js/colors_reset_button/colors_reset_button.xml
new file mode 100644
index 00000000000..97144a1409b
--- /dev/null
+++ b/addons/im_livechat/static/src/js/colors_reset_button/colors_reset_button.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="im_livechat.ColorsResetButton" owl="1">
+        <button class="btn btn-link oe_edit_only" t-on-click="onColorsResetButtonClick" aria-label="Reset to default colors" title="Reset to default colors">
+            <span class="fa fa-refresh mb-4"/>
+        </button>
+    </t>
+
+</templates>
diff --git a/addons/im_livechat/static/src/js/im_livechat_channel_form_controller.js b/addons/im_livechat/static/src/js/im_livechat_channel_form_controller.js
deleted file mode 100644
index c89472a48af..00000000000
--- a/addons/im_livechat/static/src/js/im_livechat_channel_form_controller.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/** @odoo-module **/
-
-import FormController from 'web.FormController';
-
-const ImLivechatChannelFormController = FormController.extend({
-    events: Object.assign({}, FormController.prototype.events, {
-        'click .o_im_livechat_channel_form_button_colors_reset_button': '_onClickLivechatButtonColorsResetButton',
-        'click .o_im_livechat_channel_form_chat_window_colors_reset_button': '_onClickLivechatChatWindowColorsResetButton',
-    }),
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {Object} colorValues
-     */
-    async _updateColors(colorValues) {
-        for (const name in colorValues) {
-            this.$(`[name="${name}"] .o_field_color`).css('background-color', colorValues[name]);
-        }
-        const result = await this.model.notifyChanges(this.handle, colorValues);
-        this._updateRendererState(this.model.get(this.handle), { fieldNames: result });
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    async _onClickLivechatButtonColorsResetButton() {
-        await this._updateColors({
-            button_background_color: "#878787",
-            button_text_color: "#FFFFFF",
-        });
-    },
-    /**
-     * @private
-     */
-    async _onClickLivechatChatWindowColorsResetButton() {
-        await this._updateColors({
-            header_background_color: "#875A7B",
-            title_color: "#FFFFFF",
-        });
-    },
-});
-
-export default ImLivechatChannelFormController;
diff --git a/addons/im_livechat/static/src/js/im_livechat_channel_form_view.js b/addons/im_livechat/static/src/js/im_livechat_channel_form_view.js
deleted file mode 100644
index 15e90f60d38..00000000000
--- a/addons/im_livechat/static/src/js/im_livechat_channel_form_view.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/** @odoo-module **/
-
-import ImLivechatChannelFormController from '@im_livechat/js/im_livechat_channel_form_controller';
-
-import FormView from 'web.FormView';
-import viewRegistry from 'web.view_registry';
-
-const ImLivechatChannelFormView = FormView.extend({
-    config: Object.assign({}, FormView.prototype.config, {
-        Controller: ImLivechatChannelFormController,
-    }),
-});
-
-viewRegistry.add('im_livechat_channel_form_view_js', ImLivechatChannelFormView);
-
-export default ImLivechatChannelFormView;
diff --git a/addons/im_livechat/views/im_livechat_channel_views.xml b/addons/im_livechat/views/im_livechat_channel_views.xml
index b0f535abc08..7180c0df23f 100644
--- a/addons/im_livechat/views/im_livechat_channel_views.xml
+++ b/addons/im_livechat/views/im_livechat_channel_views.xml
@@ -69,7 +69,7 @@
             <field name="name">im_livechat.channel.form</field>
             <field name="model">im_livechat.channel</field>
             <field name="arch" type="xml">
-                <form js_class="im_livechat_channel_form_view_js">
+                <form>
                     <header>
                         <button type="object" name="action_join" class="oe_highlight" string="Join Channel" attrs='{"invisible": [["are_you_inside", "=", True]]}'/>
                         <button type="object" name="action_quit" string="Leave Channel" attrs='{"invisible": [["are_you_inside", "=", False]]}'/>
@@ -130,9 +130,7 @@
                                         <div class="o_livechat_layout_colors d-flex align-items-center align-middle">
                                             <field name="button_background_color" widget="color" class="mb-4 w-auto o_im_livechat_field_widget_color"/>
                                             <field name="button_text_color" widget="color" class="mb-4 w-auto o_im_livechat_field_widget_color"/>
-                                            <button class="btn btn-link oe_edit_only o_im_livechat_channel_form_button_colors_reset_button" aria-label="Reset to default colors" title="Reset to default colors">
-                                                <span class="fa fa-refresh mb-4"/>
-                                            </button>
+                                            <widget name="colors_reset_button" options="{'default_colors': {'button_background_color': '#878787', 'button_text_color': '#FFFFFF'}}" />
                                         </div>
                                     </group>
                                     <group string="Livechat Window">
@@ -142,9 +140,7 @@
                                         <div class="o_livechat_layout_colors d-flex align-items-center align-middle">
                                             <field name="header_background_color" widget="color" class="mb-4 w-auto o_im_livechat_field_widget_color"/>
                                             <field name="title_color" widget="color" class="mb-4 w-auto o_im_livechat_field_widget_color"/>
-                                            <button class="btn btn-link oe_edit_only o_im_livechat_channel_form_chat_window_colors_reset_button" aria-label="Reset to default colors" title="Reset to default colors">
-                                                <span class="fa fa-refresh mb-4"/>
-                                            </button>
+                                            <widget name="colors_reset_button" options="{'default_colors': {'header_background_color': '#875A7B', 'title_color': '#FFFFFF'}}" />
                                         </div>
                                     </group>
                                 </group>