A light bulb in front of a background of words

Traktip – Using HTML to Enhance Your Issuetrak Site

It’s time for another Traktip!

Did you know that there are multiple places within Issuetrak that you can implement your own custom HTML? From the login screen to the issue submission screens, you can use HTML coding to customize the appearance and functionality of your site.

The following locations in Issuetrak have HTML coding options:

  • Login Screen
  • Home Screen for Agents
  • Custom Screens
  • Email Notifications
  • Knowledge Base

We’ll walk you through a few of the main ways you can use custom coding in your site!

Adding Images in Issuetrak

In order to insert an image in your site, you need to host your image. The easiest way to host an image for use in your Issuetrak site is to upload it to your site’s Knowledge Base. Here’s how:

    1. Set up your Knowledge Base article normally. Add an article title, category, and tags as you see necessary. You may want to consider making the article private if you'd like to restrict access to your image library.
    2. In the article description field, press the "Insert/edit image" icon to upload a new image.
    3. Follow the prompts to upload your image. The safest way to ensure your image will appear is to choose the "Upload" option and select an image from your computer.
    4. After uploading your image, it will appear in the article description field. Repeat the last few steps as many times as you need to upload all of the images. You can always edit the article to add more later.
    5. Save or Update your article. You should be directed to viewing your updated article with all of the images you've uploaded so far.
    6. From this view, right-click on an image and select "Copy image address".

You can then use this image URL combined with HTML coding to text fields around the site.

For the HTML coding sample and examples of how to use it, take a look at our Help Center article!

Adding Collapsible Sections

Using collapsible sections helps to keep your pages looking clean and can hide large areas of text or images so that they don’t clutter up your site! Here’s how to set those up:

  1. This code must be entered through the Tools > Source Code option in the Rich Text Editor in order to properly format it on the screen.
  2. To add a collapsible section to an Issue Custom Screen or Knowledge Base article we want to start by going to Tools > Source Code.
  3. Copy and paste the code to the code editor screen. (Code is provided in the Help Center link below.
  4. Save the changes.
  5. On the Rich Text Editor, you should now see a collapsible section that was created.
  6. Edit the text to your desired text or add additional HTML as you wish.
  7. Save or Update your article. You should be directed to viewing your updated article with all of the images you've uploaded so far.

For the HTML coding sample and more examples, head to the Help Center article!

Adding Custom Links

Linking within Issuetrak can be useful to help navigate users to the right spot. In addition to plain links, you can also make your links look like buttons or images to improve the look of your site!

To add a custom image link to Knowledge Base articles or your Custom Screens:

  1. Follow the instructions under “Adding Images in Issuetrak” up to step 4.
  2. Highlight the image you want to turn into a link and click the “Insert/Edit Link” icon and follow the prompts.
  3. Save or Update your article!

And as mentioned above, you can head to our Help Center article for a more in-depth description of these processes, code samples, and examples! We’ll be updating this Help Center article in the future with more tips, so be sure to check back over time.

If you have any questions at all, please reach out to your Account Manager! We’re always happy to help.