Solved

Start a topic widget

  • 26 April 2021
  • 5 replies
  • 127 views

Badge

I’d love to implement on our community homepage and ‘start a topic’ widget such as the one on LinkedIn or Facebook. 

Can anyone suggest a way to go about this? See below so you know what I mean. 

 

 

Cheers. 

icon

Best answer by SmartlyGreg 20 December 2021, 08:05

View original

5 replies

Badge

Hey @Gabolino !

It looks like this thread got missed somehow and never had any response. I fancied picking up some bonus points, so I’ve been digging through the Unanswered Questions feed to find threads like these.

The best I can think of right now would be to just have a regular widget with a link to the topic creation page, similar to the one that’s on the right hand side of this thread. I’m not sure you can easily make one that’s quite as powerful as that example however, since it would need to seamlessly and smoothly transition from the homepage to the topic creation page without losing anything that’s already been entered. It’s not as simple as it sounds!

Could be a good one for an Idea post though. It would probably need a new type of widget and some other changes to make it truly possible, but you never know.

Badge

@Gabolino @Blastoise186 I’m no developer so this was not super easy for me but thanks for the challenge, thats how you improve!

 

There is a way to do this as I understood the question at least:

  • HTML Widget on homepage for example with a first steps of start a question (Title and question content)
  • Submitting the form takes you to the new topic page with the content input on previous form exists in the new page
  • To create the question the user needs to add the missing required fields such as the category (This could be made default or based on the page the widget is inserted in).

 

All you need is a simple form for the HTML part, to insert wherever you want it in front end:

<div style="padding:25px 20px;border-radius:10px;"> 
<h2>Ask Your Question</h2>
<form action="/topic/new?cQW">
<input type="hidden" name="cQW" value="true" />
<br />
<textarea id="cQWTitle" rows="1" cols="50" style="padding-left:10px;resize:none;" placeholder="Title"></textarea><br />
<textarea id="cQWQuestion" rows="4" cols="50" style="padding-left:10px;" placeholder="Question"></textarea>
<br /><br />
<button id="cQWButton" onclick="cQWFunction()" class="btn btn--primary">Create Question</button>
</form>
</div>

 

And then a not as simple (at least for me) Javascript code to put in the Third Party scripts:

<!-- Custom Question Widget Function -->
<script>
<!-- Define Function for onClick -->
function cQWFunction() {
console.log("Start!");
<!-- Define the variable with content of the form -->
var cQWTitleValue = document.getElementById("cQWTitle").value;
sessionStorage.setItem("sessionTitle", cQWTitleValue);
var cQWQuestionValue = document.getElementById("cQWQuestion").value;
sessionStorage.setItem("sessionQuestion", cQWQuestionValue);
};


<!-- Have the New Topic Page use the values -->
if (inSidedData.page.url.includes("/topic/new?cQW=true")) {
setTimeout(function(){
<!-- Title field -->
var newTopicTitle = document.getElementById("topic_title");
var cQWTitleValue = sessionStorage.getItem("sessionTitle");
newTopicTitle.setAttribute("value", cQWTitleValue);
<!-- Question Field inside the text editor iFrame-->
var editorFrame = document.getElementsByClassName("cke_wysiwyg_frame cke_reset");
var newTopicQuestion = editorFrame[0].contentWindow.document.getElementsByClassName("post__content--new-editor");
var cQWQuestionValue = sessionStorage.getItem("sessionQuestion");
newTopicQuestion[0].setAttribute("class", "post__content--new-editor post__content post__content--openingPost cke_editable cke_editable_themed cke_contents_ltr cke_show_borders");
newTopicQuestion[0].innerHTML = "";
var newP = document.createElement("p");
newP.innerHTML = cQWQuestionValue;
newTopicQuestion[0].appendChild(newP)
}, 1000);
};
</script>

 

Downsides: Based on the way I chose to implement the solution.

  • The automatic search that occurs when typing in the new title does not take place (There might be a way to make that happen, I did not check).

 

Improvements: That can be made with a few tweaks if needed.

  • Adding a preselected category as part of the HTML form OR based on where the HTMNL form is inserted. (Sidebar of a given category could set the question to that category by default).
  • Adding multiple buttons to pre-select the type Question, Conversation or even Idea OR again based on the page the HTML form is inserted in the code could pre-select the proper type of new topic. 
    (I’ve posted about the use of Javascript to have a New Topic link that defaults to Conversation instead of Question type, which can be used for this: )

Hope this helps!

Badge

Hey @Blastoise186 @SmartlyGreg sorry forgot to answer. Ideally I'd like the user to be able to submit the question from the homepage, but @SmartlyGreg your solution is as close as it gets I believe.

 

For a non developer that's pretty incredible. I'll close look into your suggestion. 

 

Thanks and happy new year! 

Badge

@Gabolino ha! I actually didn’t realise the original topic was started such a long time ago, glad I resurfaced it, as it was fun. Thank you, I hope it helps!

Happy new year!

Badge

For anyone interested you can test the feature without logging in on this page: https://smartly-en-community.almostinsided.com/

Just type something and hit the create question button to see it live!

Reply