hi, I am trying to add an interactive reaction buttons html widget to my LMS homepage.
when I test the code on an external platform, it seems to work fine, but when I try to add this to an HTML widget, for some reason the buttons are not visible, and the html code I am adding in the widget configuration settings, disappears.
is there any additional configuration I need to do here?
would appreciate any help,
thanks!
Best answer by gstager
View original
+5
I can confirm that Docebo does not support all HTML tags and will strip out the ones that it doesn’t like.
Also - ensure that if you are using any CSS for styling of that HTML - that it gets put into the Branding and Look section. That could certainly affect what you see as well.
I have a similar issue: We build HTML, and Docebo truncates it upon “save.” It keeps the basic fundamentals of what we were attempting to accomplish, so if we created buttons, text links are left in it’s place. But it won’t keep any formatting or simple header, color, or style items in the text.
I’m in the implementation phase, and my project lead from Docebo believes it’s operating incorrectly. If they give me a resolution that solves the problem, I’ll make sure to post it!
+6
I can confirm that Docebo does not support all HTML tags and will strip out the ones that it doesn’t like.
Also - ensure that if you are using any CSS for styling of that HTML - that it gets put into the Branding and Look section. That could certainly affect what you see as well.
Good morning - Like
Last note / recommendation - you may want to try to express what you are trying to do with a code snippet of a sample of those buttons here and what you are trying to draw on screen.
I can confirm that Docebo does not support all HTML tags and will strip out the ones that it doesn’t like.
Also - ensure that if you are using any CSS for styling of that HTML - that it gets put into the Branding and Look section. That could certainly affect what you see as well.
Good morning - Like
Last note / recommendation - you may want to try to express what you are trying to do with a code snippet of a sample of those buttons here and what you are trying to draw on screen.
thank you
here is the code I created from ShareThis platform:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=65fbf24795fd23001244a52c&product=inline-reaction-buttons&source=platform" async="async"></script>
<div class="sharethis-inline-reaction-buttons"></div>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
I also tried adding this platform as an approved external URL under the “advanced settings” to share in Iframe, but this also doesn't seem to work. do you know if this is a dead end in terms that this is not possible to add interactive buttons into the Docebo platform? or could you assist with an alternative solution to add interactive buttons?
Thank you!
+5
Hmm… I would venture a guess that the script tag is being stripped out.
Docebo does not support JavaScript
You might, however, be able to add your own with just some HTML and CSS.
Docebo does have many icons available to use.
Here are just a few .
You can see Facebook, LinkedIn, and Twitter (old one - not X) are available.
You could just do a simple anchor tag and link to your respective pages.
So, I’ve successfully created (simple) buttons through a combination of CSS styling and HTML, as
CSS in the style sheet:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0; /* Background color */
}
.container {
text-align: center;
padding: 20px;
}
h1 {
color: #06306a; /* Header color */
}
h2 {
color: #06306a; /* Sub-header color */
}
.btn-container {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.btn {
background-color: #06306a; /* Button color */
color: white;
padding: 10px 20px;
border-radius: 20px; /* Rounded corners */
text-decoration: none;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #052755; /* Darker shade on hover */
}
HTML in the training material:
<div class="container">
<h1>Additional Title IX Information and Resources</h1>
<h2>Choose any education unit to learn more</h2>
<div class="btn-container"><a class="btn" href="https://www.apu.apus.edu/aboutus/consumer-information/title-ix-compliance/" target="_blank" rel="noreferrer">APUS Title IX</a> <a class="btn" href="https://www.hondros.edu/about/consumer-information/title-ix/" target="_blank" rel="noreferrer">Hondros Title IX</a> <a class="btn" href="https://www.rasmussen.edu/student-life/title-ix/" target="_blank" rel="noreferrer">Rasmussen Title IX</a></div>
</div>I do not see the HTML rendering when reviewing the training material. However, it's correct when I play the course, and the style sheet is applied.
What I see in training material:
What I see in the course:
I hope this helps. If you get it to work, you should share!
+5
Have you tried placing CSS in the area specific to training?
Look under Course Player
Yes - that’s exactly what I’ve done, and it’s working well. 😀 I was just unsure if the same works in the primary style sheet to have buttons render on her homepage (which was her original ask)
Have you tried placing CSS in the area specific to training?
Look under Course Player
This is interesting, my HTML skills are basic, and even less with CSS. But I used the HTML Widget to build links on my Superadmin home page, but it is one link per widget, and limit of 20 widgets.
This might work building multiple buttons in a widget.
Any suggestions on getting started?
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.