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

widget_example.png

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>