About Embedded HTML

Beginning with version 16.5, Issuetrak provides the ability for you to add embedded HTML to your site, up to a 10,000 character limit. When we talk about embedded HTML or embed codes, we're referring to little snippets of JavaScript or HTML that you can leverage to improve your site experience or add functionality.

---

What can you do with embedded HTML?

You can do a bunch of stuff!

• Track users' navigation behavior
• Change styling of certain elements in your site. For example, maybe you want the page title to be larger!
• Add syntax highlighting functionality, so that programming languages can be rendered in a more friendly way than plaintext.
• Chat tools
• Marketing automation platforms, like HubSpot
• Presentations, such as Canva
• Forms

---

Security Concerns

Adding code from third-party sources can be a potential source of security problems.

• Malicious code can compromise your site's user and data security
• Code can add useful features, while it may also contain vulnerabilities that make it possible to compromise data security
• If you forget to periodically check for updated code, you may similarly place your site and/or data at risk

---

Site Security

Your site security settings will need to be adjusted in IIS to allow the use of HTML code and scripts that are hosted by a third-party. That's because we've implemented new Content Security Policy settings in the product to ensure that the additions and changes made to the site via the embedded code were, in fact, deliberately made.

But what needs to change? The best implementation is a content security policy that is based on the code you decide to add to Issuetrak. Issuetrak has provided a preset content security policy that you can use, but it may require some customization for best effect on your site.

The content security policy in IIS will need to be changed by updating the URL Rewrite rules (both HTTP and HTTPS) so that they are disabled instead of enabled.

Steps:

1. On your web server, navigate to the IIS console.
2. Find and click on the site along the lefthand side that you want to enable the content security policy for embedded code.
3. Click on the URL Rewrite module.
4. Look at the Outbound Rules (the bottom half of the window) and expand the first column so that the entire name for every rule is visible.
5. Find the two rules that have names ending in With Embedded HTML FOR HTTP and With Embedded HTML FOR HTTP.
6. Click on each of the above rules and then choose Enable Rule along the righthand side.
7. Restart your site in IIS.
8. Verify that you can add code to the Embed HTML field (see below) and that it behaves appropriately.

---

How to Add Embedded HTML

If you've made up your mind that you want to add embedded code to your site, then follow these instructions:

Steps:

1. Click on the settings gear icon in the top right to open the Settings lightbox. Find and click on Features beneath System.
2. Scroll down to the "Embedded HTML" section.
3. Paste the code you want your site to use.
4. Click on update.

Now test out the functionality of the code you just added!

---

Example Code Snippets

Below are a few example HTML code snippets that our Support Team frequently uses to visually enhance issue pages. These enhancements make it easier to identify important information and better anticipate customer needs.

Following the steps outlined above, you can copy and paste these snippets into the Embedded HTML section to call attention to particular fields on your site.

Example 1 – Highlight Private Notes in Red

This snippet identifies notes marked as Private and changes the label "Private" (located beneath the name of the team member who added the note) to red text. This makes it easier to spot sensitive internal comments when reviewing issues quickly.

Before	After

<script>
function highlightPrivateNotes() {
  // Get the current page URL to apply this logic only on specific pages
  const currentPage = window.location.href;

  // Define the URL patterns for the pages where you want this to run
  const targetPagePatterns = [
    /CSIssue_Edit\.asp/i,
    /CSIssue_View\.asp/i,
    /CSIssue_Close\.asp/i,
  ];

  // Check if the current page URL matches any of the target patterns
  const shouldRun = targetPagePatterns.some(pattern => pattern.test(currentPage));

  if (!shouldRun) {
    return; // Exit the function if it's not a target page
  } 

  // Find all  elements that have an 'id' starting with 'note_row_'
  const noteRows = document.querySelectorAll('tr[id^="note_row_"]');

  noteRows.forEach(row => {
    // Find the specific  element with the class "issueLabel vTop"
    const labelCell = row.querySelector('td.issueLabel.vTop');

    if (labelCell && labelCell.innerHTML && labelCell.innerHTML.includes('<b>Private&nbsp;</b>')) {
      labelCell.innerHTML = labelCell.innerHTML.replace(/<b>Private&nbsp;<\/b>/g, '<span style="color:red;font-weight:bold;">Private&nbsp;</span>');
    }
  });
}

// Run the function when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', highlightPrivateNotes);
</script>

 

Example 2 – Highlight High or Critical Priorities in Red

This snippet scans the View Issue screen and highlights the Priority field in red if it’s set to High or Critical. This visual cue helps quickly flag urgent issues for faster attention.

Note: This code works only if your site uses priority values named High and/or Critical. If your site uses different terms, you can easily update the snippet to match your specific naming conventions.

Pro Tip: You can also customize this script to target a different field—just change the field name on line 33 to the one you want to highlight.

Before	After

<script>

(function () {
  // Initialize attempt counter
  let attempts = 0;

  // Set an interval to repeatedly check if the cell is available
  const waitInterval = setInterval(() => {
    console.log(`Attempt #: ${attempts}`);

    // Stop trying after 100 attempts (10 seconds)
    if (++attempts > 100) {
      clearInterval(waitInterval);
      return;
    }

    // If the target cell is found and highlighted, stop the interval
    if (highlightCells()) {
      console.log("Success!");
      clearInterval(waitInterval);
    }
  }, 100); // Run check every 100 milliseconds

  // Function to find and highlight the Priority cell
  function highlightCells() {
    // Only run this code on these specific pages
    const targetPages = ['/CSIssue_View.asp'];
    if (!targetPages.includes(window.location.pathname)) {
      return true; // Exit if not on a target page
    }

    // Locate the table cell that contains "Priority:" and get the next cell (its value)
    const cell = $("td:contains('Priority:'):not(:has(*))").next();
    if (cell.length === 0) {
      return false; // Cell not found yet
    }

    // Define highlight styles based on priority values
    const statusStyles = {
      "critical": { color: "white", backgroundColor: "red" }, 
      "high": { color: "white", backgroundColor: "red" }  
    };

    // Normalize the cell's text and apply corresponding style
    const status = cell.text().toLowerCase().trim();
    if (status in statusStyles) {
      cell.css(statusStyles[status]);
      console.log(status); // Log the matched priority
    }

    return true; // Signal that work is done
  }
})();
</script>