Embed Discourse within CyberPanel

A major reason that people aren’t using this Discourse forum is friction - they aren’t used to it, don’t know about it, they aren’t sure if its the right place to go etc…

One way we can significantly reduce this confusion and friction is if we integrate Discourse with CyberPanel.

It looks like it is not very difficult to do some external embeds and perhaps even integrate logins with SSO.

Here’s some examples of what could be done:

Someone added this topic list AND a search bar to an external site.

We could have two tabs within Cyberpanel for Support and Documentation that shows the latest topics as well as a search field for each. In fact, it might even be possible to fully embed the Docs view into CyberPanel - though perhaps its better just to redirect people to Discourse.

Another idea is to have a link within each CP feature/tab (Users, Websites, Packages, Databases, etc…) to the assocated Docs category. It doesn’t sound like it would be much more work, once we’ve figured out how to embed something at all.

Here’s another example: FeverBee Experts. Though I’m not sure if it is embedded, or just displaying a subdomain of the site.

Here is the relevant documentation. We could surely implement something like this fairly easily.

The last one has code for creating the embedded view shown above

Code for the search form, styling, and topics list:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://adams-discourse.com/javascripts/embed-topics.js"></script>

* {
  box-sizing: border-box;

#form {
  left: 22px;

form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;

form.example button {
  float: left;
  width: 19%;
  padding: 10px;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;

form.example button:hover {
  background: green;

form.example::after {
  content: "";
  clear: both;
  display: table;

d-topics-list iframe{
	width: 100%!important;

<d-topics-list discourse-url="https://adams-discourse.com" template="complete" category="9" per-page="6" allow-create="true" ></d-topics-list>
<div id="form">
<form class="example" action="https://adams-discourse.com/search?q=" target="_blank">
   <input placeholder="Search this forum" aria-label="Search this forum" type="text" id="q" name="q" value="">
  <button type="submit"><i class="fa fa-search"></i></button>
</form> </div>

To get the box layout, instead of grid I used flex in the Discourse Embedded CSS.

.topics-list {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 8px 8px 0 8px;
  margin: 3px 3px 0 0;
.topic-list-item .main-link {
    border: 1px solid gray;
    margin: 5px;
    width: 250px;
    height: 90px;
    .topic-column-wrapper {
      flex-direction: column-reverse;
      .topic-column.details-column {
        width: 100%;

.topic-created-at {
    padding-left: 0!important;

      .topic-column.featured-image-column .topic-featured-image img {

.new-topic-btn {
    float: left;
    margin: 16px 0 0 58%;
    height: 40.5px;;
.new-topic-btn:hover {
    background: rgb(73, 130, 5);

A further step would be to integrate CyberPanel Cloud with CyberPanel Discourse/Community via SSO authentication so that you can see your own personalized feed, notifications etc…

But, for now, it would be better to just show a generic, public embed of docs and support, without any SSO

I’ve made it like this. There is a link below Connect and on top right for support and community.

For now we will keep it like this.

That will definitely be an improvement for now!

But is it possible that sometime in the future when you have more time (or when we’ve got community contributions more organized), that we could

  1. Embed the topics and search in cyberpanel
  2. Have an sso

Also, I wonder if “Community” is the right word… Perhaps “Community Support”, just to make it clear what it is?

And what about this icon (or something like it, with more appropriate colors)? The question mark makes it more clear that it is support-related.