With Custom JavaScript and the Custom HTML Header you can add behaviour and content to your Tender site: a chat widget, analytics, syntax highlighting, a signature for your replies. Both depend on your plan.
Where to add it
- Go to Account & Settings › Settings and click Appearance & Text in the sidebar.
- In the Design box, fill in either or both:
- Custom JavaScript: script that runs on every page, both your public pages and the support dashboard. It's loaded at the end of the page, after the page has been built.
- Custom HTML Header: HTML shown at the top of the main content of every public page (not the dashboard), under the header. It's good for a notice to customers, or for
<link>and<script>tags you'd rather keep out of your JavaScript.
- Click Save your changes.
On the classic design, Use custom JavaScript on mobile view also runs your JavaScript on the classic mobile pages. The modern design has no separate mobile pages, so your JavaScript runs on every screen size.
Technical notes
- Use
jQuery, not$. jQuery is on every page, but on your public pages$belongs to a different library. Wrap your code like this to use$inside it:
jQuery(function ($) {
// your code, run once the page is ready
});
- Because your JavaScript also runs on the dashboard, check where you are before changing a page.
Tender.is_supporterand the page's<body>classes (see Styling your install with custom CSS) help. - Scripts and stylesheets can come from any
https://address, but your JavaScript can only make requests (fetchor XMLHttpRequest) to your Tender site itself, plus the Tawk.to and Olark chat services. - A mistake in your JavaScript can break pages for your staff as well as your customers. If that happens, clear the Custom JavaScript box and save.
The Tender object
Every page has a Tender object with details of the page and the person viewing it. Some of the most useful:
Tender.logged_in |
Whether the visitor is logged in |
Tender.is_supporter |
Whether they're on your support staff |
Tender.user_id, Tender.user_name, Tender.user_email |
Who they are (0 and empty when logged out) |
Tender.kb_enabled |
Whether your site has a knowledge base |
Tender.mobile |
Whether this is the classic design's mobile view |
Tender.discussion_id, Tender.discussion_email |
On a discussion page, for your support staff: the discussion's id and the customer's email address |
To see them all, open any page of your site, open your browser's console and type Tender.
Example: syntax highlighting
highlight.js colours the code in your discussions and articles. This loads it from a CDN and runs it:
(function () {
var css = document.createElement('link');
css.rel = 'stylesheet';
css.href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css';
document.head.appendChild(css);
var js = document.createElement('script');
js.src = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js';
js.onload = function () { hljs.highlightAll(); };
document.head.appendChild(js);
})();
Example: a signature for your replies
This starts the reply box with a signature for some of your support staff, the first time they click into it. Find each person's user id in Tender.user_id (or in the address of their profile page).
jQuery(function ($) {
var signatures = {
10: "Kind regards,\nMaya",
11: "Thanks!\nDaniel"
};
var signature = Tender.is_supporter && signatures[Tender.user_id];
if (!signature) return;
$('#comment_body').one('focus', function () {
if (this.value === '') this.value = '\n\n' + signature;
});
});
Share yours
Made something useful with custom JavaScript? Tell us at support@tenderapp.com and we may add it here.