How to Create a Custom Snippet in Odoo Website

Odoo Website's drag-and-drop editor is built on reusable building blocks called snippets. Every block you see in the editor panel — from hero banners to testimonial carousels — is a snippet registered via an XML view that inherits from the main snippet list. Creating your own snippet follows the same pattern: write an HTML template, register it in the editor panel, and optionally attach CSS and JavaScript options. This guide covers the complete workflow for Odoo 18 and 19.

What Is an Odoo Snippet?

A snippet (also called a building block) is a self-contained HTML section that website editors can drag from the panel onto any page. Snippets consist of three parts: an HTML template (the visual block), a snippet registration view (which makes it appear in the editor panel), and optional snippet options (JavaScript classes that add editor controls like colour pickers or layout toggles).

Module Structure

Custom snippets must live inside an Odoo module. If you are adding a snippet to an existing website module, skip the scaffold step. For a new module, the minimum directory layout is:

my_website_snippets/
├── __init__.py
├── __manifest__.py
├── static/
│   └── src/
│       ├── js/
│       │   └── options.js          # snippet options (optional)
│       └── scss/
│           └── s_my_snippet.scss   # snippet styles (optional)
└── views/
    └── snippets/
        ├── s_my_snippet.xml        # HTML template
        └── snippets.xml            # editor panel registration

Step 1 — Write the HTML Template

<?xml version="1.0" encoding="utf-8"?>
<odoo>
  <template id="s_my_cta_banner" name="My CTA Banner">
    <section class="s_my_cta_banner" data-snippet="s_my_cta_banner"
             data-name="My CTA Banner">
      <div class="container text-center py-5">
        <h2 class="s_my_cta_banner_title">Your headline goes here</h2>
        <p class="lead s_my_cta_banner_subtitle">
          Supporting text for your call to action.
        </p>
        <a href="#" class="btn btn-primary btn-lg">Get Started</a>
      </div>
    </section>
  </template>
</odoo>

Key points: the root element must be ``. The `data-snippet` attribute must match the template `id`. The `data-name` attribute sets the tooltip shown in the editor when the user hovers over the dropped block.

Step 2 — Register the Snippet in the Editor Panel

The editor panel is controlled by the view `website.snippets`. You extend it using an XPath to inject your snippet thumbnail into one of the panel categories: Content, Structure, Inner Content, or Features.

<?xml version="1.0" encoding="utf-8"?>
<odoo>
  <!-- Register snippet in the "Content" panel category -->
  <template id="snippets" inherit_id="website.snippets">
    <xpath expr="//div[@id='snippet_content']" position="before">
      <t t-snippet="my_website_snippets.s_my_cta_banner"
         t-thumbnail="/my_website_snippets/static/src/img/thumb_my_cta_banner.png"/>
    </xpath>
  </template>
</odoo>

Step 3 — Declare Files in __manifest__.py

{
    'name': 'My Website Snippets',
    'version': '1.0',
    'category': 'Website',
    'depends': ['website'],
    'data': [
        'views/snippets/s_my_snippet.xml',
        'views/snippets/snippets.xml',
    ],
    'assets': {
        'web.assets_frontend': [
            'my_website_snippets/static/src/scss/s_my_snippet.scss',
            'my_website_snippets/static/src/js/options.js',
        ],
    },
    'installable': True,
}

Step 4 — Add Snippet Options (Optional)

Snippet options are JavaScript classes that extend `SnippetOptionWidget` (or one of its sub-classes). They add editor panel controls — colour pickers, layout toggles, text inputs — that appear when the user clicks your snippet in the editor. Options are bound to the snippet's root CSS selector.

/** @odoo-module **/
import options from "@web_editor/js/editor/snippets.options";

options.registry.MyCTABanner = options.Class.extend({
    // Called when the user changes an option value
    setBannerStyle: function (previewMode, value) {
        this.$target.toggleClass("s_my_cta_banner_dark", value === "dark");
        this.$target.toggleClass("s_my_cta_banner_light", value === "light");
    },
});

The registry key (`MyCTABanner`) must match the `data-js` attribute you add to your registration `` element, or Odoo uses the CSS class name of the snippet's root element as a fallback key.

Step 5 — Install the Module and Test

1. Restart the Odoo server to pick up the new module: `./odoo-bin -c odoo.conf -u my_website_snippets`.
2. Open the Website app and click **Edit** on any page.
3. In the building blocks panel, locate your snippet under the category you registered it in (e.g. Content).
4. Drag the snippet onto the page and confirm it renders correctly.
5. Click the dropped block to open the editor panel and verify any custom options appear.
6. Save the page and reload in normal (non-edit) mode to confirm the snippet displays without editor scripts.

Troubleshooting — Common Issues

Version Notes

iWesabe Editorial Team

Practitioner insights on Odoo ERP, ZATCA compliance, and Saudi enterprise digital operations — written by iWesabe's consulting, finance, and engineering teams.

About iWesabe