Eric Cressey

Tech writer - Content strategist - Developer

Ensuring Your MadCap Flare Topics Load within the Default Page

| Comments

Getting your MadCap Flare help topics to rank highly in search results is a challenge. Flare’s help structure (topic pages loading within an IFrame on a default page) makes its help difficult to index. To make things worse, the topics that show up in search results usually load without the default page. See MadCap Flare’s help for an example.

Obviously, you want your users to see the rest of your help when they open a topic. Without the default page, users won’t have access to your table of contents or search and will probably not have a very good experience browsing your help.

MadCap gets around this problem by including an Open topic with navigation link in each topic. This approach is valid, but there’s another way. You can check to see if the topic loaded in the IFrame and, if it didn’t, dynamically reload the topic within the default page. This approach is a little more work but it ensures that your topics will be seen in the appropriate context.

To get started, you’ll need the URL for your web help’s default page. Paste the following code into a text editor and replace web help URL with the appropriate URL. Be sure to keep the value in quotes.

$(document).ready(function () {

    //if the location.href contains the "content" folder, it means that the page loaded without the default page.
    if ("content/") != -1) {

        //get the path to the topic
        var topicPath = "#" +\/content.*/gi)[0].substring(9);

        //add the appropriate base URL = "web help URL" + topicPath;

If you publish your web help to one URL, your code doesn’t need to be more complicated than that. If you’d like to use the same code for help projects that will be published separately, you’ll need to adjust the code to intelligently redirect to the correct URL. Once you’ve modified the code, follow these steps to add it to your help project.

  1. Open your project in MadCap Flare. Open your project’s default skin.
  2. In the HTML5 Skin Editor, click the Toolbar tab.
  3. Under the Custom JavaScript to include in Toolbar page textbox click Edit….
  4. Paste your modified code into the Toolbar JavaScript window and click OK.
  5. Save your changes.