Add the widget to your app
Updated 14 Nov 2026
The widget puts a Suggest a feature button inside your app. Your users search existing requests, vote, and suggest new ones without leaving your product.
1. Add the script
Open your product's Keys page (Secret keys and examples) to find your public key, which starts with pk_. Add this to every page where users should see the widget:
<script src="https://list79.com/widget.js"
data-key="pk_your_public_key"
data-user-token="TOKEN_FROM_YOUR_SERVER" async></script>Without a user token, people can browse requests but can't vote or suggest.
2. Sign users in with a user token
The user token tells List79 who the signed-in user is, so nobody can vote as someone else. Your server creates it as a JWT signed with HS256, using the widget secret from the Keys page. Keep the secret on your server; never put it in browser code.
| Claim | Required | What it is |
|---|---|---|
sub | Yes | Your user's ID in your app. |
exp | Yes | When the token expires. |
email | No | Lets List79 tell the user when their request moves. |
name | No | Shown with their suggestions and comments. |
locale | No | The language the user chose in your app, such as ja or ja-JP. The widget and portal follow it. See Languages. |
Example in Node.js (jsonwebtoken):
const token = jwt.sign(
{ sub: user.id, email: user.email, name: user.name, locale: user.language },
process.env.LIST79_WIDGET_SECRET,
{ algorithm: "HS256", expiresIn: "1h" });Example in C# (System.IdentityModel.Tokens.Jwt):
var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(widgetSecret));
var token = new JwtSecurityTokenHandler().WriteToken(new JwtSecurityToken(
claims: [new("sub", user.Id), new("email", user.Email), new("name", user.Name), new("locale", user.Language)],
expires: DateTime.UtcNow.AddHours(1),
signingCredentials: new SigningCredentials(key, SecurityAlgorithms.HmacSha256)));If the token is invalid or expired, the widget shows an error instead of quietly letting the user browse anonymously, so mistakes are easy to spot.
3. Options
| Option | What it does |
|---|---|
data-launcher="false" | Hides the floating button. Open the widget from your own button with List79.open(). |
data-color="#bc473e" | Sets the accent colour. |
data-lang="ja" | Sets the language (en, ja, es, fr, de, zh or ko), overriding the token's locale and your product's setting. See Languages. |
From JavaScript you can also call List79.close(), List79.setUserToken(token) after a user signs in or out, and List79.setLanguage(code).
Good to know
- The widget draws inside its own shadow root, so your page's CSS can't break it, and it can't break your page.
- It follows the visitor's light or dark setting.
- If you rotate the widget secret, tokens signed with the old secret stop working until your server uses the new one.