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!

  1. Go to Help Center -> Guide Admin -> Customize Design -> Edit code
  2. Verify jQuery is installed in the document_head.hbs file, following the example in Importing or upgrading jQuery
  3. In the code editor, open script.js
  4. 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);
            }

      });
  5. Publish the script.js file
  6. 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}
  7. 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

1 comment

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


Please sign in to leave a comment.

Didn't find what you're looking for?

New post