Solved

In-line recommendations on Creating topics

  • 14 December 2022
  • 18 replies
  • 152 views

Userlevel 5
Badge +4

From Richard Millington’s linkedin post today: 

A while back we advised Microsoft on adding in-line recommendations to questions in their community.

The quality of questions has already markedly improved.

Again, there are a lot of easy wins out there.
 

 

Is this possible to do with Insided? If so, how? My hunch is maybe via a third party script. 

 

icon

Best answer by bas 20 December 2022, 14:33

View original

18 replies

Userlevel 3
Badge +2

@DannyPancratz 

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.

 

@olimarrio @Zach B @Julian 

Userlevel 7
Badge +2

I wanted to do the same thing sometime back, especially to ensure a certain quality to Idea submissions but it is not currently possible (easily) is the current understanding.

The nearest shot at this is to change the prefil text in the Description field that you can via

https://community.insided.com/phrases-115/how-to-customize-editor-placeholders-instruction-text-1825
 
Adding a specific phrase to this property:

Module Key Usecase
Forum new.topic.placeholder.textarea This placeholder will be shown
when creating a new topic

 

P.S. A ‘Topic’ is a common template for Idea, Question or Discussion so the text will not be specific to the content type.

Thanks @ravi.kurma 

 

 

Userlevel 2
Badge +3

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.

Userlevel 3
Badge +1

Nice @Julian, really nice. Is this something we can have also? 

Userlevel 4
Badge +2

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");
}
}

 

Userlevel 3
Badge +1

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");
}
}

 

Sorry but I understand here that I should replace our community url to the code but what else I have to do to get this work?

Userlevel 4
Badge +2

@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.

Userlevel 3
Badge +1

Thanks @olimarrio, I will test and get back to you if needed.

Badge +1

@olimarrio is completely correct, this will work just fine.
For the sake of robustness I’d like to suggest one change, where you hide it by default and only show it on the specific page. That way, if the URL structure changes or the Javascript stops working, nothing it shown accidentally to the visitors.

 

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

And

if (window.location.href === 'https://community.example.com/topic/new') {
document.getElementById('inline-question-recommendations').style.removeProperty("display");
}
}
Userlevel 3
Badge +1

I added HTML block to our test site and I added this to it:

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

And added this to Third party script (changed of course the community url):

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

Is there something else to do, to make this work? Only thing what happens now is that I can see some code in every community pages 😀

Userlevel 3
Badge +1

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?

Userlevel 5
Badge +4

@revote I just confirmed with a quick test that you can add multiple “HTML Block” widgets to your sidebar. 

The key part of Oliver’s solution is this code that labels that html widget with an ID. 

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

 

Badge +1

@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 :) 

Userlevel 3
Badge +1

 

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

Haha, I think this is the reason! Thanks a lot.

I try to be a developer and this is the hardest and longest way - learning by doing 😃

Userlevel 3
Badge +1

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?

Userlevel 3
Badge +1

It seems that with this code @olimarrio shared earlier then the content can be seen:

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

With code what @bas shared the title of the HTML Block can be seen only:

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

But, this widget can be seen also in category page, not just in Create topic page. 

Badge +1

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! 😊

Userlevel 3
Badge +1

Thanks @bas, works nicely.

I have few categories where I want to display their own widgets (widget per category). I mean the HTML widget. Is this possible somehow?

Reply