Integrate the in-product help within a custom page - Fluid Topics - Latest

To integrate the in-product help within a custom page, proceed as follows:

1. Add a Custom component to the custom page.
2. Go to the Settings section of the Custom component, and select Open editor.

3. Paste the following code block in the HTML section:

   <div class="example">
       <ft-button icon="comment_question" id="question-button">
           My opening button
       </ft-button>
   
       <ft-in-product-help id="iph" 
       portalurl="${PORTAL_URL}" 
       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>
   

   Replace ${PORTAL_URL} by the entire URL of the portal, including https://. For more information, see the Example section.

4. Paste the following code block in the JS section:

   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-button/build/ft-button.min.js",
       "https://cdn.jsdelivr.net/npm/@fluid-topics/ft-size-watcher/build/ft-size-watcher.min.js"
   ]
   
   scripts.forEach(src => {
       const script = document.createElement("script")
       script.setAttribute("async", "true")
       script.setAttribute("src", src)
       document.append(script)
   })
   
   document.getElementById('question-button').addEventListener('click', function() {
       let iph = document.getElementById('iph');
       console.log(iph.getAttribute('opened'))
       if (iph.hasAttribute('opened')) {
           iph.removeAttribute('opened');
       } else {
           iph.setAttribute('opened', "");
       }
   });
   

5. Select Save.