Widget guide
Put your help desk on your site.
One line for a launcher in the corner of every page; one more for a contact form or your answers in the middle of a page. Find your desk's exact code on its Widget page.
The launcher
Paste this into every page, just before </body> — replace your-desk with your desk's address. A button appears in the corner; it opens a panel where visitors search your answers, write to you, and come back to their conversations.
<script src="https://supportdist.com/widget.js" data-desk="your-desk" async></script>Its colour, words, corner and theme are set on your desk's Widget page, and change on every site at once. You can also set these on the tag:
| Attribute | Values | What it does |
|---|---|---|
| data-desk | your-desk | Which help desk. Required. |
| data-position | right · left | The corner, for this page. |
| data-label | any words | The launcher's words, for this page (empty: the icon alone). |
| data-launcher | on · off | off: no button — open the panel from your own (below), or use inline widgets only. |
| data-open | true | Open the panel as soon as the page loads. |
A contact form, or your answers, in a page
Put a div where it should go, and the same script (with data-launcher="off" if you don't want the button too). The frame grows to fit what's in it.
<div data-supportdist="contact" data-desk="your-desk"></div>
<script src="https://supportdist.com/widget.js" data-desk="your-desk" data-launcher="off" async></script>Use data-supportdist="answers" for your quick answers instead. No JavaScript at all? A plain frame works too — give it a height:
<iframe src="https://supportdist.com/w/your-desk/contact" title="Contact us"
style="width:100%;height:640px;border:0"></iframe>Open it from your own buttons
Any element with data-supportdist="open" opens the panel when clicked. Or call the loader from your own code:
<button type="button" data-supportdist="open">Help</button>
<script>
// Or from your own code, once the loader has run:
SupportDist.open(); // open the panel
SupportDist.close();
SupportDist.toggle();
SupportDist.identify({ name: 'Ada', email: '[email protected]' }); // fills the form in
</script>identify only fills the form in for your visitor — it isn't a sign-in, and they can change it.
Only on your sites
By default the widget runs on any site that pastes your code. On your desk's Widget page, list the sites that may show it (for example https://acme.com and https://shop.acme.com), and browsers will refuse it everywhere else.
What it does in your visitors' browsers
- No cookies, no trackers, nothing loaded from anyone but SupportDist.
- It remembers the conversations started in it, in that browser only, so a visitor can come back to them.
- It tells your team the page it was opened on — the address without anything after
?or#.
The privacy policy has the details, for your own privacy notice.
No desk yet?
Open one free — your code is ready the moment you name it.