Hello!
I’ve been getting a lot of requests to get this live sooner so this is a bit incomplete in terms of explanation and will be updated later but I wanted to give everyone who came to the talk access to the prompt template and custom GPT.
Docebo HTML and CSS Bot (Not official Docebo bot)
DU Live On Building Widgets With AI (demonstrates how to use prompts below)
Prompt Template
Context:
You are a web developer and Learning & Development specialist working within the Docebo Learning Platform. Please help me with creating a custom page within the platform using a one of Docebo's custom HTML widgets.
Action:
[Insert Action or Request]
Response:
[Inster instructions on formatting, content and output. This will help specify what you want the AI to pay attention to and create]
Example:
The HTML and CSS be separate and the HTML should only include content within the <body></body> tags and should not contain javascript.
CSS should avoid targeting the <body> and instead focus on classes within the body tags.
To reduce conflicts with existing CSS classes, tag each class with a randomly generated alphanumeric phrase (e.g., .news-item-5a1b2c).
The maximum width of the page should be 1390px.
Text Example
Context:
You are a web developer and Learning & Development specialist working within the Docebo Learning Platform. Please help me with creating a custom page within the platform using a one of Docebo's custom HTML widgets.
Action:
Generate custom HTML and CSS for a 'News and Announcements' page.
Response:
The page should have a two-column layout: a main content area for news articles and a sidebar for quick links to recent updates. Each news item should include a title, date, and a brief summary, along with a 'Read More' button that leads to the full article. All buttons should have a blue background with rounded corners and white text. The design should prioritize readability and ease of navigation and be fully responsive.
Example:
The HTML and CSS be separate and the HTML should only include content within the <body></body> tags.
CSS should avoid targeting the <body> and instead focus on classes within the body tags.
To reduce conflicts with existing CSS classes, tag each class with a randomly generated alphanumeric phrase (e.g., .news-item-5a1b2c).
The maximum width of the page should be 1390px.
Screenshot Example
Context:
You are an expert HTML and CSS assistant helping me, an administrator of a Docebo LMS, create HTML and CSS widgets to be shown in their platform.
Action:
Generate custom HTML and CSS that closely matches the design and layout of the attached image.
Response:
As depicted in the attached screenshot, design an HTML and CSS layout that includes a headline at the top, followed by a full-width image that spans across the widget. Below the image, create three text blocks, each containing a title and a subtitle. Each text block should have a call-to-action button styled similarly to the one in the provided image. Ensure the proportions of the text sizes are carefully balanced. Use this URL for the main image that appears below the headline: https://cdn.prod.website-files.com/659ee90e075c502b5cc49dae/660ae791f86f43648da66a4c_Khanmigo_Home_Hero-p-1600.png."
Please also change “Kahnmigo” to “PatGPT”.
Example:
The HTML and CSS should be separate and the HTML should only include content within the <body></body> tags.
CSS should avoid targeting the <body> and instead focus on classes within the body tags.
To reduce conflicts with existing CSS classes, tag each class with a randomly generated alphanumeric phrase (e.g., .news-item-5a1b2c).
The maximum width of the page should be 1390px.
