How to Set Up Ideolo Widget on Your Website
Learn how to integrate the Ideolo feedback widget into your website with this comprehensive step-by-step guide. We cover script installation, configuration, and secure SSO token generation for multiple programming languages.
Introduction
The Ideolo widget allows you to collect user feedback, feature requests, and display your product roadmap directly on your website. This guide will walk you through the complete setup process, from adding the widget script to implementing secure user authentication.
Step 1: Add the Widget Script
First, add the Ideolo widget script to your website. Place this script tag in the <head> or before the closing </body> tag of your HTML:
<script src="https://app.ideolo.co/widget/index.js"></script>This script loads the Ideolo widget React application and makes it available for use on your page.
Step 2: Add the Widget Container
Next, add a container div where you want the widget to appear. The widget is configured using HTML data attributes:
<div
id="ideolo-board"
data-base-url="https://app.ideolo.co/"
data-board-hash="YOUR_BOARD_HASH"
data-sso-token="YOUR_SSO_TOKEN"
data-default-language="en"
></div>Configuration Attributes
- id="ideolo-board" - Required. The widget looks for this specific ID.
- data-base-url - The Ideolo API base URL (usually https://app.ideolo.co/).
- data-board-hash - Your unique board identifier. Get this from your Ideolo dashboard under Widget settings.
- data-sso-token - JWT token for authenticating users. See Step 3 for implementation details.
- data-default-language - Optional. Set the widget language (e.g., "en", "es", "de").
Step 3: Generate SSO Tokens
For secure user authentication, you need to generate JWT tokens server-side using your company secret. The token should include the user's ID and display name.
// Install: npm install jsonwebtoken
const jwt = require('jsonwebtoken');
const COMPANY_SECRET = 'your-company-secret';
function generateToken(userId, userDisplayedName) {
const payload = {
id: userId,
name: userDisplayedName
};
return jwt.sign(payload, COMPANY_SECRET, { algorithm: 'HS256' });
}
// Usage
const token = generateToken('user123', 'John Doe');
console.log(token);Step 4: Dynamic Token Injection
In your server-side template or backend, generate the SSO token for the currently logged-in user and inject it into the HTML:
<!-- Example with server-side templating -->
<div
id="ideolo-board"
data-base-url="https://app.ideolo.co/"
data-board-hash="abc123xyz"
data-sso-token="<%= generateSSOToken(currentUser.id, currentUser.name) %>"
></div>Security Considerations
- Never expose your company secret - Always generate tokens server-side, never in client-side JavaScript.
- Use HTTPS - Ensure your website uses HTTPS to protect tokens in transit.
- Validate users - Only generate tokens for authenticated users in your system.
- Store secrets securely - Keep your company secret in environment variables, not in code.
Complete Example
Here's a complete example of a page with the Ideolo widget:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App - Feedback</title>
<!-- Load Ideolo Widget Script -->
<script src="https://app.ideolo.co/widget/index.js"></script>
</head>
<body>
<h1>Share Your Feedback</h1>
<!-- Ideolo Widget Container -->
<div
id="ideolo-board"
data-base-url="https://app.ideolo.co/"
data-board-hash="your-board-hash-here"
data-sso-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
data-default-language="en"
></div>
</body>
</html>Troubleshooting
Widget Not Appearing
- Verify the script tag is loaded correctly (check browser console for errors)
- Ensure the div has the correct ID:
ideolo-board - Check that your board hash is correct
Authentication Issues
- Verify your company secret is correct
- Ensure the JWT payload includes both
idandnamefields - Check that you're using the HS256 algorithm
Conclusion
You've successfully integrated the Ideolo widget into your website! Your users can now submit feedback, vote on features, and view your product roadmap. For additional configuration options and advanced features, check the Ideolo documentation or contact support.