Remove certain html styles when showing articles, based on liquid tags (for instance portal.user.is_agent)

Here’s a description of the issue we are facing:

• Customer would like to show parts of an article based on the login. When an enduser is not logged in, some content should not be displayed.
• We can currently only set rights on a certain folder
• Freshdesk proposed to use customization based on HTML styles
• We have advised to add the following div’s:
https://1drv.ms/t/s!Ajqsz2QS9a7rgP9EXM5myMHt5CCKkg?e=L0zSNc

Based on the above div’s we can use liquid to remove the elements:
https://1drv.ms/t/s!Ajqsz2QS9a7rgP9DbNCL4qIwHFwM7Q?e=pf4oU8

This works, but the body will always be pushed to the browser. We can therefore not guarantee that a search engine will still see the content and therefore index it. Also the internal Freshdesk search will still index and display the content in a preview.

Anyone have a way to filter the “article.body” before it’s presented to the browser? Or how can we make sure the content is not shown to the internal (Freshdesk) and external (Google/Bing/etc) search engines?

Regards,

Nika.

Hi @nikagl,

Trying to understand the area of the place where you are seeing this issue? If I am not wrong you are trying to customize the Freshdesk Portal?

Did you find any time a search result that is not intended to be public or be indexed?

Meanwhile, I will look out for the ways to get help to share accurate answers. :slight_smile:

Hi Saif,

Thanks for your quick response! Yes, we’re trying to use customization of the portal to hide the content using the suggested solutions (see the txt snippets I included as I couldn’t find another way to share code in this community). I have read the customization guide, all posts on this community that included some details and even googled about liquid to see what options I have, but couldn’t find a solution so far (other than removing the div after the page is rendered).

And yes, search results currently include the content that is not intended to be public.

Regards,

Nika.

1 Like

Hi @nikagl,

I have an update from the team on this. Looks like Freshdesk portal customizations allows to custom layers of css and html to be laid out after the required custom CSS and HTML codes are reached to the browser. The current form of manipulation using liquid works essentially because browser renders the wanted sections and hides certain sections during the page render itself.

That said, the all the content (wanted and non-wanted) is received by the browser. This often let’s search engines to skim through the content and show in the results. As per Freshdesk team, this is unfortunately it is unavoidable.

1 Like

You’d find a </> option in the text editor before you write. That would help you avoid linking to external text files :slight_smile: .

True, Nika… This is very unique problem that we have seen so far which may be the reason why you were not able to find the related topics on the forum.

I will have this converted as feedback request and pass it on to the relavant team.

1 Like

Hi Saif,

I did use the </> button, but it stripped of stuff, will try it again though.

I have recoded it somewhat. Instead of removing the style using the element with removeChild, I now manipulate the Article Body using jQuery. This feels slightly safer as the full Article Body is only passed to Javascript instead of first on the page, and then removed:

<!-- If the portal user that is logged in is an agent, it's an Agent -->
<!-- Company name 'Test' is used to see whether, it's an Engineer -->

{% if portal.user.is_agent or portal.user.company_name == 'Test' %}
	<!-- either an agent or a user with company name 'Test' is logged in -->
	{{ article.body }}
{% else %}
	<!-- no agent and no engineer logged on, assuming it's a consumer -->
	<!-- removing secret content -->
	<script>
		var ArticleBodyString = `{{ article.body }}`;
		var jHtmlObject = jQuery(ArticleBodyString);
		var editor = jQuery("<p>").append(jHtmlObject);

		// removing agent section
		editor.find("#atag-agent").remove();

		// removing engineer section
		editor.find("#atag-engineer").remove();

		var newHtml = editor.html();
		document.write(newHtml);
	</script>
{% endif %}

The following was the original code (so I can remove the onedrive files in my first post):

<!-- If the portal user that is logged in is an agent, it's an Agent -->
<!-- Company name 'Test' is used to see whether, it's an Engineer -->

{% if portal.user.is_agent or portal.user.company_name == 'Test' %}
	<!-- either an agent or a user with company name 'Test' is logged in -->
	<!-- showing all, not removing elements -->
{% else %}
	<!-- no agent and no engineer logged on, assuming it's a consumer -->
	<!-- removing secret elements -->

	<!-- removing agent section -->
	<script type="text/javascript">
		var elem = document.getElementById('atag-agent');
		elem.parentNode.removeChild(elem);
	</script>

	<!-- removing engineer section -->
	<script type="text/javascript">
		var elem = document.getElementById('atag-engineer');
		elem.parentNode.removeChild(elem);
	</script>
{% endif %}

And this is the way we add these div’s to the article:

<div id="atag-consumer">This should always be shown<div>
<div id="atag-agent">This should only be shown if it's an agent<div>
<div id="atag-engineer">This should only be shown if the logged on user is part of company "Test"<div>

Regards,

Nika.

1 Like