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')]
...

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 = {
    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 */

    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>