HTML Enhancement Options

When using Issuetrak, the look and feel of the site are important as it helps provide additional information or better expresses the usage and usability of the site for your users.  Whether this is the login screen having additional text or images or issue submission screens having text advising what information needs to be filled out, having the ability to customize the text using HTML code is helpful to better customize your site to your needs.

HTML can be added in multiple locations, however, some locations do have a character limit which may limit the amount of additional formatting that can be added.

HTML code allows for you to add additional functionality to your site, for example:
  • Images that can not only be used as images, but as links to take a user to another page in your site or article in your Knowledge Base.
  • Collapsible field sections allowing text or additional information to be hidden and once clicked, expanded to show additional details.

 

Locations that can have HTML code added

It is possible to add images wherever HTML code can be added to a screen.

Note: Images must be placed in a publicly accessible area in order for them to load to a user. The easiest way to do this is through a Knowledge Base article used as an Image Repository.

Screen Location to edit
Login Screen Administration > System > System Settings > Site Appearance.
Home screen for Agents Administration > System > System Settings > Site Appearance.
Custom Screens Administration > Custom Screens > edit the screen in question > Add Screen text.
Email Notifications Administration > Email Notifications > Custom Messages > select the Event you wish to edit, such as on note for when a note is added to an issue.
Knowledge Base
  • For existing articles: Home > Knowledge Base > locate the article to be edited > On the left select edit.
  • For new Articles: Home > Knowledge Base > Add
 
 

Adding Images

If you are not adding an image directly to a note or description field in an issue, the best way to host and display images on your Issuetrak site is to upload them into a Knowledge Base article and reference the file by copying the image address and pasting it into the source code (Tools > <>Source Code) at the location where you would like to have the image appear.

Edit or create a new article and follow these steps:

  1. Set up your 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 desire. 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". 

Use this image URL address combined with simple HTML to add images throughout your Issuetrak site. Most text fields accept HTML. Experiment with what looks best and don't be afraid to try interesting combinations!

The Login Screen and the Home Screen for Agents will need to have the code directly added to the field as these fields have a character limit that may cause your image to not render correctly, or they may not render at all.

In the below code example is an example of the format needed in order to have these images added to these screens.

Example Code

Stand Alone image:

<img src="http://{sitename}/Graphics/homeoffice-01.png" alt="" width="33%" />

Image used as a link to a Knowledge Base article:

<a href="http://{sitename}/Kb_ArticleView.asp?ArticleNbr=10" target="_blank" rel="noopener"><img src="http://{sitename}/Graphics/homeoffice-01.png" alt="" width="33%" /></a>

Example Login Screen

Example Knowledge Base Article

 

Collapsible Sections

As seen throughout this article there have been sections of text and code that have been in a collapsed state but could be expanded to see additional details.

These collapsible sections can also be added to Issuetrak's Custom Screens and Knowledge Base to help organize text, provide example documentation, or highlight specific information that would otherwise make a screen harder to read.

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.

  1. To add a collapsible section to an Issue Custom Screen or Knowledge Base article we want to start by going to Tools > <> Source code.
  2. Copy and paste the following code to the code editor screen, if there is a different background color you wish to use, you can edit the background-color section to the Hex code for the color desired:
<div style="padding: 15px; border-radius: 8px; background-color: #75DEEF; color: black;cursor: pointer;">
<details><summary><strong>Text to click to open the collapsed section</strong></summary>

<pre>
Text\Tables\Code to show in the collapsible section.
</pre>

</details>
</div>

  1. Save the changes.
  2. On the Rich Text Editor, you should now see a collapsible section that was created.
  3. Edit the text to your desired text or additional HTML as you wish.
  4. Save or Update your article. You should be directed to viewing your updated article with all of the images you've uploaded so far.

Below is a code example to create collapsible fields in the Custom Screens.

Example Code

<div style="padding: 15px; border-radius: 8px; background-color: #E9E9E9; border: 1px solid #FFFFFF; color: #333333;">
<details><summary>Need help?</summary>
<ul>
<li>strong>Subject:</strong> What do you want to name this issue? A short summary of the problem is usually best.</li>
<li><strong>Full Description:</strong> What is the issue? Detail the problem you're encountering and any additional information that might be helpful. Insert images to provide visual examples, or use text styling to organize your description.</li>
</ul>
</details></div>

Example Code Output

Need help?
  • Subject: What do you want to name this issue? A short summary of the problem is usually best.
  • Full Description: What is the issue? Detail the problem you're encountering and any additional information that might be helpful. Insert images to provide visual examples, or use text styling to organize your description.

 

Custom links to other locations

While having a link on a page may be helpful to navigate to pages in and outside of Issuetrak, having a link look like a button or an image can help dramatically with the look and feel of your site.

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

  1. In the description field, press the "Insert/edit image" icon () to upload a new image.
  2. 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.
  3. 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 desire. You can always edit the article to add more later. 
  4. Highlight the Image you want to turn into a link and click the "Insert/edit link" icon () and follow the prompts.
  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, if you click on the image now it will take you to the URL input into the link.

Below is some sample code that we use on our Support site that appears in our Issues' Custom Screens.  This code creates links that look like buttons that can be used to direct users to different areas in Issuetrak.

Example Code

   
<div style="text-align: center; font-weight: 300; font-size: 2em; padding-bottom: 10px;">Welcome to Issuetrak!</div>
<div style="text-align: center; font-weight: 300; font-size: 1.5em; padding-bottom: 5px;">Please use the links below to access information from our Help Center:</div>

<div style="text-align: center; padding-top: 10px; padding-bottom: 10px; line-height: 3em;">
	<a href="https://helpcenter.issuetrak.com/home/2434-issuetrak-navigation" rel="noopener" style="background-color: #E9E9E9 ; border-radius: 14px; padding: 5px 15px; margin: 0 10px;" target="_blank">Navigation</a>
	<a href="https://helpcenter.issuetrak.com/home/1996-issue-hub" rel="noopener" style="background-color: #E9E9E9 ; border-radius: 14px; padding: 5px 15px; margin: 0 10px;" target="_blank">Issue Hub</a>
	<a href="https://helpcenter.issuetrak.com/home/2000-submitting-issues" rel="noopener" style="background-color: #E9E9E9 ; border-radius: 14px; padding: 5px 15px; margin: 0 10px;" target="_blank">Submitting Issues</a>
	<a href="https://helpcenter.issuetrak.com/home/2001-searching-issues" rel="noopener" style="background-color: #E9E9E9 ; border-radius: 14px; padding: 5px 15px; margin: 0 10px;" target="_blank">Searching Issues</a>
	<a href="https://helpcenter.issuetrak.com/home/2435-about-issuetrak" rel="noopener" style="background-color: #E9E9E9 ; border-radius: 14px; padding: 5px 15px; margin: 0 10px;" target="_blank">About Issuetrak</a>
</div>

<div style="text-align: center; font-weight: 400; font-size: 1em; padding-top:15px;">
	<a href="https://helpcenter.issuetrak.com/home/2011-site-appearance" style="color: #00B5E2 ;" target="_blank"><i>Learn how to configure this message</i> ✎</a>
</div>

Example Code Output

Welcome to Issuetrak!
Please use the links below to access information from our Help Center: