Integrate the in-product help within an external site - Fluid Topics

To integrate the in-product help within an external site, proceed as follows:

Add the following HTML code block to the page:

<!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="http://doc.fluidtopics.com/api/stylesheets/fonts.css" rel="stylesheet" />
        <link href="http://doc.fluidtopics.com/api/stylesheets/theme.css" rel="stylesheet" />
    </head>
    <body>
        <div class="example">
            <ft-button icon="comment_question">
                Open in-product help
            </ft-button>
            <ft-text-field prefix="Navigate to path: " outlined=""> </ft-text-field>
            <ft-in-product-help
                portalurl="{PORTAL_URL}"
                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>

The {PORTAL_URL} variable is the entire URL of the portal, including https://. For example, the full URL of the ACME portal is https://my.fluidtopics.net/ACME. For more information, see the Example section.

Add the domain name of the external site to the list of the Fluid Topics portal's trusted origins.

Not adding the domain name to the Fluid Topics portal's list of trusted origins results in an error screen.

Integrate the in-product help within an external site - Fluid Topics - Latest

How to Add In-Product Help