| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Odoo Apps Dependencies |
•
Website (website)
• Discuss (mail) |
| Lines of code | 4188 |
| Technical Name |
custom_snippet_builder |
| License | OPL-1 |
| Website | https://github.com/yoshin4g4 |
| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Odoo Apps Dependencies |
•
Website (website)
• Discuss (mail) |
| Lines of code | 4188 |
| Technical Name |
custom_snippet_builder |
| License | OPL-1 |
| Website | https://github.com/yoshin4g4 |
Custom Snippet Builder
"Powerful website snippet creation tool that allows you to create custom HTML snippets with CSS and JavaScript from the backend interface. Build, preview, and publish custom snippets to enhance your website with real-time preview and seamless integration to the website editor!"HTML, CSS & JavaScript
Create custom snippets with full HTML, CSS, and JavaScript support for maximum flexibility.
Live Preview
Real-time preview of your snippets without affecting global website styles.
Easy Publishing
Publish snippets directly to website editor for immediate use on your website.
Auto-Update
Published snippets automatically update when you modify them in the backend.
How to Use Custom Snippet Builder
Create HTML Structure
Start by creating your snippet in the backend. Go to Website → Custom Snippets → Snippets and create a new snippet. In the HTML Code tab, write your HTML structure using Bootstrap classes and semantic elements.
- Use semantic HTML elements
- Include Bootstrap classes for styling
- Add container and responsive grid
Add CSS Styling
Switch to the CSS Code tab to add custom styling to your snippet. You can use modern CSS features, animations, and responsive design patterns to make your snippet look professional.
- Add custom colors and fonts
- Create hover effects and animations
- Ensure responsive design
Add JavaScript Functionality
In the JavaScript Code tab, add interactive functionality to your snippet. You can use vanilla JavaScript or jQuery to create dynamic behaviors, form validations, or API integrations.
- Add event listeners and interactions
- Create dynamic content updates
- Integrate with external APIs
CSS & JavaScript Safety Guidelines
Automatic Isolation System: This module includes advanced CSS and JavaScript isolation that automatically scopes all your custom code to prevent conflicts with global website styles and functionality.
CSS Isolation Features:
- Automatic Scoping: All CSS selectors are automatically prefixed with snippet container classes
- Global Protection: Your snippet styles won't interfere with existing website themes or other snippets
- @media & @keyframes Support: Advanced CSS features are preserved and properly isolated
- Complete Coverage: Every CSS rule is scoped, ensuring 100% isolation
JavaScript Isolation Features:
- DOM Query Scoping: querySelector and getElementById are automatically scoped to snippet containers
- Error Boundaries: JavaScript errors are contained and logged without breaking the main website
- Selector Validation: Invalid selectors are caught and handled gracefully
- Safe Fallbacks: If scoped queries fail, safe fallbacks prevent crashes
How It Works:
CSS Example:
JavaScript Example:
Benefits:
- Write CSS and JavaScript naturally - isolation happens automatically
- No risk of breaking existing website functionality
- Snippets work independently without conflicts
- Professional, safe, and maintainable code
Best Practices for Professional Snippets
HTML Guidelines:
- Semantic Structure: Use proper HTML5 semantic elements (section, article, header, footer)
- Bootstrap Classes: Leverage Bootstrap 4/5 grid system and utility classes for responsive design
- CSS Scoping: Always wrap your snippet in a unique section class (e.g.,
.s_my_snippet) - Accessibility: Include proper alt attributes, aria-labels, and semantic markup
HTML Example:
<section class="s_my_hero">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1 class="hero-title">Title</h1>
<p class="hero-text">Content</p>
</div>
</div>
</div>
</section>
CSS Guidelines:
- Scoped Selectors: Always prefix selectors with your snippet class (e.g.,
.s_my_snippet .element) - Responsive Design: Use media queries for mobile-first responsive behavior
- Modern CSS: Utilize flexbox, grid, custom properties, and animations for professional look
- Performance: Optimize animations and avoid heavy CSS properties
CSS Example:
.s_my_hero {
padding: 80px 0;
background: linear-gradient(...);
}
.s_my_hero .hero-title {
font-size: 3rem;
font-weight: 700;
animation: fadeInUp 1s ease;
}
@media (max-width: 768px) {
.s_my_hero .hero-title {
font-size: 2rem;
}
}
JavaScript Guidelines:
- IIFE Pattern: Wrap code in self-executing function to avoid global pollution
- Element Detection: Always check if elements exist before manipulating them
- Event Listeners: Use proper event handling and cleanup to prevent memory leaks
- Error Handling: Include try-catch blocks for robust error handling
JavaScript Example:
(function initMySnippet() {
'use strict';
// Wait for DOM ready
const init = () => {
const container = document.querySelector('.s_my_hero');
if (!container) return;
const button = container.querySelector('.btn');
if (button) {
button.addEventListener('click', handleClick);
}
};
function handleClick(e) {
// Handle button click
}
// Initialize
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
Responsive Design:
- Mobile First: Design for mobile devices first, then enhance for larger screens
- Breakpoints: Use standard Bootstrap breakpoints (576px, 768px, 992px, 1200px)
- Flexible Layout: Use relative units (rem, %, vw/vh) instead of fixed pixels when possible
- Touch Friendly: Ensure buttons and interactive elements are at least 44px in size
Responsive Example:
/* Mobile styles (default) */
.s_my_snippet .title {
font-size: 1.5rem;
padding: 20px 0;
}
/* Tablet and up */
@media (min-width: 768px) {
.s_my_snippet .title {
font-size: 2.5rem;
padding: 40px 0;
}
}
/* Desktop and up */
@media (min-width: 992px) {
.s_my_snippet .title {
font-size: 3rem;
padding: 60px 0;
}
}
Important Tips:
- Test thoroughly: Always test your snippets on different screen sizes
- Performance matters: Optimize images and avoid heavy animations
- Browser compatibility: Use widely supported CSS and JavaScript features
- Accessibility first: Ensure your snippets work with screen readers
- SEO friendly: Use proper heading hierarchy and semantic markup
- Maintainable code: Comment your code and use clear, descriptive class names
Professional Results:
Following these guidelines will ensure your snippets are professional, maintainable, and provide excellent user experience across all devices. The automatic isolation system means you can focus on creating great functionality while the module handles technical safety concerns.
Live Preview & Testing
Use the built-in live preview feature to see exactly how your snippet will look and behave. The preview updates in real-time as you make changes, allowing you to test and refine your snippet.
- Real-time preview updates
- Test all interactive features
- Check responsive behavior
Use in Website Editor
Once published, your custom snippet becomes available in the website editor's snippet panel. Simply drag and drop it onto any page where you want to use it.
- Drag and drop functionality
- Available in snippet panel
- Easy page integration
Live Website Result
Your custom snippet is now live on your website! It maintains all the styling, functionality, and responsive behavior you designed, seamlessly integrated with your site.
- Fully functional on live website
- Maintains all custom features
- Responsive and professional
Key Features & Benefits
Installation & Configuration
Installation
- Install the module from Apps menu
- Update app list if needed
- Module will be automatically configured
Access Path
- Website → Custom Snippets
- Snippets
- Create & manage snippets
Installation & Access
Installation
- Install the module from Apps menu
- Update app list if needed
- Module will be automatically configured
- Cron jobs will be activated automatically
Access Path
- Settings → User Notifications
- Notifications (Create & manage)
- Schedules (View status & tracking)
Jasa Implementasi Odoo
Kami menyediakan layanan implementasi Odoo yang komprehensif untuk membantu bisnis Anda berkembang dengan sistem ERP yang tepat.
Layanan Kami
- Konsultasi & Analisis Kebutuhan Bisnis
- Instalasi & Konfigurasi Odoo
- Kustomisasi Modul & Fitur
- Integrasi dengan Sistem Existing
- Training & Pelatihan User
- Support & Maintenance
Keunggulan Kami
- Berpengalaman dalam berbagai industri
- Tim developer yang kompeten
- Solusi yang disesuaikan dengan budget
- Response time yang cepat
- After-sales support yang handal
- Harga kompetitif
Hubungi Kami Sekarang!
Konsultasikan kebutuhan Odoo Anda dengan kami untuk solusi terbaik bisnis Anda
Siap melayani konsultasi dan implementasi Odoo untuk bisnis Anda
Custom Development
Modul sesuai kebutuhan spesifik
Training & Support
Pelatihan lengkap untuk tim Anda
Maintenance
Dukungan berkelanjutan
Odoo Proprietary License v1.0 This software and associated files (the "Software") may only be used (executed, modified, executed after modifications) if you have purchased a valid license from the authors, typically via Odoo Apps, or if you have received a written agreement from the authors of the Software (see the COPYRIGHT file). You may develop Odoo modules that use the Software as a library (typically by depending on it, importing it and using its resources), but without copying any source code or material from the Software. You may distribute those modules under the license of your choice, provided that this license is compatible with the terms of the Odoo Proprietary License (For example: LGPL, MIT, or proprietary licenses similar to this one). It is forbidden to publish, distribute, sublicense, or sell copies of the Software or modified copies of the Software. The above copyright notice and this permission notice must be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Please log in to comment on this module