diff --git a/addons/mass_mailing/data/mass_mailing_demo.xml b/addons/mass_mailing/data/mass_mailing_demo.xml
index 802a1ec6b4c..deb37b23398 100644
--- a/addons/mass_mailing/data/mass_mailing_demo.xml
+++ b/addons/mass_mailing/data/mass_mailing_demo.xml
@@ -81,7 +81,7 @@
             <tr>
                 <td class="o_mail_no_resize o_not_editable" style="text-align:left;"> </td>
                 <td class="o_mail_no_options o_mail_wrapper_td oe_structure" style="text-align:left;width:100%;">
-                    <div class="o_mail_block_header_logo">
+                    <div class="o_mail_block_header_logo" data-snippet="s_mail_block_header_logo">
                         <div class="o_mail_snippet_general" style="margin:0px auto 0px auto;background-color:rgb(255, 255, 255);max-width:600px;width:100%;">
                             <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles o_mail_h_padding" style="padding:0 20px 0 20px;width:100%;border-collapse:separate;">
                                 <tbody>
@@ -96,7 +96,7 @@
                             </table>
                         </div>
                     </div>
-                    <div class="o_mail_block_footer_separator" style="margin:0 20px 0 20px;">
+                    <div class="o_mail_block_footer_separator" data-snippet="s_mail_block_footer_separator" style="margin:0 20px 0 20px;">
                         <div class="o_mail_snippet_general" style="margin:0px auto 0px auto;background-color:rgb(255, 255, 255);max-width:600px;width:100%;">
                             <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding" style="width:100%;border-collapse:separate;">
                                 <tbody>
@@ -109,7 +109,7 @@
                             </table>
                         </div>
                     </div>
-                    <div class="o_mail_block_paragraph">
+                    <div class="o_mail_block_paragraph" data-snippet="s_mail_block_paragraph">
                         <div class="o_mail_snippet_general" style="margin:0px auto 0px auto;background-color:rgb(255, 255, 255);max-width:600px;width:100%;">
                             <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles" style="width:100%;border-collapse:separate;">
                                 <tbody>
@@ -125,13 +125,14 @@
                             </table>
                         </div>
                     </div>
-                    <div class="o_mail_block_footer_social o_mail_footer_social_center">
+                    <div class="o_mail_block_footer_social o_mail_footer_social_center" data-snippet="s_mail_block_footer_social">
                         <div class="o_mail_snippet_general" style="margin:0px auto 0px auto;background-color:rgb(255, 255, 255);max-width:600px;width:100%;">
                             <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding" style="border-style:solid none none none;padding:20px 0 20px 0;border-top-color:rgb(245, 245, 245);border-top-width:2px;width:100%;border-collapse:separate;">
                                 <tbody>
                                     <tr>
                                         <td class="o_mail_footer_links o_default_snippet_text" style="padding:10px 0 10px 0;text-align:center;vertical-align:middle;">
-                                            <a href="/unsubscribe_from_list" class="btn btn-link o_default_snippet_text" style="text-decoration:none;border-radius:0.25rem;border-style:solid;padding:0px;cursor:pointer;line-height:1.5;font-size:12px;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;border-top-color:transparent;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-width:1px;user-select:none;vertical-align:middle;white-space:nowrap;text-align:center;font-weight:bold;display:inline-block;background-color:transparent;color:rgb(100, 89, 116);">Unsubscribe</a> | 
+                                            <a href="/unsubscribe_from_list" class="btn btn-link o_default_snippet_text" style="text-decoration:none;border-radius:0.25rem;border-style:solid;padding:0px;cursor:pointer;line-height:1.5;font-size:12px;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;border-top-color:transparent;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-width:1px;user-select:none;vertical-align:middle;white-space:nowrap;text-align:center;font-weight:bold;display:inline-block;background-color:transparent;color:rgb(100, 89, 116);">Unsubscribe</a> |
+
                                             <a href="/contactus" class="btn btn-link o_default_snippet_text" style="text-decoration:none;border-radius:0.25rem;border-style:solid;padding:0px;cursor:pointer;line-height:1.5;font-size:12px;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;border-top-color:transparent;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-width:1px;user-select:none;vertical-align:middle;white-space:nowrap;text-align:center;font-weight:bold;display:inline-block;background-color:transparent;color:rgb(100, 89, 116);">Contact</a>
                                         </td>
                                     </tr>
diff --git a/addons/mass_mailing/views/themes_templates.xml b/addons/mass_mailing/views/themes_templates.xml
index f57c4500908..812de3c7964 100644
--- a/addons/mass_mailing/views/themes_templates.xml
+++ b/addons/mass_mailing/views/themes_templates.xml
@@ -14,7 +14,7 @@
 
     <!-- Default Theme -->
     <template id="theme_default_template">
-        <div class="o_mail_block_header_logo mb16">
+        <div class="o_mail_block_header_logo mb16" data-snippet="s_mail_block_header_logo">
             <div class="o_mail_snippet_general">
                 <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles o_mail_h_padding">
                     <tr>
@@ -29,7 +29,7 @@
                 </table>
             </div>
         </div>
-        <t t-call="mass_mailing.s_mail_block_title_text" />
-        <t t-call="mass_mailing.s_mail_block_footer_social_left"/>
+        <t t-snippet-call="mass_mailing.s_mail_block_title_text" />
+        <t t-snippet-call="mass_mailing.s_mail_block_footer_social_left"/>
     </template>
 </odoo>
diff --git a/addons/web_editor/models/ir_qweb.py b/addons/web_editor/models/ir_qweb.py
index 908035b855c..fdc5407e6f0 100644
--- a/addons/web_editor/models/ir_qweb.py
+++ b/addons/web_editor/models/ir_qweb.py
@@ -47,10 +47,25 @@ class QWeb(models.AbstractModel):
 
     # compile directives
 
+    def _compile_node(self, el, options):
+        if options.get('snippet-key') == options['template']:
+            # Get the path of the template's content
+            path = options['root'].getpath(el).replace('/t', '')
+            # Only append the template key on template's first node.
+            # If it already has a data-snippet it is a saved snippet.
+            # Do not override it.
+            size = len(path.split('/'))
+            if size == 2 and 'data-snippet' not in el.attrib:
+                el.attrib['data-snippet'] = options['template'].split('.', 1)[-1]
+
+        return super()._compile_node(el, options)
+
     def _compile_directive_snippet(self, el, options):
-        el.set('t-call', el.attrib.pop('t-snippet'))
+        key = el.attrib.pop('t-snippet')
+        el.set('t-call', key)
+        el.set('t-call-options', "{'snippet-key': '" + key + "'}")
         View = self.env['ir.ui.view']
-        view_id = View.get_view_id(el.attrib.get('t-call'))
+        view_id = View.get_view_id(key)
         name = View.browse(view_id).name
         thumbnail = el.attrib.pop('t-thumbnail', "oe-thumbnail")
         div = u'<div name="%s" data-oe-type="snippet" data-oe-thumbnail="%s" data-oe-snippet-id="%s">' % (
@@ -60,6 +75,12 @@ class QWeb(models.AbstractModel):
         )
         return [self._append(ast.Str(div))] + self._compile_node(el, options) + [self._append(ast.Str(u'</div>'))]
 
+    def _compile_directive_snippet_call(self, el, options):
+        key = el.attrib.pop('t-snippet-call')
+        el.set('t-call', key)
+        el.set('t-call-options', "{'snippet-key': '" + key + "'}")
+        return self._compile_node(el, options)
+
     def _compile_directive_install(self, el, options):
         if self.user_has_groups('base.group_system'):
             module = self.env['ir.module.module'].search([('name', '=', el.attrib.get('t-install'))])
@@ -86,6 +107,7 @@ class QWeb(models.AbstractModel):
     def _directives_eval_order(self):
         directives = super(QWeb, self)._directives_eval_order()
         directives.insert(directives.index('call'), 'snippet')
+        directives.insert(directives.index('call'), 'snippet-call')
         directives.insert(directives.index('call'), 'install')
         return directives
 
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 07b5ab5f4bf..69baddaefe4 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -808,6 +808,7 @@ var SnippetsMenu = Widget.extend({
         'cover_update': '_onOverlaysCoverUpdate',
         'deactivate_snippet': '_onDeactivateSnippet',
         'drag_and_drop_stop': '_onDragAndDropStop',
+        'get_snippet_versions': '_onGetSnippetVersions',
         'go_to_parent': '_onGoToParent',
         'remove_snippet': '_onRemoveSnippet',
         'snippet_edition_request': '_onSnippetEditionRequest',
@@ -2092,6 +2093,18 @@ var SnippetsMenu = Widget.extend({
             }],
         }).open();
     },
+    /**
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onGetSnippetVersions: function (ev) {
+        const snippet = this.el.querySelector(`.oe_snippet > [data-snippet="${ev.data.snippetName}"]`);
+        ev.data.onSuccess(snippet && {
+            vcss: snippet.dataset.vcss,
+            vjs: snippet.dataset.vjs,
+            vxml: snippet.dataset.vxml,
+        });
+    },
     /**
      * @private
      */
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 2bb4dfc429d..401665b8559 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3097,6 +3097,29 @@ registry.many2one = SnippetOptionWidget.extend({
     }
 });
 
+/**
+ * Allows to display a warning message on outdated snippets.
+ */
+registry.VersionControl = SnippetOptionWidget.extend({
+    xmlDependencies: ['/web_editor/static/src/xml/snippets.xml'],
+
+    /**
+     * @override
+     */
+    start: function () {
+        this.trigger_up('get_snippet_versions', {
+            snippetName: this.$target[0].dataset.snippet,
+            onSuccess: snippetVersions => {
+                const isUpToDate = snippetVersions && ['vjs', 'vcss', 'vxml'].every(key => this.$target[0].dataset[key] === snippetVersions[key]);
+                if (!isUpToDate) {
+                    this.$el.prepend(qweb.render('web_editor.outdated_block_message'));
+                }
+            },
+        });
+        return this._super(...arguments);
+    },
+});
+
 /**
  * Handle the save of a snippet as a template that can be reused later
  */
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 7091f7c04cf..cac357a4af3 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -15,6 +15,7 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
     --o-we-dropdown-color: #{$o-we-dropdown-color};
 
     --o-we-snippets-bg-color: #{$o-we-bg-color};
+    --o-we-snippets-bg-info: #{$o-we-color-info};
     --o-we-snippets-color: #{$o-we-color};
 }
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 1a3806ed5f6..d0c6026dfa8 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -328,6 +328,19 @@ body.editor_enable.editor_has_snippets {
                 // FIXME temporary fix for m2o option for example
                 position: static !important;
             }
+
+            > we-alert {
+                background-color: var(--o-we-snippets-bg-info);
+                display: block;
+                margin: -.5em;
+                padding: .5em;
+
+                we-title {
+                    margin-bottom: 0.5em;
+                    text-transform: uppercase;
+                    font-weight: bold;
+                }
+            }
         }
 
         //----------------------------------------------------------------------
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index 1e962589c4e..a240431b6e8 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -34,6 +34,12 @@
             </we-title>
         </we-customizeblock-options>
     </t>
+    <t t-name="web_editor.outdated_block_message">
+        <we-alert>
+            <we-title>This block is outdated</we-title>
+            <span>To make changes, drop this block and use the new options in the last version.</span>
+        </we-alert>
+    </t>
 
     <!-- options -->
     <div t-name="web_editor.snippet.option.colorpicker" class="colorpicker">
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 5ba6583ecf1..c9b8391ae53 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -46,6 +46,9 @@
 
     <div data-selector=".s_hr"
          data-drop-near="p, h1, h2, h3, blockquote, .s_hr"/>
+
+    <div data-js="VersionControl"
+         data-selector="[data-snippet]"/>
 </template>
 
 <!-- default block -->
diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index 6c4f631e5ed..6eeb05326f8 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -25,7 +25,7 @@
                     <t t-call="website.layout">
                         <div id="wrap">
                             <div class="oe_structure">
-                                <section class="s_title pt24 pb24" data-vcss="001">
+                                <section class="s_title pt24 pb24" data-vcss="001" data-snippet="s_title">
                                     <div class="container">
                                         <h1>Contact us</h1>
                                     </div>
@@ -35,7 +35,7 @@
                                 <div class="row">
                                     <div class="col-lg-8">
                                         <div class="oe_structure">
-                                            <section class="s_text_block">
+                                            <section class="s_text_block" data-snippet="s_text_block">
                                                 <div class="container">
                                                     <div class="row">
                                                         <div class="col-lg-12">
@@ -73,13 +73,13 @@
                     <t t-call="website.layout">
                         <div id="wrap">
                             <div class="oe_structure">
-                                <section class="s_title pt24 pb24" data-vcss="001">
+                                <section class="s_title pt24 pb24" data-vcss="001" data-snippet="s_title">
                                     <div class="container">
                                         <h1 class="text-center">About us</h1>
                                         <h3 class="text-muted text-center">Great products for great people</h3>
                                     </div>
                                 </section>
-                                <section class="s_text_image pt8 pb8">
+                                <section class="s_text_image pt8 pb8" data-snippet="s_text_image">
                                     <div class="container">
                                         <div class="row align-items-center">
                                             <div class="col-lg-6 pt16 pb16">
diff --git a/addons/website/static/src/xml/website.s_countdown.xml b/addons/website/static/src/xml/website.s_countdown.xml
index be94a0785ea..6a380ebad00 100644
--- a/addons/website/static/src/xml/website.s_countdown.xml
+++ b/addons/website/static/src/xml/website.s_countdown.xml
@@ -9,7 +9,7 @@
                 The following message will become visible <strong>only</strong> once the countdown ends.
             </div>
             <div class="oe_structure">
-                <section class="s_picture bg-200">
+                <section class="s_picture bg-200" data-snippet="s_picture">
                     <div class="container">
                         <div class="row">
                             <div class="col-12 pt16">
diff --git a/addons/website/static/tests/tours/snippet_version.js b/addons/website/static/tests/tours/snippet_version.js
new file mode 100644
index 00000000000..7bbf3e7b0cb
--- /dev/null
+++ b/addons/website/static/tests/tours/snippet_version.js
@@ -0,0 +1,71 @@
+odoo.define("website.tour.snippet_version", function (require) {
+"use strict";
+
+var tour = require("web_tour.tour");
+
+tour.register("snippet_version", {
+    test: true,
+    url: "/",
+}, [{
+    content: "Enter edit mode",
+    trigger: 'a[data-action=edit]',
+}, {
+    content: "Drop s_carousel snippet",
+    trigger: '#oe_snippets .oe_snippet:has(.s_carousel) .oe_snippet_thumbnail',
+    run: "drag_and_drop #wrap",
+}, {
+    content: "Drop s_carousel snippet",
+    trigger: '#oe_snippets .oe_snippet:has(.s_text_image) .oe_snippet_thumbnail',
+    run: "drag_and_drop #wrap",
+}, {
+    content: "Test t-snippet and t-snippet-call: snippets have data-snippet set",
+    trigger: '#oe_snippets .o_panel_body > .oe_snippet.ui-draggable',
+    run: function () {
+        // Tests done here as all these are not visible on the page
+        const draggableSnippets = document.querySelectorAll('#oe_snippets .o_panel_body > .oe_snippet.ui-draggable > :nth-child(2)');
+        if (![...draggableSnippets].every(el => el.dataset.snippet)) {
+            console.error("error Some t-snippet are missing their template name");
+        }
+        // Currently only s_share is t-snippet-call, if it's removed find a way to keep t-snippet-call tested !!.
+        if (!document.querySelector('#oe_snippets [data-snippet="s_carousel"] [data-snippet="s_share"]')) {
+            console.error("error s_share t-called inside s_carousel is missing template name");
+        }
+        if (!document.querySelector('#wrap [data-snippet="s_carousel"] [data-snippet="s_share"]')) {
+            console.error("error Dropped a s_carousel snippet but missing s_share template name in it");
+        }
+    },
+}, {
+    content: "Enter edit mode",
+    trigger: 'button[data-action="save"]',
+}, {
+    content: "Enter edit mode",
+    extra_trigger: 'body:not(.editor_enable)',
+    trigger: 'a[data-action=edit]',
+}, {
+    content: "Modify the version of snippets",
+    trigger: '#oe_snippets .o_panel_body > .oe_snippet',
+    run: function () {
+        document.querySelector('#oe_snippets .oe_snippet > [data-snippet="s_carousel"]').dataset.vjs = '999';
+        document.querySelector('#oe_snippets .oe_snippet > [data-snippet="s_share"]').dataset.vcss = '999';
+        document.querySelector('#oe_snippets .oe_snippet > [data-snippet="s_text_image"]').dataset.vxml = '999';
+    },
+}, {
+    content: "Edit carousel",
+    trigger: '#wrap.o_editable .s_carousel',
+}, {
+    content: "Edit text_image",
+    extra_trigger: 'we-customizeblock-options:contains(Carousel) .snippet-option-VersionControl > we-alert',
+    trigger: '#wrap.o_editable .s_text_image',
+}, {
+    content: "Got to s_share slide",
+    extra_trigger: 'we-customizeblock-options:contains(Text - Image) .snippet-option-VersionControl  > we-alert',
+    trigger: '#wrap.o_editable .s_carousel .carousel-control-prev',
+}, {
+    content: "Edit s_share",
+    trigger: '#wrap.o_editable .s_share',
+}, {
+    content: "s_share is outdated",
+    extra_trigger: 'we-customizeblock-options:contains(Share) .snippet-option-VersionControl > we-alert',
+    trigger: 'body',
+}]);
+});
diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py
index c8b1725062d..78f20e62d71 100644
--- a/addons/website/tests/test_ui.py
+++ b/addons/website/tests/test_ui.py
@@ -152,3 +152,6 @@ class TestUi(odoo.tests.HttpCase):
             </t>
         """
         self.start_tour("/", "public_user_editor", login=None)
+
+    def test_07_snippet_version(self):
+        self.start_tour("/", 'snippet_version', login='admin')
diff --git a/addons/website/views/assets.xml b/addons/website/views/assets.xml
index 029c17ab43a..79a723289d2 100644
--- a/addons/website/views/assets.xml
+++ b/addons/website/views/assets.xml
@@ -27,6 +27,7 @@
         <script type="text/javascript" src="/website/static/tests/tours/specific_website_editor.js"/>
         <script type="text/javascript" src="/website/static/tests/tours/public_user_editor.js"/>
         <script type="text/javascript" src="/website/static/tests/tours/website_navbar_menu.js"/>
+        <script type="text/javascript" src="/website/static/tests/tours/snippet_version.js"/>
     </xpath>
 </template>
 
diff --git a/addons/website/views/snippets/s_carousel.xml b/addons/website/views/snippets/s_carousel.xml
index a405747ea04..f081c71dd23 100644
--- a/addons/website/views/snippets/s_carousel.xml
+++ b/addons/website/views/snippets/s_carousel.xml
@@ -2,7 +2,7 @@
 <odoo>
 
 <template id="s_carousel" name="Carousel">
-    <section class="s_carousel_wrapper">
+    <section class="s_carousel_wrapper" data-vxml="001">
         <div id="myCarousel" class="s_carousel s_carousel_default carousel slide" data-interval="10000">
             <!-- Indicators -->
             <ol class="carousel-indicators">
@@ -33,7 +33,7 @@
                         <div class="row content">
                             <div class="carousel-content col-lg-8 offset-lg-2 bg-black-50 text-center pt48 pb40">
                                 <h2 style="font-size: 62px;">Clever Slogan</h2>
-                                <div class="s_hr pt8 pb32">
+                                <div class="s_hr pt8 pb32" data-snippet="s_hr">
                                     <hr class="s_hr_5px s_hr_dotted border-600 w-25 border-epsilon mx-auto text-center"/>
                                 </div>
                                 <p class="lead">Storytelling is powerful.<br/> It draws readers in and engages them.</p>
@@ -50,7 +50,7 @@
                                 <h2><font style="font-size: 62px; background-color: rgb(255, 255, 255);">Edit this title</font></h2>
                                 <h4><font style="background-color: rgb(255, 255, 255);">Good writing is simple, but not simplistic.</font></h4>
                                 <p class="mt24">Good copy starts with understanding how your product or service helps your customers. Simple words communicate better than big words and pompous language.</p>
-                                <t t-call="website.s_share">
+                                <t t-snippet-call="website.s_share">
                                     <t t-set="_classes" t-value="'text-left pt16 pb16'"/>
                                     <t t-set="_no_title" t-value="True"/>
                                 </t>
diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml
index 12e71dc2444..d75431b304f 100644
--- a/addons/website/views/snippets/s_media_list.xml
+++ b/addons/website/views/snippets/s_media_list.xml
@@ -30,10 +30,10 @@
                 </div>
                 <div class="col-lg-8 s_media_list_body">
                     <h3>Post heading</h3>
-                    <span class="s_badge badge bg-gamma" data-name="Badge">
+                    <span class="s_badge badge bg-gamma" data-name="Badge" data-snippet="s_badge">
                         <i class="fa fa-1x fa-fw fa-clock-o"/>3 months ago
                     </span>
-                    <span class="s_badge badge bg-gamma" data-name="Badge">
+                    <span class="s_badge badge bg-gamma" data-name="Badge" data-snippet="s_badge">
                         <i class="fa fa-1x fa-fw fa-user"/>by John DOE
                     </span>
                     <p>Use this component for creating a list of featured elements to which you want to bring attention.</p>
diff --git a/addons/website/views/snippets/s_popup.xml b/addons/website/views/snippets/s_popup.xml
index 98a77eaeff3..2e9950f3e73 100644
--- a/addons/website/views/snippets/s_popup.xml
+++ b/addons/website/views/snippets/s_popup.xml
@@ -8,7 +8,7 @@
             <div class='modal-dialog modal-dialog-centered s_popup_frame modal-md'>
                 <div class='oe_structure modal-content s_popup_content oe_img_bg oe_custom_bg' style="background-color: #FFFFFF">
                     <div class='js_close_popup s_popup_close o_we_no_overlay o_not_editable'>&amp;times;</div>
-                    <section class="s_banner parallax pt96 pb96">
+                    <section class="s_banner parallax pt96 pb96" data-snippet="s_banner">
                         <span class="s_parallax_bg oe_img_bg oe_custom_bg" style="background-image: url('/web/image/website.s_banner_default_image');"></span>
                         <div class="container">
                             <div class="row s_nb_column_fixed">
diff --git a/addons/website/views/snippets/s_quotes_carousel.xml b/addons/website/views/snippets/s_quotes_carousel.xml
index 0c3c430b3dd..7187384b1fc 100644
--- a/addons/website/views/snippets/s_quotes_carousel.xml
+++ b/addons/website/views/snippets/s_quotes_carousel.xml
@@ -2,7 +2,7 @@
 <odoo>
 
 <template id="s_quotes_carousel" name="Quotes">
-    <section class="s_quotes_carousel_wrapper">
+    <section class="s_quotes_carousel_wrapper" data-vxml="001">
         <div id="myQuoteCarousel" class="s_quotes_carousel s_carousel_default carousel slide" data-interval="10000">
             <!-- Indicators -->
             <ol class="carousel-indicators">
diff --git a/addons/website/views/snippets/s_timeline.xml b/addons/website/views/snippets/s_timeline.xml
index 15dff39dec6..32e58729116 100644
--- a/addons/website/views/snippets/s_timeline.xml
+++ b/addons/website/views/snippets/s_timeline.xml
@@ -7,7 +7,7 @@
             <div class="s_timeline_row d-block d-md-flex flex-row" data-name="Row">
                 <div class="s_timeline_date"><span class="bg-white"><b>2019</b></span></div>
                 <div class="s_timeline_content d-flex">
-                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card">
+                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
                         <div class="card-body">
                             <h5 class="card-title">Your title</h5>
                             <p class="card-text">A timeline is a graphical representation on which important events are marked.</p>
@@ -20,7 +20,7 @@
             <div class="s_timeline_row d-block d-md-flex flex-row" data-name="Row">
                 <div class="s_timeline_date"><span class="bg-white"><b>2018</b></span></div>
                 <div class="s_timeline_content d-flex">
-                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card">
+                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
                         <div class="card-body">
                             <p class="card-text">You can edit, duplicate...</p>
                         </div>
@@ -29,7 +29,7 @@
                 </div>
                 <div class="s_timeline_content d-flex">
                     <i class="fa fa-1x fa-asterisk bg-beta rounded-circle s_timeline_icon"/>
-                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card">
+                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
                         <div class="card-body">
                             <p class="card-text">...and switch the timeline contents to fit your needs.</p>
                         </div>
@@ -39,7 +39,7 @@
             <div class="s_timeline_row d-block d-md-flex flex-row-reverse" data-name="Row">
                 <div class="s_timeline_date"><span class="bg-white"><b>2015</b></span></div>
                 <div class="s_timeline_content d-flex">
-                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card">
+                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
                         <div class="card-body">
                             <p class="card-text">Use this timeline as a part of your resume, to show your visitors what you've done in the past.</p>
                         </div>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index c5d48edc67f..c54a789caf8 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -299,7 +299,7 @@
 <template id="footer_custom" inherit_id="website.layout" name="Footer">
     <xpath expr="//div[@id='footer']" position="replace">
         <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
-            <section class="s_text_block pt16 pb8">
+            <section class="s_text_block pt16 pb8" data-snippet="s_text_block">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4">
diff --git a/addons/website_crm/views/website_crm_templates.xml b/addons/website_crm/views/website_crm_templates.xml
index 957e14fd985..c48f6c77472 100644
--- a/addons/website_crm/views/website_crm_templates.xml
+++ b/addons/website_crm/views/website_crm_templates.xml
@@ -13,7 +13,7 @@
             </xpath>
             <xpath expr="//div[@id='contactus_section']" position="replace">
                 <div id="contactus_section">
-                    <section class="s_website_form" data-vcss="001">
+                    <section class="s_website_form" data-vcss="001" data-snippet="s_website_form">
                         <div class="container">
                             <form id="contactus_form" action="/website_form/" method="post" enctype="multipart/form-data" data-model_name="crm.lead" data-success-mode="redirect" data-success-page="/contactus-thank-you" class="o_mark_required" data-mark="*" data-editable-form="false">
                                 <div class="s_website_form_rows row s_col_no_bgcolor">
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index adc517eb938..911b6b7bcf2 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -337,7 +337,7 @@
 <template id="index_sidebar_country_event" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="Country Events" priority="70">
     <xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
         <div class="o_wevent_sidebar_block">
-            <t t-call="website_event.s_country_events"/>
+            <t t-snippet-call="website_event.s_country_events"/>
         </div>
     </xpath>
 </template>
@@ -496,7 +496,7 @@
                         <div class="o_wevent_sidebar_block">
                             <h6 class="o_wevent_sidebar_title">SHARE</h6>
                             <p class="mb-2">Find out what people see and say about this event, and join the conversation.</p>
-                            <t t-call="website.s_share">
+                            <t t-snippet-call="website.s_share">
                                 <t t-set="_no_title" t-value="True"/>
                                 <t t-set="_classes" t-valuef="o_wevent_sidebar_social mx-n1"/>
                                 <t t-set="_link_classes" t-valuef="o_wevent_social_link"/>
@@ -558,7 +558,7 @@
         <div id="o_wevent_tickets" class="bg-white shadow-sm o_wevent_js_ticket_details" data-folded-by-default="0">
             <t t-set="tickets" t-value="event.event_ticket_ids.filtered(lambda ticket: not ticket.is_expired)"/>
             <!-- If some tickets expired and there is only one type left, we keep the same layout -->
-            <t t-if="len(event.event_ticket_ids) &gt; 1"> 
+            <t t-if="len(event.event_ticket_ids) &gt; 1">
                 <div class="d-flex justify-content-between align-items-center py-2 pl-3 pr-2 border-bottom">
                     <div id="price-range" class="pr-3 d-none"/>
                     <span t-if="not event.event_registrations_open" class="text-danger">
@@ -783,7 +783,7 @@
 <!-- Multipage event - Default template for the Introduction page -->
 <template id="template_intro">
     <t t-call="website_event.layout">
-        <section class="s_title pt48 pb48" data-vcss="001">
+        <section class="s_title pt48 pb48" data-vcss="001" data-snippet="s_title">
             <div class="container">
                 <h1>Introduction</h1>
             </div>
diff --git a/addons/website_form/static/src/xml/website_form_editor.xml b/addons/website_form/static/src/xml/website_form_editor.xml
index 895c66d616b..6db59f01a22 100644
--- a/addons/website_form/static/src/xml/website_form_editor.xml
+++ b/addons/website_form/static/src/xml/website_form_editor.xml
@@ -8,7 +8,7 @@
                 The following message will become visible <strong>only</strong> once the form is sent.
             </div>
             <div class="oe_structure">
-                <section class="s_text_block pt64 pb64">
+                <section class="s_text_block pt64 pb64" data-snippet="s_text_block">
                     <div class="container">
                         <h2 class="text-center">Thank You For Your Feedback</h2>
                         <p class="text-center">
diff --git a/addons/website_form/views/snippets/s_website_form.xml b/addons/website_form/views/snippets/s_website_form.xml
index f26570541d7..56499210dd9 100644
--- a/addons/website_form/views/snippets/s_website_form.xml
+++ b/addons/website_form/views/snippets/s_website_form.xml
@@ -2,7 +2,7 @@
 <odoo>
 
 <template id="s_website_form" name="Form Builder">
-    <section class="s_website_form pt16 pb16" data-vcss="001">
+    <section class="s_website_form pt16 pb16" data-vcss="001" data-snippet="s_website_form">
         <div class="container">
             <form action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*">
                 <div class="s_website_form_rows row s_col_no_bgcolor">
diff --git a/addons/website_form/views/website_form_templates.xml b/addons/website_form/views/website_form_templates.xml
index 09dc2ae9f06..48837cdf776 100644
--- a/addons/website_form/views/website_form_templates.xml
+++ b/addons/website_form/views/website_form_templates.xml
@@ -5,7 +5,7 @@
         <xpath expr="//div[@name='mail_button']" position="replace">
             <span class="hidden" data-for="contactus_form" t-att-data-values="{'email_to': res_company.email}" />
             <div id="contactus_section">
-                <section class="s_website_form" data-vcss="001">
+                <section class="s_website_form" data-vcss="001" data-snippet="s_website_form">
                     <div class="container">
                         <form id="contactus_form" action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-model_name="mail.mail" data-success-mode="redirect" data-success-page="/contactus-thank-you">
                             <div class="s_website_form_rows row s_col_no_bgcolor">
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 0912658105e..e9a699cdf9f 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -50,7 +50,7 @@
 <!-- Page Index -->
 <template id="header" name="Forum Index">
     <t t-if="forum.active" t-call="website_forum.layout">
-        <section t-attf-class="s_cover parallax s_parallax_is_fixed py-3 #{forum.image_1920 and 'bg-black-50' or 'o_wforum_forum_card_bg text-white'}" data-scroll-background-ratio="1">
+        <section t-attf-class="s_cover parallax s_parallax_is_fixed py-3 #{forum.image_1920 and 'bg-black-50' or 'o_wforum_forum_card_bg text-white'}" data-scroll-background-ratio="1" data-snippet="s_cover">
             <span t-if="forum.image_1920" class="s_parallax_bg oe_img_bg" t-attf-style="background-image: url('#{website.image_url(forum, 'image_1920')}'); background-position: center;"/>
             <div class="container">
                 <div class="row s_nb_column_fixed">
@@ -470,7 +470,7 @@
 <template id="forum_all_oe_structure_forum_all_top" inherit_id="website_forum.forum_all" name="Forum Navigation (oe_structure_forum_all_top)">
     <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_forum_all_top']" position="replace">
         <div class="oe_structure oe_empty" id="oe_structure_forum_all_top">
-            <section class="s_cover parallax s_parallax_is_fixed bg-black-50 py-5" data-scroll-background-ratio="1">
+            <section class="s_cover parallax s_parallax_is_fixed bg-black-50 py-5" data-scroll-background-ratio="1" data-snippet="s_cover">
                 <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;"/>
                 <div class="container">
                     <div class="row s_nb_column_fixed">
diff --git a/addons/website_hr_recruitment/data/hr_job_demo.xml b/addons/website_hr_recruitment/data/hr_job_demo.xml
index b2fd2575424..88b3d3b06bf 100644
--- a/addons/website_hr_recruitment/data/hr_job_demo.xml
+++ b/addons/website_hr_recruitment/data/hr_job_demo.xml
@@ -20,7 +20,7 @@
                             </p>
                         </div>
                         <div class="col-lg-3 offset-lg-1 pb32">
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Customer Relationship</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -34,7 +34,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Personal Evolution</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -48,7 +48,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Autonomy</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -62,7 +62,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Administrative Work</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -76,7 +76,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Technical Expertise</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -95,7 +95,7 @@
                 </div>
             </section>
             <!-- Responsabilities, Must Have and Nice to have -->
-            <section class="s_comparisons pt24 pb24 bg-200">
+            <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -169,7 +169,7 @@
                 </div>
             </section>
             <!-- What we offer -->
-            <section class="s_features pt40 pb40 bg-200" data-name="Features">
+            <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
                 <div class="container">
                     <h2>What We Offer</h2>
                     <br/>
@@ -253,7 +253,7 @@
                             </p>
                         </div>
                         <div class="col-lg-3 offset-lg-1 pb32">
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Customer Relationship</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -267,7 +267,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Personal Evolution</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -281,7 +281,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Autonomy</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -295,7 +295,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Administrative Work</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -309,7 +309,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Technical Expertise</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -328,7 +328,7 @@
                 </div>
             </section>
             <!-- Responsabilities, Must Have and Nice to have -->
-            <section class="s_comparisons pt24 pb24 bg-200">
+            <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -402,7 +402,7 @@
                 </div>
             </section>
             <!-- What we offer -->
-            <section class="s_features pt40 pb40 bg-200" data-name="Features">
+            <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
                 <div class="container">
                     <h2>What We Offer</h2>
                     <br/>
@@ -486,7 +486,7 @@
                             </p>
                         </div>
                         <div class="col-lg-3 offset-lg-1 pb32">
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Customer Relationship</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -500,7 +500,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Personal Evolution</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -514,7 +514,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Autonomy</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -528,7 +528,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Administrative Work</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -542,7 +542,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Technical Expertise</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -561,7 +561,7 @@
                 </div>
             </section>
             <!-- Responsabilities, Must Have and Nice to have -->
-            <section class="s_comparisons pt24 pb24 bg-200">
+            <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -635,7 +635,7 @@
                 </div>
             </section>
             <!-- What we offer -->
-            <section class="s_features pt40 pb40 bg-200" data-name="Features">
+            <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
                 <div class="container">
                     <h2>What We Offer</h2>
                     <br/>
@@ -718,7 +718,7 @@
                             </p>
                         </div>
                         <div class="col-lg-3 offset-lg-1 pb32">
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Customer Relationship</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -732,7 +732,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Personal Evolution</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -746,7 +746,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Autonomy</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -760,7 +760,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Administrative Work</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -774,7 +774,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Technical Expertise</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -793,7 +793,7 @@
                 </div>
             </section>
             <!-- Responsabilities, Must Have and Nice to have -->
-            <section class="s_comparisons pt24 pb24 bg-200">
+            <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -867,7 +867,7 @@
                 </div>
             </section>
             <!-- What we offer -->
-            <section class="s_features pt40 pb40 bg-200" data-name="Features">
+            <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
                 <div class="container">
                     <h2>What We Offer</h2>
                     <br/>
@@ -950,7 +950,7 @@
                             </p>
                         </div>
                         <div class="col-lg-3 offset-lg-1 pb32">
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Customer Relationship</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -964,7 +964,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Personal Evolution</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -978,7 +978,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Autonomy</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -992,7 +992,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Administrative Work</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1006,7 +1006,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Technical Expertise</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1025,7 +1025,7 @@
                 </div>
             </section>
             <!-- Responsabilities, Must Have and Nice to have -->
-            <section class="s_comparisons pt24 pb24 bg-200">
+            <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -1099,7 +1099,7 @@
                 </div>
             </section>
             <!-- What we offer -->
-            <section class="s_features pt40 pb40 bg-200" data-name="Features">
+            <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
                 <div class="container">
                     <h2>What We Offer</h2>
                     <br/>
@@ -1182,7 +1182,7 @@
                             </p>
                         </div>
                         <div class="col-lg-3 offset-lg-1 pb32">
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Customer Relationship</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1196,7 +1196,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Personal Evolution</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1210,7 +1210,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Autonomy</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1224,7 +1224,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Administrative Work</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1238,7 +1238,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Technical Expertise</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1257,7 +1257,7 @@
                 </div>
             </section>
             <!-- Responsabilities, Must Have and Nice to have -->
-            <section class="s_comparisons pt24 pb24 bg-200">
+            <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -1331,7 +1331,7 @@
                 </div>
             </section>
             <!-- What we offer -->
-            <section class="s_features pt40 pb40 bg-200" data-name="Features">
+            <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
                 <div class="container">
                     <h2>What We Offer</h2>
                     <br/>
@@ -1414,7 +1414,7 @@
                             </p>
                         </div>
                         <div class="col-lg-3 offset-lg-1 pb32">
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Customer Relationship</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1428,7 +1428,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Personal Evolution</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1442,7 +1442,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Autonomy</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1456,7 +1456,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Administrative Work</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1470,7 +1470,7 @@
                                     </span>
                                 </div>
                             </div>
-                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                            <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                                 <h6 class="s_rating_title">Technical Expertise</h6>
                                 <div class="s_rating_icons o_not_editable">
                                     <span class="s_rating_active_icons text-primary">
@@ -1489,7 +1489,7 @@
                 </div>
             </section>
             <!-- Responsabilities, Must Have and Nice to have -->
-            <section class="s_comparisons pt24 pb24 bg-200">
+            <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
                 <div class="container">
                     <div class="row">
                         <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -1563,7 +1563,7 @@
                 </div>
             </section>
             <!-- What we offer -->
-            <section class="s_features pt40 pb40 bg-200" data-name="Features">
+            <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
                 <div class="container">
                     <h2>What We Offer</h2>
                     <br/>
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index ff76fd09a15..74918a3bc88 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -136,7 +136,7 @@
             </h2>
             <span class="hidden" data-for="hr_recruitment_form" t-att-data-values="{'department_id': job and job.department_id.id or '', 'job_id': job and job.id or ''}" />
             <div id="jobs_section">
-                <section id="forms" class="s_website_form" data-vcss="001">
+                <section id="forms" class="s_website_form" data-vcss="001" data-snippet="s_website_form">
                     <div class="container">
                         <form id="hr_recruitment_form" action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-model_name="hr.applicant" data-success-mode="redirect" data-success-page="/job-thank-you" hide-change-model="true">
                             <div class="s_website_form_rows row s_col_no_bgcolor">
@@ -247,7 +247,7 @@
                     </p>
                 </div>
                 <div class="col-lg-3 offset-lg-1 pb32">
-                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                         <h6 class="s_rating_title">Customer Relationship</h6>
                         <div class="s_rating_icons o_not_editable">
                             <span class="s_rating_active_icons text-primary">
@@ -261,7 +261,7 @@
                             </span>
                         </div>
                     </div>
-                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                         <h6 class="s_rating_title">Personal Evolution</h6>
                         <div class="s_rating_icons o_not_editable">
                             <span class="s_rating_active_icons text-primary">
@@ -275,7 +275,7 @@
                             </span>
                         </div>
                     </div>
-                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                         <h6 class="s_rating_title">Autonomy</h6>
                         <div class="s_rating_icons o_not_editable">
                             <span class="s_rating_active_icons text-primary">
@@ -289,7 +289,7 @@
                             </span>
                         </div>
                     </div>
-                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                         <h6 class="s_rating_title">Administrative Work</h6>
                         <div class="s_rating_icons o_not_editable">
                             <span class="s_rating_active_icons text-primary">
@@ -303,7 +303,7 @@
                             </span>
                         </div>
                     </div>
-                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star">
+                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                         <h6 class="s_rating_title">Technical Expertise</h6>
                         <div class="s_rating_icons o_not_editable">
                             <span class="s_rating_active_icons text-primary">
@@ -322,7 +322,7 @@
         </div>
     </section>
     <!-- Responsabilities, Must Have and Nice to have -->
-    <section class="s_comparisons pt24 pb24 bg-200">
+    <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
         <div class="container">
             <div class="row">
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
@@ -396,7 +396,7 @@
         </div>
     </section>
     <!-- What we offer -->
-    <section class="s_features pt40 pb40 bg-200" data-name="Features">
+    <section class="s_features pt40 pb40 bg-200" data-name="Features" data-snippet="s_features">
         <div class="container">
             <h2>What We Offer</h2>
             <br/>
diff --git a/addons/website_mail_channel/views/website_mail_channel_templates.xml b/addons/website_mail_channel/views/website_mail_channel_templates.xml
index c1666cb2756..4e247afd621 100644
--- a/addons/website_mail_channel/views/website_mail_channel_templates.xml
+++ b/addons/website_mail_channel/views/website_mail_channel_templates.xml
@@ -37,7 +37,8 @@
                     <div class="s_channel"
                               t-att-data-id="group.id"
                               data-object="mail.channel"
-                              t-att-data-follow="'on' if 'unsubscribe' in request.params else 'off'">
+                              t-att-data-follow="'on' if 'unsubscribe' in request.params else 'off'"
+                              data-snippet="s_channel">
                         <div class="input-group js_mg_follow_form">
                             <input
                                   type="email"
diff --git a/addons/website_mass_mailing/views/snippets_templates.xml b/addons/website_mass_mailing/views/snippets_templates.xml
index 60ccdb414b8..4c055fb8224 100644
--- a/addons/website_mass_mailing/views/snippets_templates.xml
+++ b/addons/website_mass_mailing/views/snippets_templates.xml
@@ -42,7 +42,7 @@
                     <div class="text-center">
                         <h1 class="text-uppercase font-weight-bold">Always First.</h1>
                         <p>Be the first to find out all the latest news, products and trends.</p>
-                        <t t-call="website_mass_mailing.s_newsletter_subscribe_form"/>
+                        <t t-snippet-call="website_mass_mailing.s_newsletter_subscribe_form"/>
                     </div>
                 </div>
             </div>
diff --git a/addons/website_sale/views/snippets/s_products_searchbar.xml b/addons/website_sale/views/snippets/s_products_searchbar.xml
index eaff24c8ef7..f0079c91ed9 100644
--- a/addons/website_sale/views/snippets/s_products_searchbar.xml
+++ b/addons/website_sale/views/snippets/s_products_searchbar.xml
@@ -4,6 +4,7 @@
 <template id="s_products_searchbar_input" name="Products Search Input">
     <t t-call="website_sale.website_sale_products_search_box">
         <t t-set="_classes" t-value="'s_wsale_products_searchbar_input mb-3'"/>
+        <t t-set="_snippet" t-value="'s_products_searchbar_input'"/>
     </t>
 </template>
 <template id="s_products_searchbar" name="Products Search">
@@ -13,7 +14,7 @@
                 <div class="col-lg-8 offset-lg-2">
                     <h2>Search for a product</h2>
                     <p>We have amazing products in our shop, check them now !</p>
-                    <t t-call="website_sale.s_products_searchbar_input"/>
+                    <t t-snippet-call="website_sale.s_products_searchbar_input"/>
                 </div>
             </div>
         </div>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 5c26cd86340..be1b318b30a 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -97,7 +97,7 @@
             <attribute name="t-attf-class" remove="#{_classes}" separator=" "/>
         </xpath>
         <xpath expr="//div[@role='search']" position="replace">
-            <form t-attf-class="o_wsale_products_searchbar_form o_wait_lazy_js #{_classes}" t-att-action="action if action else '/shop'" method="get">
+            <form t-attf-class="o_wsale_products_searchbar_form o_wait_lazy_js #{_classes}" t-att-action="action if action else '/shop'" method="get" t-att-data-snippet="_snippet">
                 <t>$0</t>
                 <input name="order" type="hidden" class="o_wsale_search_order_by" value=""/>
                 <t t-raw="0"/>
@@ -592,7 +592,7 @@
 
     <template id="recently_viewed_products_product" inherit_id="website_sale.product" active="True" customize_show="True" name="Recently Viewed Products" priority="16">
         <xpath expr="//div[@t-field='product.website_description']" position="after">
-            <t t-call="website_sale.s_products_recently_viewed"/>
+            <t t-snippet-call="website_sale.s_products_recently_viewed"/>
         </xpath>
     </template>
 
@@ -746,7 +746,7 @@
                             <t t-call="website_sale.cart_summary"/>
                         </div>
                         <div class="col-12 col-xl order-xl-1 oe_cart">
-                            <section class="s_website_form" data-vcss="001">
+                            <section class="s_website_form" data-vcss="001" data-snippet="s_website_form">
                                 <div class="container">
                                     <form action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-force_action="shop.sale.order" data-model_name="sale.order" data-success-mode="redirect" data-success-page="/shop/payment" hide-change-model="true">
                                         <div class="s_website_form_rows row s_col_no_bgcolor">
@@ -1704,7 +1704,7 @@
                     </div>
                   </div>
                 </section>
-                <section class="s_text_block">
+                <section class="s_text_block" data-snippet="s_text_block">
                   <div class="container">
                     <div class="row">
                       <div class="col-lg-12 mb16 mt16">
diff --git a/addons/website_slides/data/slide_slide_demo.xml b/addons/website_slides/data/slide_slide_demo.xml
index 7694fc3e213..b5f3004e8aa 100644
--- a/addons/website_slides/data/slide_slide_demo.xml
+++ b/addons/website_slides/data/slide_slide_demo.xml
@@ -225,7 +225,7 @@
         <field name="slide_type">webpage</field>
         <field name="channel_id" ref="website_slides.slide_channel_demo_1_gard1"/>
         <field name="html_content" type="html">
-<section class="s_cover parallax bg-black-50 pt16 pb16" data-scroll-background-ratio="0" style="background-image: none;">
+<section class="s_cover parallax bg-black-50 pt16 pb16" data-scroll-background-ratio="0" style="background-image: none;" data-snippet="s_cover">
     <span class="s_parallax_bg oe_img_bg" style="background-image: url('/website_slides/static/src/img/slide_demo_tree_img_1.jpg'); background-position: 50% 0;"></span>
     <div class="container">
         <div class="row s_nb_column_fixed">
@@ -240,7 +240,7 @@
         </div>
     </div>
 </section>
-<section class="s_text_image pt32 pb32">
+<section class="s_text_image pt32 pb32" data-snippet="s_text_image">
     <div class="container">
         <div class="row align-items-center">
             <div class="col-lg-6 pt16 pb16">
@@ -458,7 +458,7 @@
         <field name="slide_type">webpage</field>
         <field name="channel_id" ref="website_slides.slide_channel_demo_2_gard2"/>
         <field name="html_content" type="html">
-<section class="s_cover parallax bg-black-50 pt16 pb16" data-scroll-background-ratio="0" style="background-image: none;">
+<section class="s_cover parallax bg-black-50 pt16 pb16" data-scroll-background-ratio="0" style="background-image: none;" data-snippet="s_cover">
     <span class="s_parallax_bg oe_img_bg" style="background-image: url('/website_slides/static/src/img/slide_demo_tree_img_3.jpg'); background-position: 50% 0;"></span>
     <div class="container">
         <div class="row s_nb_column_fixed">
@@ -473,7 +473,7 @@
         </div>
     </div>
 </section>
-<section class="s_text_image pt32 pb32">
+<section class="s_text_image pt32 pb32" data-snippet="s_text_image">
     <div class="container">
         <div class="row align-items-center">
             <div class="col-lg-6 pt16 pb16">
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index 924351ef321..8e3e27524d7 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -3,7 +3,7 @@
 
 <template id='courses_footer'>
     <!-- 'users':  3 top users with picture (skip users without picture) -->
-    <section class="s_banner bg-900" style="background-image: url(/website_slides/static/src/img/banner_heroes_default.svg); background-size: cover; background-position: right bottom">
+    <section class="s_banner bg-900" style="background-image: url(/website_slides/static/src/img/banner_heroes_default.svg); background-size: cover; background-position: right bottom" data-snippet="s_banner">
         <div class="container py-5">
             <div class="row align-items-center">
                 <div t-attf-class="col-12 #{'col-md' if top3_users else 'text-center'}">
@@ -29,7 +29,7 @@
     <t t-set="body_classname" t-value="'o_wslides_body'"/>
     <t t-call="website.layout">
         <div id="wrap" class="wrap o_wslides_wrap">
-            <section class="s_banner overflow-hidden bg-900" style="background-image: url(&quot;/website_slides/static/src/img/banner_default.svg&quot;); background-size: cover; background-position: 55% 65%">
+            <section class="s_banner overflow-hidden bg-900" style="background-image: url(&quot;/website_slides/static/src/img/banner_default.svg&quot;); background-size: cover; background-position: 55% 65%" data-snippet="s_banner">
                 <div class="container align-items-center d-flex mb-5 mt-lg-5 pt-lg-4 pb-lg-1">
                     <div>
                         <h1 class="display-3 mb-0">Reach new heights</h1>
@@ -203,7 +203,7 @@
     <t t-set="body_classname" t-value="'o_wslides_body'"/>
     <t t-call="website.layout">
         <div id="wrap" class="wrap o_wslides_wrap">
-            <section class="s_banner bg-900" style="background-image: url(&quot;/website_slides/static/src/img/banner_default_all.svg&quot;); background-size: cover; background-position: 80% 20%">
+            <section class="s_banner bg-900" style="background-image: url(&quot;/website_slides/static/src/img/banner_default_all.svg&quot;); background-size: cover; background-position: 80% 20%" data-snippet="s_banner">
                 <div class="container py-5">
                     <h1 t-if="search_my" class="display-3 mb-0">My Courses</h1>
                     <h1 t-elif="search_slide_type=='certification'" class="display-3 mb-0">Certifications</h1>