The widget's script gives your page a small JavaScript API. Use it to open the panel from your own button, open help at the right article, sign your users in and show your own "new" dot. It assumes you've added the widget to your site.

Use your own button

To hide Tuti's button and open the panel from yours, add data-hide-launcher to the script tag:

<script src="https://tuti.so/widget.js" data-project="your-project" data-hide-launcher async></script>
<button onclick="Tuti.open()">Help</button>

Open help at an article

Any element with data-tuti-article opens the panel at that article when it's clicked. The value is the end of the article's /docs/… address:

<a href="https://your-project.tuti.so/docs/exporting-your-data" data-tuti-article="exporting-your-data">How do exports work?</a>

With an href, the link still works where the script isn't loaded. A click with Ctrl, Cmd or Shift held, to open a new tab or window, still follows the link. Elements your page adds later work too.

Call the widget

Once the script has run, window.Tuti has:

Call

What it does

Tuti.open()

Opens the panel where it was: Home the first time.

Tuti.open({ tab })

Opens it at "home", "feedback", "docs" (the Help center), "messages" or "whats-new".

Tuti.open({ article: "slug" })

Opens it at an article from your docs.

Tuti.close()

Closes it, as Escape and the panel's close button do. Inline panels stay.

Tuti.identify(getToken)

Signs your users in. getToken returns a fresh sign-in token, or a promise of one. See Sign your users in with single sign-on.

Tuti.setTheme(theme)

"light", "dark" or "auto" (your portal's colour scheme). Open panels change at once, and so does the button unless you gave it its own colour.

Tuti.unseen()

true when there's something new for this person: a changelog entry you announced in the last 30 days that they haven't seen in What's new, or, for people you sign in, a reply from your team they haven't read in Messages.

Tuti.on("unseen", callback)

Calls callback(unseen) once that's known, and again whenever it changes.

Tuti.open() works with every data-display, and with inline it opens a floating panel. It can also open a part you turned off under Show in the widget, and Tuti.unseen() counts those parts, while Tuti's own button leaves them out. See Customize the widget's button and Home.

Show a dot on your own button

Tuti.on("unseen", (unseen) => {
  document.querySelector("#help-dot").hidden = !unseen;
});

For people you sign in, seeing an update on one device clears the dot on their others.

Sign someone in or out

Call Tuti.identify() after the script loads, or set identify in TutiSettings before it (below). The widget calls getToken whenever it needs a token, and sends the token only to your portal. When someone signs out of your app, call Tuti.identify() again with a function that returns nothing: the widget then shows nobody's conversations or ideas.

Tuti.identify(() => null);

Set things up before the script loads

Instead of attributes on the script tag, you can set window.TutiSettings before the script:

<script>
  window.TutiSettings = {
    identify: () => fetch("/tuti-token").then((response) => response.text()),
    display: "sidebar",
    hideLauncher: false,
    theme: "auto",
  };
</script>
<script src="https://tuti.so/widget.js" data-project="your-project" async></script>

Setting

Same as

identify

Tuti.identify(getToken)

display

data-display: "launcher", "sidebar" or "inline"

hideLauncher

data-hide-launcher, with true

theme

data-theme: "auto", "light" or "dark"

Where the script tag has the attribute too, the attribute wins.

If something doesn't work

The widget writes what's wrong to your browser's console, starting with "Tuti widget:", for example when data-project is missing or a tab name isn't one of the five.