The widget is a round button on your site or in your app. It opens a panel where people can search your help center, message your team, share and vote on ideas, and read what's new. Owners and admins set it up.
Your portal shows the same widget on every page by default. To turn that off, switch off Show on your portal under Customize → Widget. It doesn't show yet while your portal is under a path of your site, or on Tuti's own portal under the app's path. The widget on your portal doesn't tick off the Add the widget to your site step on Home. Only the script on your own site does.
Add it to your site
Open Customize → Widget.
Under Add it to your site, choose Copy to copy the script tag, with your project filled in.
Paste it into every page that should show the widget, just before
</body>.
<script src="https://tuti.so/widget.js" data-project="your-project" async></script>data-project is your project's URL name. The widget needs no API key. Its panel is your portal in a frame, so your site's styles can't change it, and it can't read your page.
Once the widget has loaded on your site, the Add the widget to your site step on Home is ticked off. Changes you make under Customize → Widget reach your site within a minute.
What's in the panel
The panel opens at Home. The tabs at its bottom are:
Home: a search of your help center, a way to message you, the news of the visitor's ideas, What's new and your quick links. See Customize the widget's button and Home.
Feedback: Suggest an idea, which posts to the first board you made. As people type a title, ideas that look the same show up, so they can vote on one instead. Below it are the Trending ideas, and Mine for people who are signed in. Anyone can read ideas. Voting and posting need people to be signed in: your site signs them in (see below), or they sign in to your portal in a new tab and vote or post there.
Help center: your docs, with search, collections and articles. It shows once you've published an article. People can also ask a question there and get an AI answer. See Help readers find answers.
Messages: conversations with your team. It shows once you turn on Messages in the widget. See Let people message your team from the widget.
What's new is your changelog. It isn't a tab: people open it from its card on Home. When you announce a changelog entry, the button shows a dot to people who haven't seen it yet. See Write changelog entries.
"Powered by tuti" shows under the tabs unless you've hidden it. See Branding.
If your portal is private, the panel shows "Sign in to see this. It opens in a new tab." to people who may not read it, unless your site signs them in. See Make your portal private.
The widget's own text is in English.
Sign your users in
On your site, the widget can't see who's signed in to your app. Your app can tell it, with a short-lived sign-in token from your server:
<script>
window.TutiSettings = {
identify: () => fetch("/tuti-token").then((response) => response.text()),
};
</script>
<script src="https://tuti.so/widget.js" data-project="your-project" async></script>/tuti-token is a route in your app that signs a token for the current user. Sign your users in with single sign-on shows how to make one.
People your site signs in:
are greeted by their first name on Home, and see the news of their ideas;
vote and post as themselves;
see their own conversations in Messages, without leaving an email;
can read your portal in the widget if it's private and they're allowed to;
show up under Users, with the properties your token sends. See See your users and the companies they're at.
Choose how it shows
data-display on the script tag chooses how the widget shows:
Value | What people see |
|---|---|
| The button. It opens the panel above it. |
| The button. It opens the panel as a full-height drawer on the button's side of the screen. |
| No button. The panel shows inside your page, where you put it. |
<script src="https://tuti.so/widget.js" data-project="your-project" data-display="sidebar" async></script>On screens up to 640 pixels wide, the floating panel covers the whole screen, with its own close button. A sidebar dims the rest of the page there, and tapping the page closes it.
Put the panel in your page
Add an element with data-tuti-inline where the panel should go. Its value picks what the panel opens at:
Value | Opens at |
|---|---|
empty, or | Home |
| Feedback |
| Help center |
| Messages |
| What's new |
<div data-tuti-inline="whats-new" style="height: 700px"></div>
<script src="https://tuti.so/widget.js" data-project="your-project" data-display="inline" async></script>The panel fills the element's width and height, and is at least 500 pixels tall: give the element a height to make it taller. An inline panel has no close button. Elements with data-tuti-inline get a panel with any data-display, so a page can have the button and an inline panel, or several inline panels. Elements your page adds later get one too.
Light or dark
The panel uses your portal's colour scheme and accent colour from Customize → Branding. If the colour scheme there is System, the widget follows each visitor's device. See Branding.
If your site has one look, set the widget's with data-theme on the script tag:
Value | What it does |
|---|---|
| Uses your portal's colour scheme. |
| Always light. |
| Always dark. |
The button follows the theme too, unless you picked its own colour under Customize → Widget: that colour stays the same in light and dark. If your site switches between light and dark without reloading, call Tuti.setTheme(). See Open the widget from your own code.
Related
Open the widget from your own code: your own button, help links and the JavaScript API.