Guide to Using the Docebo HTML and CSS Bot
At Docebo Inspire 2024 in Dallas, Patrick Morales and I shared a custom GPT that we built as part of our talk: “Building Custom Widgets with ChatGPT”. For those that weren’t able to attend, I wanted to share some more details about how the custom GPT works. If you just want to jump right in, here’s the link to the Docebo HTML and CSS Assistant custom GPT.
Important Notice:
I hope you’ll find this tool to be helpful and valuable. But as with all HTML and CSS added to the platform, Docebo can’t guarantee that any modification can be achieved or that it will always work. Updates happen to the LMS all the time and things that used to work may stop working at some point. Even if the snippet was generated using this tool, Docebo can’t be held responsible for the maintenance of the code.
Please also note: HTML and CSS do not work in the mobile app. The changes you make for desktop will not be reflected in the Go.Learn or Branded Mobile App. The recommended way to use the LMS on a mobile device or tablet is using the mobile app, so if you choose to optimize the LMS for the mobile browser in order to use more HTML and CSS, our support team may not be able to assist you with issues that occur on mobile and tablet fully.
What is a Custom GPT?
You may have heard some talk about the term “prompt engineering” – the concept of writing the right prompt in order to get the best results when talking to an AI. Prompt engineering is really important but building a custom GPT allows you to talk to an AI that has already been pre-loaded with instructions and custom knowledge that makes it tailored to help in a specific area without the need for as many details or perfect prompting.
How does the Docebo HTML and CSS Assistant work?
The Docebo HTML and CSS Assistant custom GPT has been fine-tuned to help with two things:
- Help admins generate CSS snippets to modify elements found in their LMS (hide this, make that bigger, change the color of the other thing)
- Help admins build custom widgets for their pages by providing HTML and CSS that should work in Docebo.
Let’s start with the CSS helper
The CSS helper has been pre-loaded with ~50 or so common CSS snippets as part of its uploaded knowledge. If you ask the bot for help with something it already has a snippet for, it should just give you that tried and tested snippet without asking you anything else and it will tell you how to add it to your platform.
If the request isn’t something the bot already has a snippet for, it will ask you to see a picture of the inspector in the area of the element you want to modify. There’s a lot of code on the backend so to get as close as possible make sure you right click on the element you want to modify when you go to open the inspector.
The other thing I recommend is that after you open the inspector, make sure that you can see all of the potentially relevant information when you go to provide a screenshot of the inspector. To do this, I recommend clicking the vertical ellipsis in the top right and selecting the option to pop out the inspector into its own window.
After that, I would just take a screenshot of everything you see in the inspector after you right clicked on the element.
It might look something like this:
As you share the screenshot of the inspector, you shouldn’t need to say anything else to the AI since it should know what to do. At this point, the AI should give you a CSS snippet to try hopefully(!) it will work on the first try. If not, you may need to have a dialog with it in order to tell it how it isn’t quite working and it will give you other things to try.
As magical as it is to just share a picture of some code and get back a CSS snippet, I must here admit that the custom GPT is not, indeed, magical. Depending on the complexity of your request or of the underlying code you’re trying to modify, you may find there are some things it can’t help with yet. In those cases, and in cases where it delights you, please feel free to add a comment to this post and so that I have the feedback I need to improve it.
Let’s move on to the custom widget helper now
The custom widget helper has been fine-tuned to help you build static HTML and CSS widgets for your pages. After you select the option to get help building new pages or widgets, you’ll need to provide it with a description or screenshot of what you want to build. Preferably both. Perhaps you want to build an element inspired by your organization’s main website. Or maybe you’ve seen another page on the web that you like the look of. Share a picture of the thing you want to build and the AI will give you the HTML and CSS needed to make it work. Paste the HTML into the HTML widget on the page, and the CSS in the custom styles area of your LMS.
I find that with the widget helper, it’s often a lot more of a conversation as you ask for tweaks and modifications. You may need some back and forth and testing before it’s looking exactly how you envisioned it.
It’s important to keep in mind as you build things that all the normal rules and quirks of adding custom content to Docebo still apply. Certain elements, Javascript, and reserved classes etc. may be stripped from your code or won’t work properly. Things with interactivity on a page (click, tap, swipe etc.) are usually built with Javascript and won’t work in Docebo. Before going down a rabbit hole, try to make sure what you’re trying to build is static content and will be achievable to build in the LMS.
If you’d like more information on prompting and working with LLMs and Chat GPT you can see an abreviated version of our talk on a recent DU Live:
Feedback
This custom GPT is a work in progress and I hope you’ll help us improve it by telling us about how it succeeded and failed in helping you. The best way to provide that feedback right now is to add a comment to this post.
