In-line recommendations on Creating topics

@ddpancratz 

I also saw this on Linkedin.

I have not found a way to do it, but I am also not that Custom CSS / HTML Savvy.

Pulling in a few extra eyes 👀 to see if we have a chance to help out.

@Oliver Marriott @Zach B @Julian 

Yes, so this is something I’ve been also looking at with several customers in the past, I also believe that this would enhance the quality of content created, also reduce the overall Moderation effort.

I do see a challenge in displaying the right tips per category / content type, e.g. for ideas people would like to display a different guide than for a question.

But in general, something like this is possible with CSS. It should be possible to nest this somewhere in the center of the page, what might be easier though would be to display it in the sidebar. Below you can see a POC we did a while ago for GoFundMe. An HTML widget is only made visible on the “new topic” page and gives users helpful tips.

As we are working on offering guided tours for end users next year, I could also see this as a relatively easy to achieve enhancement that could take users by the hand and give them tips to create richer content, e.g. with a small pop-up message when users visit this page.

Yes, this would be possible via Third Party Scripts and Custom CSS, but I agree with what @anirbandutta and @Julian have mentioned, it would be cool if these in-line recommendations would change based on which topic type has been selected via the radio buttons - something that is definitely possible but would require some technical investment or a professional services project.

The method @Julian mentioned is probably the easiest and most stable to implement. By adding a custom HTML widget to the General Sidebar, which includes your recommendations, you could then add a script like the following to ensure that it only becomes visible on the ‘New Topic’ page:

if (window.location.href != 'https://community.example.com/topic/new') {
  document.getElementById('inline-question-recommendations').style.display("none");
 } 
}

@revote so this is an example of some JavaScript that can be added to your Third Party Scripts in order to display / hide a specific widget on a specific page.

You would also need to create a custom HTML widget and add it to your General Sidebar depending on what content you would like to include and how this content should be styled. A very basic example that would work in combination with this code would be something like:

<div id="inline-question-recommendations">
  <p>Before asking a question, make sure you search the community first</p>
</div>

Let us know what you have in mind or if you need any further help.

And one thing: Can there be several HTML widgets in use at the same time? I mean that to the topic page I would like to add certain widget and other widget to the Create topic page. Is this possible?

@revote tried checking your test site, but couldn’t find the snippet anymore.

What code did you see everywhere? Because you should see none

If it was the second bit, keep in mind it needs to be surrounded by <script> tags :) 

Now the code cant be seen anymore but I can display only the Title of the HTML Block in Create topic page. Not the content. 😅 @bas We have separate test site and stage, I have now added widget to the stage, is it possible to check it out?

Ah yes indeed, problem was that the sidebar is also rendered by javascript and our TPS script was firing first :)

I’ve now moved the script into the sidebar (and made the matching of the URL more robust), complete code for the sidebar now looks like this:

<div id="inline-question-recommendations" style="display:none;">   <p>Before asking a question, make sure you search the community first</p> </div>

<script>   if (window.location.href.includes('https://community.example.com/topic/new')) {       document.getElementById('inline-question-recommendations').style.removeProperty("display");  }  </script>

Hope this helps! 😊