Adding and Customizing the Tender Widget
Copy and paste the code below right before the
</body>
of your HTML document.
<script src="https://yourtendersite.tenderapp.com/tender_widget.js" type="text/javascript"></script>
See Site Settings
> Extras
>
Widget
for more info.
Example Usage
Advanced Configuration
By default, the widget will install a blue tab to the right side of your screen to open the widget. If you'd like to remove the widget and use your own links to trigger the widget, you need to set some variables before including the script.
You need to set hideToggle
to true, and pass an
array of elements that will show the widget when clicked to
widgetToggles
. sso
can be used to log the
user in automatically based on credentials from your host
application. All three parameters are optional.
<script type="text/javascript" charset="utf-8">
Tender = {
hideToggle: true,
sso: "unique-sso-token-of-current-user",
widgetToggles: [document.getElementById('help')]
}
</script>
<script src="https://yourtendersite.tenderapp.com/tender_widget.js" type="text/javascript"></script>
Note that the widgetToggles
array uses whichever
javascript framework you have installed. Here are some other
examples:
...
// jQuery, get element with id of help
widgetToggles: $('#help'),
// jQuery, get elements with class of widget
widgetToggles: $('.widget'),
// Prototype/MooTools, get all elements with class of widget
widgetToggles: $$('.widget'),
// Prototype/MooTools, get elements with id of help and widget
widgetToggles: [$('help'), $('.widget')]
...
If you want to use a custom element as a toggle, please be aware that the element needs to exist in the DOM before you reference it. This means that you should put the script tag at the very bottom of your html, like this:
<html>
<body>
...
<a id="help">Help</a>
...
<script type="text/javascript" charset="utf-8">
Tender = {
hideToggle: true,
widgetToggles: [document.getElementById('help')]
}
</script>
<script src="https://yourtendersite.tenderapp.com/tender_widget.js" type="text/javascript"></script>
</body>
</html>
This is so the help
element already exists in the
page when the JavaScript gets parsed. If you put the script tag in
the head
for example, then help
has not
been created yet, and document.getElementById('help')
will return null
.
Widget Location
<script src="https://yourtendersite.tenderapp.com/tender_widget.js?location=top" type="text/javascript"></script>
To change the location of widget you would add
?location=top
(where top
could be
replaced with left
, right
or
bottom
) to the script tag.
More configuration options
You can default the tab to the knowledge base, hide the new discussion form completely, and more.. Obviously you won't use all of these at once!
<script type="text/javascript" charset="utf-8">
Tender = {
title: 'TITLE', /* prefilled subject for the discussion */
body: 'BODY', /* prefilled body for the discussion */
hide_discussion: true, /* hide the discussions tab. */
hide_kb: true, /* hide the knowledge base tab */
home: 'kb', /* show the knowledge base tab as the default tab */
category: 'questions', /* default to 'questions' category - set this to a category permalink */
forcePrivate: false, /* force private discussions */
sso: "unique-sso-token-of-current-user",
widgetToggles: [document.getElementById('help')]
}
</script>
<script src="https://yourtendersite.tenderapp.com/tender_widget.js" type="text/javascript"></script>