Recent searches
No recent searches
Tip: Add friendly links to your ticket field help text
Posted Apr 07, 2022
Credit: Unable to source, but it's present in our tenants. Many thanks to the original dev on this!
Scenario: You would like to include a link in your ticket field help text, but Zendesk does not process it natively without it being a full link (and long links aren't pretty!). Friendly link names make it easier for users to understand what resource you're linking them to.
Zendesk Product(s) Involved: Zendesk Guide, Zendesk Support
Requirements: jQuery. Please see Importing or upgrading jQuery for more information.
Solution: A little bit of scripting magic will enable you to use friendly links in your help center!
- Go to Help Center -> Guide Admin -> Customize Design -> Edit code
- Verify jQuery is installed in the document_head.hbs file, following the example in Importing or upgrading jQuery
- In the code editor, open script.js
- In script.js, place the following code within your document.addEventListener function:
// Get all instances of {Text|url} -- example {My Link|www.google.com}
$('.form-field p').each(function(){
var raw = $(this).text();
// Create array around brackets
var result = raw.match(/\{(.*)\}/);
// Only affect areass with matches
if(result){ var text = result[1].split("|");
// Build the link
var link = '<a target="_blank" href="' + text[1] + '">' + text[0] + '</a>';
// Replace html
var newHtml = $(this).text().replace(result[1],link);
newHtml = newHtml.replace("{",'').replace('}','');
$(this).html(newHtml);
}
}); - Publish the script.js file
- On any ticket field, on the Ticket Field create/update page, use the following format for links in your help text:
{friendly_name|https://www.example.com}
- Your links should now show up on your ticket form as a friendly link!
An example of this would be:
"You can find additional terms on our support center."
The above, as ticket field help text, would be represented in the Ticket Field editor as:
You can find additional terms on our {support center|https://www.example.com}.
3
1 comment
Lewis Dobbins
This is great, but no longer working for v4 templating (since it seems like form-field p' is no longer right but can't figure out the differences.) Any advice?
0