Tutorial Button

FAQs

About the plugin

Usage Instructions

Plugin Global Configurations

FAQs

1. Is there a user interface for configuring the Tutorial button plugin?

No, you can centrally configure the tutorial button for all dashboards in a dedicated config file. Within this file, you have the flexibility to specify the dashboards to which the button should be added, eliminating the need for a separate user interface.

1. Can I adjust the look and feel of the tutorial button to make it align with other buttons?

Absolutely! The Tutorial button's appearance can be easily customized to harmonize with other buttons on your dashboards. Within the config file, you'll find a dedicated 'button' option. Here, you can specify the button color and text to seamlessly align with the visual style of other buttons across your dashboards.

About the plugin

The Tutorial Plugin is a valuable addition to enhance user experience and understanding within the dashboard environment. In instances where guidance or additional information is crucial, this plugin empowers dashboard creators to seamlessly integrate tutorials. With this plugin, a user-friendly button can be strategically placed on the dashboard, providing a clear call-to-action for users seeking guidance. The configuration is straightforward, allowing users to specify an external URL, which can point to a video. Upon clicking the button, the configured URL opens in a popup window, delivering relevant tutorials and instructions without disrupting the overall dashboard experience. This plugin serves as an effective tool for onboarding new users, conveying dashboard functionality, and ensuring a smooth and informed user journey.

Usage Instructions

Utilizing the Tutorial Plugin is a straightforward process that requires no widget creation or script addition to the dashboard. The configuration is centralized in the plugin's config file. Customize the appearance of the tutorial button in the config file, defining its look and feel. For each specific dashboard, configure the button's URL, popup title, and other settings. Importantly, only dashboards specified in the config file will feature the tutorial button.

Plugin Global Configurations

button: Customization options for the appearance of the Tutorial button.

• color: Specifies the background color of the button.

• colorHover: Defines the color when the user hovers over the button.

• text: Sets the default text of the button. If no specific text is provided for a dashboard, this default text will be displayed on the button.

popup: Configuration settings for the popup window where the tutorial video will be displayed.

• ratio: Sets the popup window ratio relative to the screen. Values greater than 0.95 will be treated as 0.95.

• autoPlay: If set to true, the video will play automatically upon opening the popup. If set to false, the user will need to click the play button.

• defaultTitle: Specifies the default title of the popup window. If no specific popup title is provided for a dashboard, this default text will be displayed as the title.

tutorials: Configuration for adding the Tutorial button to dashboards. This is an array of configurations, each tailored for a specific dashboard.

• dashboardId: The ID of the dashboard to which the Tutorial button needs to be added.

• buttonText: Specifies the text to be displayed on the button for the respective dashboard.

• videoUrl: The URL of the video to be displayed in the popup window.

• popupTitle: Sets the title of the popup window for the specific dashboard. If not provided, the defaultTitle will be used.

window.PS_TUTORIAL_BUTTON_PLUGIN_CONFIG = {
    debugLog: false,
    button: {
        color: '#58C1EC',
        colorHover: '#1FA6DE',
        text: 'Tutorial'
    },
    popup: {
        // Popup ratio relative to the screen (values greater then 0.95 will treated as 0.95)
        ratio: 0.8,
        autoPlay: true,
        defaultTitle: 'Tutorial'
    },
    tutorials: [
        {
            dashboardId: '63173b63b98443003677596a',
            buttonText: 'Open Tutorial',
            videoUrl: 'https://www.youtube.com/embed/tAGnKpE4NCI',
            // optional popup title (if not provided, the defaultTitle will be used)
            popupTitle: 'Metallica: Nothing Else Matters'
        },
        {
            dashboardId: '638d88ef980de108f8be4c62',
            buttonText: 'Open Tutorial',
            videoUrl: 'https://www.youtube.com/embed/t99KH0TR-J4',
            // optional popup title (if not provided, the defaultTitle will be used)
            popupTitle: 'Queen: The Show Must Go On'
        },
        {
            dashboardId: '63cbeb00ee21b5003791b8f0',
            buttonText: 'NBA Theme',
            videoUrl: 'https://www.youtube.com/embed/8L6EsFXh2O8',
            // optional popup title (if not provided, the defaultTitle will be used)
            popupTitle: 'NBA Theme'
        }        
    ]
};