Every widget in Sisense supports descriptions, but what about dashboards themselves? Sometimes you need to explain a dashboard's purpose or guide users on how to interact with it effectively.
We solved this by adding an info icon to the top toolbar that triggers a modal with the dashboard description. Add this script at the dashboard level and update the CONFIG object at the top with your custom text.
We also included a feedback email in the configuration, making it easy for users to reach out with questions or suggestions. If you'd prefer, you could split this into a separate feedback button instead of including it in the description modal.
Another nice touch: you can swap the ℹ️ emoji for a different icon to match the style of Sisense's built-in widget info icons. Let me know if this is helpful or if it this feature already exists and I have missed it.
// Configuration - update these values for your dashboard
const CONFIG = {
feedbackEmail: 'feedback@feedback.com',
description: 'You can put your additional context here.'
};
$(document).ready(function() {
setTimeout(function() {
// Clean up any existing instances
$('#dashboard-info-icon, #dashboard-info-modal').remove();
// Create info button
const infoButton = $('<button id="dashboard-info-icon" title="Dashboard info">ℹ️</button>').css({
cursor: 'pointer',
background: 'none',
border: 'none',
fontSize: '20px',
padding: '5px 10px',
color: '#666'
});
// Add button to toolbar (after Widget button if found, otherwise append to toolbar)
const widgetButton = $('button:contains("Widget")').filter(':visible').first();
if (widgetButton.length) {
widgetButton.after(infoButton);
} else {
$('.dashboard-toolbar').append(infoButton);
}
// Create modal
const modal = $(`
<div id="dashboard-info-modal" style="display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);">
<div style="background:white; margin:15% auto; padding:30px; border-radius:8px; width:500px; max-width:90%; box-shadow:0 4px 6px rgba(0,0,0,0.1);">
<h2 style="margin-top:0; color:#333;">Dashboard Description</h2>
<p style="line-height:1.6; color:#555;">${CONFIG.description}</p>
<p style="line-height:1.6; color:#555; margin-top:20px;">
<strong>Feedback:</strong>
<a href="mailto:${CONFIG.feedbackEmail}" style="color:#0078d4; text-decoration:none;">${CONFIG.feedbackEmail}</a>
</p>
<div style="text-align:right; margin-top:20px;">
<button id="close-modal" style="background:#0078d4; color:white; border:none; padding:10px 24px; border-radius:4px; cursor:pointer; font-size:14px; font-weight:500;">OK</button>
</div>
</div>
</div>
`);
$('body').append(modal);
// Event handlers
infoButton.click(function() {
modal.fadeIn(200);
});
$('#close-modal').click(function() {
modal.fadeOut(200);
});
// Close when clicking outside modal
modal.click(function(e) {
if (e.target.id === 'dashboard-info-modal') {
modal.fadeOut(200);
}
});
// Close with ESC key
$(document).keydown(function(e) {
if (e.key === 'Escape' && modal.is(':visible')) {
modal.fadeOut(200);
}
});
}, 1000);
});
