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>