Jordan Dayton

NOTE: If you are using the default ZenDesk Copenhagen theme, this functionality already exists out of the box. We are using a Lotus Theme... specifically: Lotus One and the default date displayed beneath an article author is the "publication date."

I was looking in the ZenDesk help center and community trying to find out how to change the default "publication date" to display the "revision date" for articles. I couldn't find a straight answer (b/c this functionality works, natively) so I adjusted some theme code on our instance and we have it working perfectly now.

See the code snippets at the bottom of this post to see how we updated our code.

1. Visit Guide Admin
2. Click the eye icon: "Customize Design" (Themes)
3. Customize your live theme (but if you are using GitHub sync, you'll need to mod files through Git)
4. Click the Edit code button
5. Select the article_page.hbs file (in the templates folder)
6. Click anywhere in the code section then press CMD+F (to search code)
7. Search for: created_at
8. Change the "created_at" to "edited_at" within the "meta" class div

Voila! Now it will display the revision date, instead of the published date. 

We wanted it to look a little different so we changed the theme code a little bit, using the Copenhagen code as our guide. See the details below!

- - -

Copenhagen theme has the following code:

   {{#is article.created_at article.edited_at}}
      
{{date article.created_at timeago=true}}

   {{else}}
      
{{date article.edited_at timeago=true}}

      
{{t 'updated'}}

   {{/is}}

- - -

- - -

Original Lotus One code:

   {{#if settings.show_article_author}}
      
   {{#link 'user_profile' id=article.author.id}}
   {{article.author.name}}
   {{/link}}
      
   {{/if}}
      
{{date article.created_at}}

This Lotus code will show the Authors name, then right beneath it, it shows the date the article was created or published. This was not good for us. When we updated articles, we wanted to display the date of the most recent update.

- - - 

- - - 

We wanted to display the published date of an article, it's never been updated. If an article has been updated, we wanted to show the word "Updated" and the date of the latest update. We accomplished this by adjusting the following code (in bold). Compare this to the code above, in bold.

   {{#if settings.show_article_author}}
      
   {{#link 'user_profile' id=article.author.id}}
   {{article.author.name}}
   {{/link}}
      
   {{/if}}

   {{#is article.created_at article.edited_at}}
      {{date article.created_at timeago=false}}
   {{else}}
      {{t 'updated'}} {{date article.edited_at timeago=false}}
   {{/is}}

Thanks for chiming in here @.... What exactly should I change? I'm happy to make any updates that makes this usable for others. This code is working well for me.

(Though I did notice one issue... when I visit the page with this code on it, everything displays, as expected... only to those who have a certain TAG associated with their account. If I hit the "Refresh" button on the page, the custom code bit disappears... even if you're a user with the "ticket-access" tag. Any ideas on how to address/debug that?)

Sometimes you want to hide or display/show specified content on a ZenDesk template page (e.g., home_page.hbs) to only certain users. This can be done by adding some basic code snippets to a few ZenDesk theme files. Below are two examples... how to hide content based on user TAGS and the second example is how to hide content based on user ORGANIZATIONS.

...

Here's an example of a CTA bar that we are currently hiding from all users that do not have the tag "ticket-access" associated with their user account: https://codepen.io/jord8on/pen/bGqmLeR

...

Make content visible or hidden based on User Tags
---------------------------------

For this example (which was our actual use case) let's say you wanted to add a section at the bottom of your help center that was only visible to users who had a specific tag associated with their account.

1. Visit https://[your_Guide_HelpCenter_URL]/theming/workbench
2. Find and click the "Customize" button for your current/Live theme (more instruction)
3. Click the "Edit Code" button in the bottom, right corner of the screen
4. Open up the following three files, where you can scroll to the bottom of the file and add the respective code snippets...

(1) home_page.hbs

Can't find what you're looking for?


Submit a ticket

(2) script.js

if (HelpCenter.user.tags=="ticket-access"){
$("div.ticket-access").show();
}

(3) style.css

div.ticket-access {
display: none;
}
.submit-a-request {
display: none !important;
}

The class .submit-a-request will remove the "submit a request" link from the top navigation/menu bar. ツ 

Once these snippets have been added, anything you choose to put within the "ticket-access" div (in this use case) will be only visible to users who have the "ticket-access" tag associated with their account.

...

Make content visible or hidden based on User Organization:
---------------------------------

For this example let's say you wanted to add a section to your home page help center that was only visible to users of a specific organization. 

Follow steps 1-4 above, then use the following snippets. Also note that only users who have been added to an organization called "org-access" will be able to view this custom HTML...

(1) home_page.hbs

Here's a header

Here's the content that only members of "org-access" can see.

(2) script.js

var orgs = HelpCenter.user.organizations;
for (var i = 0; i < orgs.length; i++) {
  if (orgs[i].name == 'org-access') {
   $("div.org-access").show();
  }
}

(3) style.css

.org-access {
  display: none;
}

I hope this wasnt' too convoluted. I just wanted to sift out these key bits of code that helped our team, so that someone else doesn't have to look through hundreds of comments on other threads, to find this basic info. 

---------------------------------

Note: Another way to limit visibility to content would be to use "segments" for users that will allow only users in a particular segment to view certain articles or sections or categories of content. Segments are an organization feature associated with the "Guide" tool in ZenDesk. This post is more focused on being able to customize content visibility on information, links, data, etc. on the home pages or other non-article pages.

Read the comments in these articles for more references and variation code snippets:

• How can I hide ticket forms based on a user's organization?
• How can I hide or show HTML based on user's role or group?
• ↳ Kudos 🙏 to @... and @... for the code snippets above, that were shared here.

In addition to my last question (previous post) I am just now noticing that the table of contents does not render/display when I visit a page. However, when I press the "refresh" button on that page, the TOC then appears. Any idea what I could change, in the code, to make the TOC render immediately, the first time the page loads? @...?

Here's some code that we use and will hopefully be helpful for others.

Guide Admin Console > Guide Settings (Gear Icon) > Security (section) >>>

Tick option:
❑ Display Unsafe Content ➞ Warning: Enabling this will allow potentially malicious code to be executed when viewing articles.

View/Download PDF supplement

You can display PDF's, slide decks, word docs, etc. in this file viewer. Here's what it looks like:

in response to @...'s post here: https://support.zendesk.com/hc/en-us/community/posts/213641488/comments/360001878568

This was the only code snippet I could get to work for our instance of ZenDesk. Thank you for that!

Now I've noticed that when we click one of the links in the TOC it takes us to the respective heading, but the viewport of the screen is about 30 pixels below the actual header.  (see the GIF below). 

@... posted a link to her Guides here and as I looked at the Enalyzer TOC it works perfectly... taking you right to the respective header... placing it perfectly at the top of the screen viewport. 

What modifications could I add to the code below, to adjust the script to make the anchor have the header appear at the top of the viewport?