Recent searches


No recent searches

Tal Admon's Avatar

Tal Admon

Joined Apr 15, 2021

·

Last activity Feb 04, 2022

Following

0

Follower

1

Total activity

27

Votes

0

Subscriptions

16

ACTIVITY OVERVIEW

Latest activity by Tal Admon

Tal Admon created a post,

Post Discussion - Tips and best practices from the community

We have found a nice way of handling user feedback on negative votes - here it goes:

1. Add a new text field called "Originated Article" - note its ID (31107517 in my example).

2. Add a new form called "Article Feedback" - note its ID (155127 in my example).

3. Edit your theme, and the Article page HTML section add the following code after the article-vote-controls div (change the form ID, and the text to your liking):


We're sorry to hear that!


Please tell us why.

Add the following corresponding CSS:

/* ---- negative followup ----------- */
.negative-followup__c {
display: none;
border: 1px;
border-color: #ccc;
border-style: solid;
padding: 10px;
margin: 18px 0px;
width: 50%;
text-align: center;
background: #ccc;
}

4. Add the following script to the same Article page tab, right in the beginning:

This will bind the "click" actions on the voting buttons and show/hide the negative-feedback section.

5. Add the following script tag to the New-Requests page, right at the top. change the field ID from step 1:

It will populate this field with the URL of the origin article, and hide it from the end user (you can omit the "hide" action so it will be visible to and editable by the user - up to you).

6. Publish all, and you are done.
Your users will see the originated article info on their request page.

 

One user's modifications

Zendesk note: These modifications were submitted by Morgan King.

I actually got it to work by adjusting the reference points. All I changed was the Article page. I wanted to do some different styling.

 

At the top of the Article page I added:

 

Then for my 'No' vote I put: 

{{vote 'down' class='article-vote-down' selected_class='article-voted' role='button'}}

 

Then where I wanted the prompt to appear I put:

 

Also, I opted out of doing the case linking because it also did not seem to be working so I added the field to my support form to prompt people instead.

Posted Apr 13, 2017 · Tal Admon

2

Followers

40

Votes

30

Comments


Tal Admon commented,

Community comment Q&A - Help center and community

Hi Diego,

Not all objects are available in all template pages.

In the case of the Home page, the User object is not available.

Compare, for example the list of available properties of the Home page to the User Profile page:

https://developer.zendesk.com/apps/docs/help-center-templates/user_profile_page

You will see the user object in the last row of the Available Properties table.

So, for the homepage (or any other page) you will need to use the HelpCenter javascipt object which although I can't find about it in the official documentation it is referred to by many Zendesk users in the community.

Cheers,

Tal

 

View comment · Posted Sep 24, 2016 · Tal Admon

0

Followers

0

Votes

0

Comments


Tal Admon commented,

Community comment Q&A - Help center and community

Hi Diego,

You can do this with a bit of javascript: see example below.

The script: note that I set an empty span with the id "user_name". Then, I populate it according to the value of HelpCenter object.

I also set "stranger!" when this value is null (in case of anonymous user), and an exclamation mark after the name.

Let me know if you have any questions or if this does not work out for you.


{{help_center.name}}

Hello,


--Tal

View comment · Posted Sep 24, 2016 · Tal Admon

0

Followers

0

Votes

0

Comments


Tal Admon created a post,

Post Discussion - Tips and best practices from the community

This nice enhancement is based on the Humble Squid theme.

See live example at:

https://moderatortal.zendesk.com/hc/en-us

 

This enhancement is based on the VideoBG plugin by Syd Lawrence:
http://syddev.com/jquery.videoBG/

To make it work, you will need:

Video files in multiple formats (webm, mp3, ogv).
Poster image - which should be the 1st frame of the video.
The plugin file (jquery.videoBG.js) from the site above.

Steps:

1. Add the video files, poster image, and .js file as assets to your theme.

2. Add the following script to the Document head page 

Replace the asset names as needed.

 

Posted Mar 30, 2016 · Tal Admon

0

Followers

5

Votes

2

Comments


Tal Admon commented,

Community comment Q&A - Help center and community

Hi Lisa,

Adding the following Script tag in the Header section in the Theme Editor will do.

The custom link will be shown to anonymous and logged in users as well.

See live at:

https://moderatortal.zendesk.com/hc/en-us
Log in as sun1@example.com / 123456


 



 

View comment · Posted Mar 30, 2016 · Tal Admon

0

Followers

0

Votes

0

Comments


Tal Admon commented,

Community comment Q&A - Help center and community

Hi Danielle,

This is a nice way of using assets in order to create category banners.

The problem with this method is that it requires the category name to be a single word (without spaces).

You can overcome it if you don't use Category Descriptions - more on this later.

Let's begin. Assuming you have several categories (in my example those are cat1 and cat2).

Also, you have a pattern image for each of the categories.

1. Rename your images to the name of the categories (cat1, cat2) without an extension name (important!)

2. Customize your theme, and upload those image files as assets.
Since those files have no extension, when you click on them from the assets list they will get downloaded as files instead of shown in the browser - this is ok.

3. Add the following script to the Category Page, under the {{breadcrumbs}} nav node:



4. Add the following code in the CSS tab:

.category_header_image_wrapper__c {
height: 70px;
}

.category_header_image__c {
height: 50px;
position: absolute;
width: 100vw;
left: 0px;
}

5. Publish and you are done.

----  Examples: -------

-----------

The name of the category will be rendered as the name of the asset you uploaded.

It means that whenever you change your category name, you need also to add a new asset with that name (you can't edit asset name once you uploaded it).

Also, if you don't have a corresponding asset, you will get an unnecessary gap in below the breadcrumbs, where the banner could have been.

If you have a category name with more then one word, this method will not work, because the asset name would not get rendered to the img tag.

Unfortunately, we can't use the Category ID, because this is a numeric value and it won't get rendered as a string for some reason (@zendesk - any solution?)

What you can do, if you don't use Category Descriptions, is to add a single word as the category description of each category.

So if your category name is "Product Updates", add the description "ProductUpdates" and upload a corresponding asset.

All you have to do now, is change the code a bit:

Instead of:
style="background-image: url('{{asset category.name}}');"
do:
style="background-image: url('{{asset category.description}}');"

And also, delete (or comment out) the paragraph node that renders the category description on the page:

{{category.description}}

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

Let me know how this works out for you!

Tal

View comment · Posted Mar 22, 2016 · Tal Admon

0

Followers

0

Votes

0

Comments


Tal Admon commented,

Community comment Q&A - Help center and community

Hi Ola,

Adding this code in the theme editor Article page will do the trick:

There is no fully browser-compatible event that can catch span text change.

Therefore, the solution I found is to use SetInterval function with very short interval (25ms) and long enough time to win the race of changing the text after zendesk modifies the label.

The text may flicker once after you hit the vote button, but most often it won't.

I hope that helps,

Tal

View comment · Posted Mar 16, 2016 · Tal Admon

0

Followers

0

Votes

0

Comments


Tal Admon commented,

Community comment Q&A - Help center and community

There are no logical operators in Handlebars.js...

Just add another nested {{#is}} - maybe others have a better idea?

{{#each categories}}
  {{#is name 'Product Updates'}}
  {{else}}
    {{#is name 'General'}}
    {{else}}
     

           ....

     


    {{/is}}
  {{/is}}
{{/each}}

 

 

View comment · Posted Mar 10, 2016 · Tal Admon

0

Followers

0

Votes

0

Comments


Tal Admon commented,

Community comment Q&A - Help center and community

{{#if}} helper does not supports conditions like equal, not equal, etc.

What you can do is use the {{#is}} helper within the {{#each}} to, for example, prevent a category from showing up in the categories list.

Here is an example on how to eliminate "Product Updates" from the categories list:
Note I have added the following after the {{#each categories}} - the "is" condition is empty, therefore nothing is rendered for the Product Updates category:

{{#is name 'Product Updates'}}
{{else}}

 

Hiding 'Product Updates':

Original:

This syntax is called Handlebars, and is also referenced in Zendesk help center:
https://developer.zendesk.com/apps/docs/help-center-templates/introduction#expressions

 

View comment · Posted Mar 09, 2016 · Tal Admon

0

Followers

0

Votes

0

Comments


Tal Admon created a post,

Post Discussion - Tips and best practices from the community

I implemented tabs using jQuery-UI tabs plugin, which makes it quite simple to embed in Zendesk Help Center home-page. 

First, download jquery-ui from their website, with your favorite design, and add jquery-ui.css as an asset to your theme.

In the Document Head section add the following:



 

In the Home section, add the following:

{{#each categories}}
  {{#is name "Product Updates"}}
   

{{name}}


   

     

            {{#each sections}}
             
  • {{name}}

  •         {{/each}}
         

      {{#each sections}}
       

         

                {{#each articles}}
                 
  • {{title}}

  •             {{/each}}
             

       

     {{/each}}
   

  {{/is}}
{{/each}}

 

============

You can of course customize the design by editing the jquery-ui.css.

The above is based on the example in the jquery-ui tabs example page:
https://jqueryui.com/tabs/

In my example, the category "Product Updates" has two sections - "Left Tab" and "Right Tab" and each have 3 articles in it.

You can add more sections which will added as tabs automatically.

Let me know if you have any questions.

Posted Mar 08, 2016 · Tal Admon

0

Followers

11

Votes

5

Comments