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&resultTarget=blank" 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.
Define how you want to open search results. This is controlled by the restultTarget parameter in the URL from the iframe src value. There are three states:
- self - opens search results in the same frame;
- blank - opens search results in a new tab;
- top - opens search results in the topmost frame, i.e. in the same browser tab.
If the restultTarget parameter isn't specified, search resutls will be opened in the same broswer tab.

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