ClickHelp User Manual

Embed ClickHelp Search into Website or Application

Although you can integrate search from your ClickHelp portal into third-party websites or applications by using the Search the Portal API method, we recommend a different approach.

This topic describes how to embed your ClickHelp portal search page with the ready UI in an iframe.

Find the place in your page's markup where you want to embed the search and insert the following HTML snippet there:

Copy Code

HTML

<iframe id="frameSearch"
      src="https://{portalname}.clickhelp.co/search/?embed=1&nt=1" frameborder="0"
      style="width: 100%; min-height: 300px; display: block"
      webkitallowfullscreen="webkitallowfullscreen"
      mozallowfullscreen="mozallowfullscreen"
      allowfullscreen="allowfullscreen"
      title="Search results"></iframe>
<script type="text/javascript">
  window.addEventListener("message", function (e)
  {
    if (!e.data)
    {
      return;
    }
    let data = null;
    try
    {
      data = JSON.parse(e.data);
    }
    catch (ex)
    { // Probably not our message, ignore it
      return;
    }
   
    if (data.height > 0)
    {
      let frm = document.getElementById("frameSearch");      
      frm.style.height = data.height + 20 + "px";
    }
  });
</script>

Replace the https://{portalname}.clickhelp.co/ part located in the iframe src value on the second line of the above snippet with your actual portal name.
If you don't want to open all search results in a new browser tab, remove the nt=1 URL parameter from the iframe src value.

After these changes are pushed into production, the readers can search through your ClickHelp portal from your website or app!

The embedded search UI can be customized via Branding CSS and the special embeddedMode class to look different if needed.

By the way, we use the same approach on our site! Check it out: ClickHelp Search.

Full-Text Search Settings Reference Requirements and Platforms