The widget puts Tender on your own website: a Help & Support tab at the edge of the page that opens a window where visitors can start a discussion or search your knowledge base, without leaving your site.
Adding it to your website
Copy this line into your website's pages, just before </body>, with your site's address in place of yoursite.tenderapp.com:
<script src="https://yoursite.tenderapp.com/tender_widget.js" type="text/javascript"></script>
Account & Settings › Extras › Widget shows the line with your address already in it.
The widget is plain JavaScript and doesn't need jQuery or any other library on your page.
Where the tab goes
The tab sits on the right of the page. Add ?location=left, ?location=top or ?location=bottom to the script's address to move it:
<script src="https://yoursite.tenderapp.com/tender_widget.js?location=left" type="text/javascript"></script>
Using your own link instead of the tab
To open the widget from your own button or link, hide the tab and tell the widget which elements open it. Set a Tender object before the script tag, and put both after the elements they use, at the end of the page:
<a href="#" id="help">Help</a>
...
<script type="text/javascript">
Tender = {
hideToggle: true,
widgetToggles: [document.getElementById('help')]
};
</script>
<script src="https://yoursite.tenderapp.com/tender_widget.js" type="text/javascript"></script>
widgetToggles is a list of elements (document.querySelectorAll('.help-link') works too). The elements must already be on the page when the script runs, which is why the script goes at the end: in the <head>, document.getElementById('help') finds nothing.
You can also open the widget from your own code with Tender.showWidget(). Visitors close it with Close or the Escape key.
More options
All of these are optional and go in the same Tender object:
<script type="text/javascript">
Tender = {
title: 'Problem with my invoice', // fills in the subject
body: 'Order number: ', // fills in the message
widgetEmail: 'jane@example.com', // fills in the email address
category: 'billing', // picks this category (its permalink)
forcePrivate: true, // makes the discussion private
home: 'kb', // opens on the knowledge base tab
hide_kb: true, // hides the knowledge base tab
hide_discussion: true, // hides the new discussion tab
sso: 'MULTIPASS' // logs the visitor in (see below)
};
</script>
category_id on the script's address does the same as category:
<script src="https://yoursite.tenderapp.com/tender_widget.js?category_id=billing" type="text/javascript"></script>
Logging visitors in
If your website knows who the visitor is, you can log them in to the widget with a multipass, so they don't have to give their email address. Make a multipass for them on your server, as for single sign-on, and put it in sso. Make a fresh one for each page view, since a multipass expires.
Styling the widget
Add CSS for the inside of the widget window in Custom Widget CSS (Account & Settings › Settings › Appearance & Text, on plans with custom CSS). The tab and the window's frame are part of your own page, so style those in your website's CSS: the tab is #tender_toggler and the window is #tender_window.