Display a topic in the in-product help - Fluid Topics - Latest

How to Add In-Product Help

Category
Technical Notes
Audience
public
Version
Latest

To display a specific topic in the in-product help, it is possible to use a direct link or a deep link.

For example, to add the Troubleshooting topic of the ACME product, use the following code block:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link href="https://doc.fluidtopics.com/api/stylesheets/fonts.css" rel="stylesheet">
    <link href="https://doc.fluidtopics.com/api/stylesheets/theme.css" rel="stylesheet">
</head>
<body>
    <div class="example">
        <ft-button icon="comment_question">
            See documentation about ACME
        </ft-button>
        <ft-in-product-help portalurl="https://my.fluidtopics.net/ACME/troubleshooting" opened="" displaymode="standard" closeicon="x_mark" standardmodeicon="pip" theatermodeicon="pip_wide" fullscreenmodeicon="expand_wide" enablehomebutton="" homeicon="home" enableopentabbutton="" opentabicon="extlink_light" iconvariant="fluid-topics" style=""></ft-in-product-help>
    </div>

    <script>
        const scripts = [
            "https://cdn.jsdelivr.net/npm/@fluid-topics/ft-in-product-help/build/ft-in-product-help.min.js",
            "https://cdn.jsdelivr.net/npm/@fluid-topics/ft-size-watcher/build/ft-size-watcher.min.js",
            "https://cdn.jsdelivr.net/npm/@fluid-topics/ft-button/build/ft-button.min.js",
            "https://cdn.jsdelivr.net/npm/@fluid-topics/ft-text-field/build/ft-text-field.min.js",
            "https://cdn.jsdelivr.net/npm/@fluid-topics/ft-search-bar/build/ft-search-bar.min.js",
            "https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/dist/fluidtopics.min.js",
            "https://cdn.jsdelivr.net/npm/@fluid-topics/ft-reader-context/build/ft-reader-context.min.js"
        ];

        scripts.forEach(src => {
            const script = document.createElement("script");
            script.setAttribute("src", src);
            document.head.appendChild(script);
        });

        // Wait for the DOM and the scripts to load
        document.addEventListener("DOMContentLoaded", () => {
            // Ensure components are registered
            customElements.whenDefined('ft-button').then(() => {
                const button = document.querySelector("ft-button");
                button.addEventListener("click", () => {
                    const help = document.querySelector("ft-in-product-help");
                    if (help) {
                        help.open();
                    }
                });
            });

            // Ensure components are registered
            customElements.whenDefined('ft-text-field').then(() => {
                const textField = document.querySelector("ft-text-field");
                textField.addEventListener("change", (e) => {
                    const help = document.querySelector("ft-in-product-help");
                    if (help) {
                        help.navigateTo(e.detail);
                    }
                });
            });
        });
    </script>
</body>
</html>