Helpers

Helpers are template expressions that perform certain actions. Help Center has the following kinds of helpers:

Built-in helpers

Help Center templates support the following built-in Handlebars block helpers:

  • if
  • unless
  • each
  • with

To learn how to use them, see Handlebars built-in helpers in the Handlebars docs.

Global helpers

In addition to the built-in Handlebars helpers listed above, Help Center provides the following custom helpers, available in all templates:

Shared helpers

There are also some other custom helpers that are page specific and therefore are only available in certain pages:

asset helper

{{asset 'filename'}}

Inserts the relative path of the specified asset.

Parameters
  • filename the filename of the asset
Attributes

None.

Availability
  • All pages
Example
<script src="{{asset 'jquery_plugin.js'}}"></script>

<img src="{{asset 'background_image.png'}}" />
Output
<script src="/zendesk_cdn_path/jquery_plugin.js"></script>

<img src="/zendesk_cdn_path/background_image.png" />

date helper

{{date timestamp}}

Formats a timestamp into a human-friendly string. The formatted string is localized for the supported languages.

Parameters
  • timestamp an ISO8601 timestamp such as "2015-04-23T13:32:58Z", typically expressed as a Help Center datetime property such as article.created_at
Attributes
  • format (optional, string) displays the date in a specific format. Can be any of the following values: short, medium, long and full
  • timeago (optional, boolean) if true, inserts the date as time elapsed since the present. Example: "2 months ago". Default is false. Only one formatting option (either format or timeago) can be specified at a time. format will take precedence if both are specified
  • class (optional, string) the HTML class to render
format options

You can use any of the following available formats to control the display of date and time stamps. The examples are for the en-us locale, but the formats will differ based on the locale setting.

Format Example Description
short 09/14/2015 A compact format only showing date
medium January 2nd 2016 A date only format displaying full month name
long March 3rd 2015 11:45 A long format displaying full month name and time stamp
full Thursday, June 9th 2016 11:45 Same as long, but also shows the full name of the day
Availability
  • All pages
Example
{{date article.created_at class='metadata'}}
{{date article.created_at class='metadata' timeago=true}}
{{date article.created_at class='metadata' format='short'}}
Output
<!-- Text will be localized -->
<time datetime="2015-01-23T13:32:58Z" class="metadata">January 23, 2015 13:32</time>
<time datetime="2015-01-23T13:32:58Z" class="metadata">2 months ago</time>
<time datetime="2015-01-23T13:32:58Z" class="metadata">01/23/2015</time>

dc (dynamic content) helper

{{dc 'identifier'}}

Use the dc helper to show dynamic content translated according to the current locale.

Parameters
  • identifier indicates the dynamic content to be inserted and translated

If identifier doesn't exist, a default message is shown.

See this article to learn how to add new dynamic content.

Attributes

None.

Availability
  • All pages
Example
{{dc 'example'}}

{{dc 'foo'}}
Output

Supposing that example is defined as dynamic content and foo is not:

<!-- 'example' was found, localized content is shown -->
This is an example.

<!-- 'foo' not found, default message is shown -->
Could not find the placeholder for dynamic content named foo

excerpt helper

{{excerpt string}}

Inserts the first few lines of a content item such as an article or post. If the argument contains any HTML tags, they will be stripped out before the text truncation takes place.

Parameters
  • string a content item, usually expressed as a Help Center content property such as article.body
Attributes
  • characters (optional, integer) the number of characters to display from the start of the item. Default is 120
Availability
  • All pages
Example
{{excerpt article.body characters=100}}
Output
<!-- First 100 characters of the article body followed by "..." -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqu...

is helper

{{#is 'left' 'right'}}
  ...
{{/is}}

Use the is helper to execute a template block conditionally, given an expression result. If the comparison evaluates to true (the two values are equal), then the is block will be executed, if given. Otherwise, if the comparison evaluates to false, the else block will be executed, if given. The comparison is always based on the === JS operator.

Parameters
  • left value that will be used in the comparison. This is required and can be a path, a string, a number a boolean or a variable
  • right value that will be used in the comparison. This is required and can be a path, a string, a number a boolean or a variable
Attributes

None.

Availability
  • All pages
Example
{{#is article.author.name 'John'}}
  The author of the article is John.
{{else}}
  The author of the article is not John.
{{/is}}

isnt helper

{{#isnt 'left' 'right'}}
  ...
{{/isnt}}

Use the isnt helper to execute a template block conditionally, given an expression result. If the comparison evaluates to true (the two values are not equal), then the isnt block will be executed, if given. Otherwise, if the comparison evaluates to false, the else block will be executed, if given. The comparison is always based on the !== JS operator.

Parameters
  • left value that will be used in the comparison. This is required and can be a path, a string, a number a boolean or a variable
  • right value that will be used in the comparison. This is required and can be a path, a string, a number a boolean or a variable
Attributes

None.

Availability
  • All pages
Example
{{#isnt article.author.name 'John'}}
  The author of the article is not John.
{{else}}
  The author of the article is John.
{{/isnt}}

json_stringify helper

Converts a normal string into a JSON string that you can use in your JavaScript.

{{json_stringify 'string'}}
Parameters
  • string a normal string with unescaped newlines, quotes, or unicode characters
Attributes

None.

Availability
  • All pages
Example
<script>
  var title = "{{json_stringify article.title}}";
</script>
Output
<script>
  var title = "Setting the \"enduser\" value";
</script>

link helper

{{link 'identifier'}}

Use the link helper to link to other pages in Help Center. This helper is available in all page templates.

This will render both the HTML tag and link text. A default string in the proper locale is used for the link text. For example, the new_request identifier will render the default "Submit a Request" string as a link. You can also customize the string by using the block version of the link helper. Example:

{{#link 'identifier'}}
  Custom link text
{{/link}}

If you only need a URL, see the page_path helper.

The link helper also takes care of hiding the link from certain users. For example, in a restricted Help Center you may want to hide the "Submit a Request" link from unregistered users. You can display alternative text when the link is hidden. Example:

{{#link 'identifier'}}
  Link text
{{else}}
  This link is not available for you
{{/link}}

Note that the alternative text won't be wrapped in a link tag.

Parameters
  • identifier indicates the destination page to link to

You can link to the following destination pages:

Identifier Destination page
help_center Help Center Home page
new_request New Request page
my_activities My Activity page
requests Request List page
contributions Contributions page
subscriptions Following page
community Community main page
topics Topics page
sign_in Sign-in page
user_profile User profile page for a specific user
Attributes

Varies from identifier to identifier. See below.

Availability
  • All pages
Example
{{link 'new_request' class='submit-a-request' role='button'}}

{{#link "my_activities" class="my-activities" role="button"}}
  {{t "my_activites"}}
{{else}}
  <span>Activities are not available for you</span>
{{/link}}
Output
<a href="/new_request" class="submit-a-request" role="button">
  Submit a Request
</a>

<!-- If user is not allowed to see My Activities page -->
<span>Activities are not available for you</span>
Link identifiers
help_center link

{{link 'help_center'}}

Displays a link to the Help Center home page.

Attributes
  • class (optional, string) an HTML class
  • role (optional, string) an HTML role
  • selected (optional, string) the HTML aria-selected attribute. Can be "true" or "false"
Availability
  • All templates
Example
{{link 'help_center' class='help-center-link'}}
new_request link

{{link 'new_request'}}

Displays a link to the page for submitting a new request.

If you use ticket forms (available in the Enterprise plan), you can link to a specific ticket form with the ticket_form_id attribute. You can get the id from the administrator interface in Zendesk Support or from the Ticket forms API.

Attributes
  • class (optional, string) an HTML class
  • role (optional, string) an HTML role
  • selected (optional, string) the HTML aria-selected attribute. Can be "true" or "false"
  • ticket_form_id (optional, string) the id of the ticket form to display. Requires a ticket form that's visible to end users. Available only on the Enterprise plan.
Availability
  • All templates
Examples
{{link 'new_request' class='submit-a-request' role='button'}}

<!-- referencing a specific ticket form -->
{{link 'new_request' ticket_form_id='1234'}}
my_activities link

{{link 'my_activities'}}

Displays a link to the page with the end user's activities. If signed in as an agent or Help Center manager, the link is not displayed.

Attributes
  • class (optional, string) an HTML class
  • role (optional, string) an HTML role
  • selected (optional, string) the HTML aria-selected attribute. Can be "true" or "false"
Availability
  • All templates
Example
{{link 'my_activities' class='my-activities' role='button'}}
requests link

{{link 'requests'}}

Displays a link to the page listing the end user's requests. The link is not displayed if the user is anonymous.

Attributes
  • class (optional, string) an HTML class
  • role (optional, string) an HTML role
  • selected (optional, string) the HTML aria-selected attribute. Can be "true" or "false"
  • sort_by (optional, string) the request attribute to sort by. Valid values: created_at and updated_at.
Availability
  • All templates
Example
{{link 'requests' class='requests-link'}}
request link

Displays a link to the page showing a single request.

Attributes
  • id (required, integer) the id of a request
  • class (optional, string) an HTML class
Availability
  • All templates
Example
{{link 'request' id=request.id, class='followup-link'}}
contributions link

{{link 'contributions'}}

Displays a link to the page listing the end user's community contributions. The link is not displayed if the user is anonymous.

Attributes
  • class (optional, string) an HTML class
  • role (optional, string) an HTML role
  • selected (optional, string) the HTML aria-selected attribute. Can be "true" or "false"
Availability
  • All templates
Example
{{link 'contributions' class='contributions-link'}}
subscriptions link

{{link 'subscriptions'}}

Displays a link to the page listing the content items that the end user is following. The link is not displayed if the user is anonymous.

Attributes
  • class (optional, string) an HTML class
  • role (optional, string) an HTML role
  • selected (optional, string) the HTML aria-selected attribute. Can be "true" or "false"
Availability
  • All templates
Example
{{link 'subscriptions' class='subscriptions-link'}}
community link

{{link 'community'}}

Displays a link to the community main page. The link is not displayed if the community is disabled.

Attributes
  • class (optional, string) an HTML class
  • role (optional, string) an HTML role
  • selected (optional, string) the HTML aria-selected attribute. Can be "true" or "false"
Availability
  • All templates
Example
{{link 'community' class='community-entrance' role='button'}}
topics link

{{link 'topics'}}

Displays a link to the page that lists all community topics. The link is not displayed if the community is disabled.

Attributes
  • class (optional, string) an HTML class
  • role (optional, string) an HTML role
  • selected (optional, string) the HTML aria-selected attribute. Can be "true" or "false"
Availability
  • All templates
Example
{{link 'topics' class='community-topics-link' role='button'}}
sign_in link

{{link 'sign_in'}}

If your Help Center requires users to sign in and the user is not signed-in, displays a link to the page for signing-in.

Attributes
  • class (optional, string) an HTML class
  • role (optional, string) an HTML role
  • selected (optional, string) the HTML aria-selected attribute. Can be "true" or "false"
Availability
  • All templates
Example
{{link 'sign_in' class='submit-a-request'}}
user_profile link

{{link 'user_profile' id=user.id}}

Displays a link to the user's profile page

  • If user profiles are enabled, links to the user's profile
  • If user profiles are disabled, links to the agent interface if the current user is an agent. Otherwise displays the body without linking
Attributes
  • id (required, id) the user's id
  • class (optional, string) an HTML class
  • role (optional, string) an HTML role
  • selected (optional, string) the HTML aria-selected attribute. Can be "true" or "false"
Availability
  • All templates
Example

On the User Profile page: html {{link 'user_profile' id=user.id class='user-profile-link'}}

On the Article Page: html {{#each comments}} {{link 'user_profile' id=author.id class='user-profile-link'}} {{/each comments}}

logo_url helper

{{logo_url}}

Inserts the relative path of the logo.

Parameters

None.

Attributes

None.

Availability
  • All pages
Example
<img src="{{logo_url}}">
Output
<img src="/zendesk_path/logo.png">

page_path helper

{{page_path 'identifier'}}

If you don't need the HTML and link text rendered by the link helper, you can use the page_path helper. It's available in all Help Center pages.

Parameters
  • identifier indicates the destination page to link to

The identifiers are the same as the link helper.

Attributes

The attributes are also the same, except for the CSS-related ones like class, role and selected, which aren't supported.

Availability
  • All pages
Example
{{page_path 'new_request' ticket_form_id='1234'}}
Output
/path_to_request_form

search helper

{{search}}

Inserts a search box.

Parameters

None.

Attributes
  • scoped (optional, boolean) If scoped is true and the helper is on the category, section, or article page, searches only the articles in the current category. If the helper is on the topic or post page, searches only the posts in the current topic. Default is false.
  • submit (optional, boolean) If true, render the submit button. Default is false.
  • instant (optional, boolean) If true, enables Instant Search to provide HC article suggestions while you type in the search box. Instant Search article suggestions do not respect the scoped parameter if it is set.
  • class (optional, string) class name to be added to the form
  • placeholder (optional, string) placeholder value for the search input element
Availability
  • All pages
Example
{{search}}
Output

If inserted in the Home page:

<section class="search-box">
  <form accept-charset="UTF-8" action="/hc/en-us/search" class="search" method="get" role="search">
    <div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /></div>
    <input id="query" name="query" placeholder="Search" type="search" />
    <input name="commit" type="submit" value="Search" />
  </form>
</section>

signed_in helper

{{signed_in}}

Boolean that represents whether the user is logged in or not.

Parameters

None.

Attributes

None.

Availability
  • All pages
Example
{{#if signed_in}}
  Awesome! You're logged in!
{{else}}
  Oh noes, you are not logged in!
{{/if}}
Output
<!-- considering that `signed_in` evaluates to `true` -->
Awesome! You're logged in!

user avatar helper

{{user_avatar class='user_avatar'}}

Use the user_avatar helper to insert the current user avatar image. An image is always shown, anonymous users see a default fallback avatar image. For performance reasons Help Center uses a special internal data attribute in the generated HTML image element to load the actual image file using JavaScript.

Parameters

None.

Attributes
  • class (optional, string) a space separated list of class names that will be added to the generated <img> tag
Availability
  • All pages
Example
{{user_avatar class='rounded-avatar'}}
Output
<img alt="Avatar" class="rounded-avatar" src="https://secure.gravatar.com/avatar/123456" />

t (translation) helper

{{t 'key'}}

Use the t helper to show translated texts for each locale available in your Help Center.

Parameters
Attributes
  • count (optional, integer) only applies for certain keys
  • query (optional, string) only applies for certain keys
  • total (optional, integer) only applies for certain keys
  • upvotes (optional, integer) only applies for certain keys
Availability
  • All pages
Example
{{t 'back_to_homepage'}}
{{t 'post_count' count=1}}
{{t 'show_all_articles' count=section.article_count}}
{{t 'found_helpful' upvotes=article.upvote_count total=article.vote_count}}
Output
<!-- Text will be localized -->
Take me back to the home page
7 posts
See all 13 articles
4 out of 5 found this helpful
Available keys

You can use any of the following available keys to display translated strings.

Keys English translation Notes
add_comment Add comment
all All
assignee Assigned to
attachments_heading Attachments
back_to_homepage Take me back to the home page
browse browse
browse_knowledge_base browse Knowledge Base
browse_community Community
ccd_requests Requests I'm CC'd on
ccs CCs
ccs_description The following people will also be notified when this request is updated:
comment comment/comments The word 'comment' in singular or plural form. Requires a 'count' parameter.
comment_edited Edited by %{editor_name} Requires an 'editor_name' parameter.
comments Comments
comments_count %{count} comment/comments Requires a 'count' parameter.
community Community
contributions Contributions
empty empty
featured_posts Featured posts
follower_count %{count} followers Requires a 'count' parameter.
following Following
following_users Following Signifies that the subject of the subscription is a user instead of content.
found_helpful %{upvotes} out of %{total} found this helpful Show number of up votes out of the total. Requires 'upvotes' and 'total' parameters.
group Group
home Home
internal Only visible to agents and managers
knowledge_base Knowledge Base
member_since Member since
logo Logo
latest_activity Latest activity by %{name} Requires a 'name' parameter.
mistyped_address_or_moved_page You have mistyped the address or the page may have moved.
my_activities My activities
my_requests My requests
my_subscriptions My subscriptions
new_post New post
no_activity_yet No activity yet
no_content Nothing to see here yet.
no_contributions You currently have no contributions.
no_featured_posts No featured posts yet.
no_requests No requests found
no_results No results for "%{query}"
no_subscriptions You currently have no subscriptions
nonexistent_page The page you were looking for doesn't exist
not_authorized You're not authorized to access this page.
not_following You are not following anything yet.
official_comment Official comment
oops oops.
organization Organization
organization_requests Organization requests
pending_approval Pending approval
post Post
posts Posts
post_count %{count} post/posts Requires a 'count' parameter.
priority Priority
promoted Promoted
promoted_articles Promoted articles
related_articles Related articles
request Request #%{request_number} Requires a 'request_number' parameter
requests Requests
results One result for "%{query}" / %{count} results for "%{query}" Requires 'count' and 'query' parameters.
see_all_sections See all sections... Requires a 'count' parameter.
share Share
show_all_articles See all %{count} articles Requires a 'count' parameter.
show_all_posts Show all posts
show_topics Show topics
submit Submit
submit_a_request Submit a request
submitted_by %{requester_name} submitted this request
task_due_date (Due on %{due_date}) Requires a 'due_date' parameter.
topics Topics
vote vote/votes The word 'vote' in singular or plural form. Requires a 'count' parameter.
was_this_article_helpful Was this article helpful?
what_is_your_post_about What is your post about?

Available keys for table headers:

Keys English translation
created Created
requester Requester
id Id
last_activity Last Activity
status Status
subject Subject
subscription Following
title Title
type Type
vote_sum Vote Sum

breadcrumbs helper

{{breadcrumbs}}

Inserts a breadcrumbs navigation element.

Parameters

None.

Attributes

None.

Availability
  • Article page
  • Category page
  • Contributions page
  • Request page
  • Request List page
  • Search Results page
  • Section page
  • Following page
  • New Community Post page
  • Community Post page
  • Community Topic List page
  • Community Topic page
  • Community Post List page
Example
{{breadcrumbs}}
Output

If inserted in an Article page:

<ol class="breadcrumbs">
  <li><a href="/hc/en-us">My Help Center</a></li>
  <li><a href="/hc/en-us/categories/123-General">General</a></li>
  <li><a href="/hc/en-us/sections/123-Tips-Tricks">Tips & Tricks</a></li>
</ol>

form helper

Some pages in Help Center include one or more forms. Form helpers simplify building forms and form elements.

{{#form form_name}}
...
{{/form}}

This will safely insert an HTML form in the templates. See the page-specific documentation to find out which forms you can use in each template.

You must use the form helpers like label, input, and checkbox to render the form fields. See more below.

Parameters
  • form_name one of the following: comment, organization, post, request, or requests
Attributes
  • class (optional, string) the HTML class to render
  • id (optional, string) the HTML id attribute to render
Availability
Form Available in
comment Article page
comment Request page
organization Request page
requests_filter Request List page
post New Post page
Example
{{#form 'comment' class='comment-form'}}
   ...
{{/form}}
Output

If inserted in an Article page:

<form class="comment-form" accept-charset="UTF-8" action="/hc/articles/123456/comments" method="post">
  <input name="authenticity_token" type="hidden" value="something_secret" />
  <input name="utf8" type="hidden" value="✓">
  ...
</form>
Form field helpers

Help Center provides the following form field helpers that must be used inside the form helper:

You can also use these advanced form field helpers:

Identifiers

Identifiers distinguish similar fields inside the same form. The following identifiers are available:

Identifier Available in Form Field(s) Description
body Article page, Post page and Request page comment textarea, wysiwyg Identifies a text field for content (use wysiwyg for rich content)
official Post page comment label, checkbox Identifies a checkbox field to mark a comment as official
title New Post page post label, input Identifies a text field for the post title
details New Post page post label, wysiwyg Identifies a text field for content (use wysiwyg for rich content)
topic New Post page post label, select Identifies a dropdown to select a topic
mark_as_solved Request page comment label, checkbox Identifies a checkbox to mark a request as solved
ccs Request page comment token_field Identifies an email (CC) field
organization Request page organization select Identifies a dropdown to select an organization
organization Request List page requests_filter label, select Identifies a dropdown to select an organization
query Request List page requests_filter input Identifies a search field
status Request List page requests_filter label, select Identifies a dropdown to select a status
input

{{input 'identifier'}}

Creates a textbox based on the given identifier.

Parameters
  • identifier the name of the field (optional). Depends on the page and the form that has the field. See identifiers. In some cases, such as when you want to create a submit button, you don't need an identifier.
Attributes
  • type (optional, string) the type of the input, valid values are: text, submit, email, number. Default is text
  • class (optional, string) the HTML class to assign to the form
  • id (optional, string) the html id (only available if no identifier is given, otherwise the identifier will set this value)
  • name (optional, string) the HTML name. Only available if no identifier is given. Otherwise the identifier will set this value
  • value (optional, string) the value of the input
  • label (optional, string) the HTML placeholder. Only available if no identifier is given. Otherwise the identifier will set this value
  • autofocus (optional, boolean) whether the input field is auto-focused or not. False by default
  • required (optional, boolean) whether the input field is mandatory or not
Examples
{{input type='submit' name='submit' id='submit-button'}}

{{input 'first_name' type='text' class='small'}}

{{input type='text' class='small' id='first_name' name='user[first_name]' label='Please insert your name'}}
textarea

{{textarea 'identifier'}}

Creates a textarea based on the given identifier.

Parameters
  • identifier the name of the field (required). Depends on the page and the form that has the field. See identifiers.
Attributes
  • class (optional, string) the HTML class to assign to the form
  • rows (optional, string) specifies the visible height of a text area, in lines
  • cols (optional, string) specifies the visible width of a text area
Example
{{textarea 'body' rows='4' class='awesome'}}
checkbox

{{checkbox 'identifier'}}

Creates a checkbox based on the given identifier.

Parameters
  • identifier the name of the field (required). Depends on the page and the form that has the field. See identifiers.
Attributes
  • class (optional, string) the HTML class to assign to the form
Example
{{checkbox 'mark_as_solved' class='red'}}
label

{{label 'identifier'}}

Creates a label based on the given identifier.

Parameters
  • identifier the name of the field (required). Depends on the page and the form that has the field. See identifiers.
Attributes
  • class (optional, string) the HTML class to assign to the form
  • for (optional, string) the form element the label is bound to
Example
{{label 'mark_as_solved' for='request-status-select' class='red'}}
select

{{select 'identifier'}}

Creates a select input based on the given identifier.

Parameters
  • identifier the name of the field (required). Depends on the page and the form that has the field. See identifiers.
Attributes
  • class (optional, string) the HTML class to assign to the form
Example
{{select 'mark_as_solved' class='red'}}
required
{{#required 'identifier'}}
  block
{{/required}}

Executes the block if the 'identifier' field is required.

Parameters
  • identifier the name of the field (required). Depends on the page and the form that has the field. See identifiers.
Example
{{#required 'mark_as_solved'}}
  This is required.
{{else}}
  This is not required.
{{/required}}
validate
{{#validate 'identifier'}}
  block
{{/validate}}

Executes the block if the 'identifier' field has errors.

Parameters
  • identifier the name of the field (required). Depends on the page and the form that has the field. See identifiers.
Example
{{#validate 'mark_as_solved'}}
  The data introduced has errors.
{{else}}
  The data introduced is right.
{{/validate}}
error

{{error 'identifier'}}

Renders the error message associated with the given identifier, if any.

Parameters
  • identifier the name of the field (required). Depends on the page and the form that has the field. See identifiers.
Example
{{error 'mark_as_solved'}}

pagination helper

{{pagination}}

Renders pagination elements that let a user browse more than one page.

This will only render if the number of elements is greater than the size of a page.

Parameters

None.

Attributes

None.

Availability
  • Home page
  • Article page
  • Contributions page
  • Request List page
  • Search Results page
  • Section page
Example
{{pagination}}
Output

On the second page if inserted in a Section page:

<nav class="pagination">
  <ul>
    <li class="pagination-first">
      <a href="/hc/en-us/sections/123-MySection">«</a>
    </li>
    <li class="pagination-prev">
      <a href="/hc/en-us/sections/123-MySection" rel="prev"></a>
    </li>
    <li>
      <a href="/hc/en-us/sections/123-MySection" rel="prev">1</a>
    </li>
    <li class="pagination-current">
      <span>2</span>
    </li>
    <li>
      <a href="/hc/en-us/sections/123-MySection?page=3" rel="next">3</a>
    </li>
    <li class="pagination-next">
      <a href="/hc/en-us/sections/123-MySection?page=3" rel="next"></a>
    </li>
    <li class="pagination-last">
      <a href="/hc/en-us/sections/123-MySection?page=3">»</a>
    </li>
  </ul>
</nav>

share helper

{{share}}

Adds elements for sharing content on social media.

Parameters

None.

Attributes

None.

Availability
  • Article page
Example
{{share}}
Output

If inserted in an Article page:

<ul class="share">
  <li><a href="[sharing url to Facebook]" class="share-facebook">Facebook</a></li>
  <li><a href="[sharing url to Twitter]" class="share-twitter">Twitter</a></li>
  <li><a href="[sharing url to LinkedIn]" class="share-linkedin">LinkedIn</a></li>
  <li><a href="[sharing url to Google]" class="share-googleplus">Google+</a></li>
</ul>

Note that the sharing urls might change in the future if the social media service changes their sharing API.

subscribe helper

{{subscribe}}

Inserts a "follow" link that gives visitors the option of receiving update notifications by email. A section follower is notified when somebody adds an article or comment. A topic follower is notified when somebody adds a post or a comment. An article or post follower is notified when somebody adds a comment. An organization follower is notified when somebody in the same organization creates a new request. A user follower is notified when the user adds an article, post, or comment.

Parameters

None.

Attributes

None.

Availability
  • Section page
  • Article page
  • Topic page
  • Post page
  • Request list page
  • User Profile page
Example
{{subscribe}}
Output

In article page, if user is not subscribed:

<a href="#" aria-selected="false" class="article-subscribe">Follow</a>

In article page, if user is subscribed:

<a href="#" aria-selected="true" class="article-unsubscribe">Unfollow</a>

vote helper

{{vote 'element' class='element-class' selected_class='element-selected-class' role='button'}}

Use the vote helper to insert vote-related elements. These elements must apply to a specific votable resource (i.e. an article). When the user is authenticated and therefore able to vote, all vote elements are synced (i.e. if user votes up in an article, its labels and counters update their values without refreshing the page). When the user is not authenticated, the 'up' and 'down' buttons act like normal links, redirecting user to the sign in page.

Parameters
  • element one of the following: up, down, label, sum, or count
Element Description
up renders a vote up button
down renders a vote down button
label renders the "X out of Y found this helpful" label
sum renders the sum of all votes
count renders the total number of votes
Attributes
  • class (optional, string) the class of the element
  • selected_class (optional, string) the class to be added to the element when it is selected (applies to 'up' and 'down' elements only)
  • role (optional, string) the HTML role to render
Availability
Example
{{#with article}}
  {{vote 'up' class='article-vote-up' selected_class='article-voted' role='button'}}
  {{vote 'down' class='article-vote-down' selected_class='article-voted' role='button'}}
  {{vote 'label' class='article-vote-label'}}
  {{vote 'count' class='article-vote-count'}}
  {{vote 'sum' class='article-vote-sum'}}
{{/with}}
Output

If user is authenticated:

<a role="button" rel="nofollow" class="article-vote-up article-voted" aria-selected="true" title="Yes" href="#"></a>
<a role="button" rel="nofollow" class="article-vote-down" aria-selected="false" title="No" href="#"></a>
<span class="article-vote-label">2 out of 3 found this helpful</span>
<span class="article-vote-count">3</span>
<span class="article-vote-sum">1</span>

If user is not authenticated:

<a role="button" rel="nofollow" class="article-vote-up article-voted" title="Yes" href="path_to_sign_in"></a>
<a role="button" rel="nofollow" class="article-vote-down" title="No" href="path_to_sign_in"></a>
<span class="article-vote-label">2 out of 3 found this helpful</span>
<span class="article-vote-count">3</span>
<span class="article-vote-sum">1</span>