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.
- Embedding a list of Discourse Topics in another site - feature / announcements - Discourse Meta
- Embedding Discourse Comments via Javascript - howto / developers - Discourse Meta
- How to configure the allowed embed selectors setting - howto / admins - Discourse Meta
- Examples of styling and use of Embedding a list of Discourse Topics on a external site - support - Discourse Meta
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>
<style>
* {
box-sizing: border-box;
}
#form {
position:absolute;
left: 22px;
top:5px;
width:55%;
}
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;
background:#1e825b;
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{
position:absolute;
width: 100%!important;
top:-10px;
}
</style>
</head>
<body>
<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;
font-size:13px;
}
.topic-column.featured-image-column .topic-featured-image img {
display:none;
}
}
}
.new-topic-btn {
float: left;
margin: 16px 0 0 58%;
height: 40.5px;;
background:#1e825b;
}
.new-topic-btn:hover {
background: rgb(73, 130, 5);
}
