Add Any UI Element To Odoo Website

Odoo website builders is... not great. The elements they offer are quite limited, and don't look professional. Designing a website in Odoo is a massive chore, plus the limitations in design choice for non-developer is a real barrier. 

I'll go as far as saying that the website builder is so bad that this is a red flag for many customers. Especially for eCommerce businesses. "Why would I use Odoo? Shopify works great." and who blame them?

But in this article, I'll show you how to use AI to integrate any element, from any platform that provides UI components, like 21st.dev. It will also work if you want to copy elements from websites you like, or imaging new ones from scratch. Just make sure to adapt the prompt accordingly. 

You don't need to be a developer, and this works both on odoo.sh and Odoo Online. But if your database is hosted on odoo.sh, I'd recommend that you do not follow this tutorial, and ask your developers to add the elements in the code base. I'll write an article explaining how in the near future.

Also, this tutorial assumes that you already installed the website app on your database, and completed its on-boarding.

Disclaimer: if your database is managed by a 3rd party like an Odoo partner, consult them before following this tutorial, as some of the steps may be destructive.

Now, let's get to it!

Choose The Element You Like

Go to 21st.dev, or any UI element provider you like, and browse through the elements you're looking for. For this tutorial, I'll select a hero I like.

Found one! But, like all the other elements on this platform, they provide a prompt to install it in a Next.js project. That's OK, because thanks to the power of AI, we will convert it into code Odoo can understand! 

Here is the hero I choose.

Once you selected yours, you can copy the prompt or the code, and open your favorite LLM.

Let AI Make The Element Odoo Compatible

In your LLM, open a new chat and paste the prompt. You may want to have quotes around it to ensure this prompt will be separated from your additional prompt.

After the pasted text, add this prompt:

I found this element on 21st.dev, and I want to integrate it into Odoo. Please convert it into HTML/CSS and JavaScript, and tell me where each snippet should be pasted into Odoo. Make sure the element is exactly the same, and make sure it is optimized and does not use too many resources to ensure good UX. This element will be installed from the website editor provided by Odoo, using the "Embed Code" element and code injection. Output the snippets directly in the chat, ready to copy.

Replace "21st.dev" by whatever source you're using, press enter, and let the magic work.

Prepare Odoo

While the AI is working, let's go back in Odoo, and open the website editor on the page you want to include your element in. Then, in the right panel, select the "Blocks" tab.

Scroll down a bit, and locate the "Embed Code" element, then drag and drop it where you want it to be. 


Once the "Embed Code" element is placed, we just have to copy and paste the code provided by our LLM at the right place.

Inject The Code Into Odoo

The LLM should have generated 3 spinets of code. One HTML, one CSS and one JavaScript. And they should all be injected at different places.

First, the frame of the element is built in HTLM. To identify it, either the LLM made it clear in its output, but if it hasn't, look for the snippet of code that doesn't start by either <style> or <script>. It can start with <section>, <div>, or some other tag.

Copy the whole HTML code, then go back in Odoo. In the right panel, click on "Style" and select the element you placed before. In this right panel, a green "Edit" button should be available.

Click on "Edit" and a code editor appears in a popup. Replace the existing code by the HTML provided by the LLM, and save.

Next, we need to inject the styling and the script into the codebase. Odoo provides a tool for that purpose. Still in the right panel, select the "Theme" tab, and scroll all the way down, to the "Advanced" section.

Click on "<head> and </body>", and a new popup, this time with 2 code editors opens. The one on top will inject code in the <head> section of the page, while the one below will inject code in the </body> section of the page.

Inject the CSS (the snippet starting with <style>) into the <head>.
Inject the JavaScript (the snippet starting with <script>) into the </body>.

Then save the popup, and save your edits.

You will see your element appear on the website.

Adjust

It is very likely that this will not be perfect from the 1st try. In my example, the hero is here, but it has white borders, and the interactive moon is not centered and has no texture. 

Therefore, I need go back in the LLM, and tell him what to fix:

From this point onward, this is just a die-and-retry game, and you'll have to go back and forth with your LLM until you have exactly what you want. Every time, you'll have to redo the "Inject The Code Into Odoo" step, ensuring you save the popups and the website edits to see the changes.

And after a few back and forth, voilà!

Conclusion

So this was a demo on how you can use LLMs to integrate any element into your Odoo website. The purpose of this article is to show you that you're creativity is not limited to what Odoo offers. You can integrate elements from UI banks like 21st.dev, or any element you can imagine. It also works to replicate elements you may find cool on other website. Make sure to prompt enough screenshots and a clear description to the AI, and it will give you the HTML, the CSS and the JavaScript to integrate it in your own designs.

Note that this demo uses AI, and output format may differ, or be unpredictable. Always pay attention to the instructions your LLM give you, and don't hesitate to re-prompt or clarify if it doesn't output what you expect.

In Odoo 20.0, AI capabilities of the website designer have been significantly increased. Therefore, back and forth with your preferred LLM will not be necessary anymore. This demo still applies, but instead of copying and pasting the code manually, Odoo can do it for you. The quality of the result will depend on the quality of your prompts and instructions.

I sincerely hope this was helpful, and if you have any remark, suggestion or question, you can email me at louis@cdb.solutions or DM me on LinkedIn.

Thank you,
Louis