Skip to main content

We switched to public visibility for our community last week. 🎉

Some early feedback is that people are using search when logged-out and wondering where the full results are. They can see some for public categories and content we have integrated into our federated search. But they don’t see private category content (most of our posts). 

Is there a way to edit a phrase or inject CSS to style the logged-out search results page to indicate that they they should log-in to see the full results? 

The Community source (Phrase nav.title.community) is the one with private permissions. Perhaps is there a way to make this phrase say something else when they’re logged-out? 

 

@DannyPancratz I’ve faced a similar issue recently and decided to based on the fact the user is not a customer and therefore does not have access to our knowledge base, (in our case its a federated search that does appear for them but they cannot access) so I force the preselection of the community source and prevent deselection with a tooltip explaining why this is happening.
If in your case, it is a matter of only private categories not showing up you could use a similar approach with preselected public categories and explaining that other categories are only available to logged in users…

 

I’ve created this Idea with a screenshot of the solution I setup, and what the tooltip looks like when you try to select a source or deselect the currently selected one: 

It’s all custom scripts I added and it seems to be pretty solid for now. I am hoping that driving traffic from our app to the search page will encourage people to register so they can browse 

Hope this helps!


Thanks, @SmartlyGreg! Yes, a tool tip would be a nice solution for this. It’s great to know something like this is possible. 

Are you able to share any of your scripts to point us in the right direction? 


P.S. (I’ll mark this as an answer in a few days to get you those points 😎), but I’m hoping that leaving it open will invite an answer from Insided and/or others in the community. 


@DannyPancratz its not gonna be pretty… I’m an amateur and I can guarantee this is not the most efficient way of doing this but I have also thoroughly tested it and it works!

(I faced an issue which made me duplicate a lot of the code in nested “if” rules so one day I’ll revisit and fix but for now it solved the issue. If you have someone who knows what they are doing set it up it should be a breeze based on this).

Script:

<script> 
if (inSidedData.page.url.includes("/search?")) {
setTimeout(function(){
var communityBox = document.getElementsByClassName("topic-type-checkbox");
var communityLabel = document.getElementsByClassName("instant-search-filter__label-wrapper");
var communitySource = document.getElementsByClassName("instant-search__source-type-filter");
var aSpan = document.createElement("span");
var aSpan2 = document.createElement("span");
var toolTip = document.createTextNode("Sources other than 'Community' are reserved to Smartly.io customers.");
var toolTip2 = document.createTextNode("Sources other than 'Community' are reserved to Smartly.io customers.");
aSpan.appendChild(toolTip);
aSpan2.appendChild(toolTip2);
if (inSidedData.user.role.includes('Member') || inSidedData.user.role == 'roles.guest' || inSidedData.user.role.includes('DOWNGRADED')) {
if (communityLabelm0].className !== "instant-search-filter__label-wrapper refined"){
communityBoxc0].click();
}
setTimeout(function(){
communitySourcem0].classList.add("toolTip");
communitySourcem0].appendChild(aSpan).setAttribute('class', 'toolTipText');
communityBoxc0].disabled = true;
communityBoxc1].disabled = true;
communityBoxc2].disabled = true;
communityLabelm0].classList.add("noClick");
communityLabelm1].classList.add("noClick");
communityLabelm2].classList.add("noClick");
var filterPill = document.getElementsByClassName("instant-search__filter-list-pill");
filterPill 0].classList.add("toolTip");
filterPill 0].appendChild(aSpan2).setAttribute('class', 'toolTipText');
var sourceDismiss = document.getElementsByClassName("instant-search__filter-dismiss");
sourceDismisso0].disabled = true;
sourceDismisso0].classList.add("noClick");
}, 500);
} else if (inSidedData.user.role == 'Customer' || inSidedData.user.role == 'Smartlie' || inSidedData.user.role == 'Service Ops' || inSidedData.user.role == 'Partner') {
} else {
if (communityLabelm0].className !== "instant-search-filter__label-wrapper refined"){
communityBoxc0].click();
}
setTimeout(function(){
communitySourcem0].classList.add("toolTip");
communitySourcem0].appendChild(aSpan).setAttribute('class', 'toolTipText');
communityBoxc0].disabled = true;
communityBoxc1].disabled = true;
communityBoxc2].disabled = true;
communityLabelm0].classList.add("noClick");
communityLabelm1].classList.add("noClick");
communityLabelm2].classList.add("noClick");
var filterPill = document.getElementsByClassName("instant-search__filter-list-pill");
filterPill 0].classList.add("toolTip");
filterPill 0].appendChild(aSpan2).setAttribute('class', 'toolTipText');
var sourceDismiss = document.getElementsByClassName("instant-search__filter-dismiss");
sourceDismisso0].disabled = true;
sourceDismisso0].classList.add("noClick");
}, 500);
}
}, 1000);
}
</script>

Custom CSS:

.noClick {
pointer-events:none;
}
.toolTip {
position: relative;
display: inline-block;
}
.toolTipText {
display: none;
width: 200px;
background-color: #fff;
color: #f05161;
font-size: 15px;
font-weight:400;
text-align: left;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 1;
top: -15px;
left: 90%;
}
.toolTip:hover .toolTipText {
display: inline;
}
li.instant-search__filter-list-pill.toolTip {
background-color: #c08eca !important;
}

Note: There is a delay so the page has time to load results, sadly “onload” didn’t suffice...

Hope this helps!


Reply