Adding custom JavaScript

With Custom JavaScript and Custom HTML Header, you can customize Tender to your heart's content! Adding functionality, customizing the placement of elements, integrating with 3rd party services, the possibilities are endless*.

To start customizing your Tender, go to:

• Account & Settings in the main menu
• then Appearance & Text on the left sidebar

Only available on select plans.

Technical Notes

Your custom JavaScript runs on both the dashboard view and the forum view. This allows you to customize the experience for your customers, but also for your staff.

You should always access jQuery using jQuery (or a closure). On the frontend, $ refers to a different library.

Example: Syntax Highlighting

highlight.js is a JavaScript library that offers syntax highlighting with advanced heuristics: you can simply drop it on a page and it will find all code blocks, detect the language used in each, and add highlighting. Let's add it using the Yandex CDN.

In Custom HTML Header:

<link type="text/css" rel="stylesheet" href="//yandex.st/highlightjs/6.2/styles/default.min.css">
<script type="text/javascript" src="//yandex.st/highlightjs/6.2/highlight.min.js"></script>

In Custom JavaScript:

hljs.initHighlightingOnLoad();

And BAM! Syntax Highlighting! You can customize the CSS directly by starting from one of the numerous themes provided, but this is a simple way to start.

Example: show user's email address

If your support staff would like to see the user's email address without clicking their profile, you can retrieve that from the Tender hash (Tender.user_email) and append it to the DOM like so:

if (Tender.is_supporter && Tender.discussion_id) { 
  var l = $$('h4 .user-link')[0];
  l.insert({after: " (<em>" + l.dataset.userEmail + "</em>)" });
}

Example: custom signature

You can add a mail-like signature to your comment box for a few of your users with this code (or all of them, with a bit of modification!)

var signatures = {
  YOUR_USER_ID: "Kind Regards,\nJimbo Jones",
  OTHER_USER_ID: "--\nThanks!" 
};

if ($$('comment_body') && 
    Tender.is_supporter && 
    signatures[Tender.user_id]) { 
  
  $('comment_body').observe('focus', function(evt) {
    if (this.value == "") {
      this.value = signatures[Tender.user_id];
    }
  });
}

You can find your user ID and all sorts of other helpful variables by viewing any Tender html page source and look for the Tender = { ... code.

Other Examples

Added a great functionality to your Tender? Let us know! We can add it here so that everyone can profit :)