A quick example of how we got inline manual and help juice "integrated" from our angular app. It may need some tweaking to fit your needs, but the flow would be the same, regardless of your framework. See "docs" on using this in the inlineManual editor here: https://gist.github.com/bwest87/2767e27e586190b4f97f

inline-manual-help-juice-integration.js

angular.module('app.services')
  .factory('inlineManualService', inlineManualService);

  function inlineManualService($templateCache, $http, $q, $compile, $rootScope, $timeout, helpJuiceService){
    return {
      onTopicStart: onTopicStart,
    };

    function onTopicStart(player, topic_id) {
      var description = player.topics[topic_id].description;

      if (description.match('help-juice')) {
        var step = player.topics[topic_id].steps[0];

        // Show spinner while we load from HelpJuice
        var spinner = "<span class='spinner spinner-sm'></span>";
        replaceContent(step, spinner);

        if (description.match('id')) {
          var id = parseDescriptionFor(description, 'id');
          helpJuiceService.get(id).then(updateContentWithLinksFromResults);
        }

        if (description.match('category')) {
          var category_id = parseDescriptionFor(description, 'category');
          helpJuiceService.getListFromCategoryId(category_id).then(updateContentWithLinksFromResults);
        }

        if (description.match('search')) {
          var query = parseDescriptionFor(description, 'search');
          helpJuiceService.search(query).then(updateContentWithLinksFromResults);
        }
      }

      function updateContentWithLinksFromResults(helpJuiceResults) {
        var linkData = helpJuiceService.getLinkDataFrom(helpJuiceResults);
        replaceContentWithLinkData(step, linkData);
      }
    }


    function getTemplate(templateName) {
      var template = $templateCache.get(templateName);
      return template ? $q.when({data: template}) : $http.get(templateName);
    }

    function replaceContentWithLinkData(step, linkData) {
      return getTemplate('/static/shared/inlineManualLinkView.html').then(function(template) {
        var $view = angular.element(template.data);
        var scope = $rootScope.$new(true);
        scope.links = linkData;
        $compile($view)(scope);
        $timeout(function() {
          replaceContent(step, $view[0].outerHTML);
        },0);
      });
    }

    function parseDescriptionFor(description, attribute) {
      var value_string = description.split(attribute + ":")[1] || '';

      if (attribute === 'id' || attribute === 'category') {
        var value = value_string.match(/\d+/);
        return value && value[0];
      }
      if (attribute === 'search') {
        var value = value_string.match(/\w+/g);
        return value && value.join(" ");
      }
    }

    function replaceContent(step, newContent) {
      step.content = newContent;
      inline_manual_player.manualReinit();
    }
  }


angular.module('app.services')
  .factory('helpJuiceService', helpJuiceService);

  function helpJuiceService(Restangular){
    return {
      search: search,
      get: get,
      getListFromCategoryId: getListFromCategoryId,
      getLinkDataFrom: getLinkDataFrom,
    };

    function search(query) {
      return endpoint().all('search').getList({query: query}).then(function(results) {
        return _.map(results, function(result) {
          return result.question;
        });
      });
    }

    function get(id) {
      return endpoint().all('api').one('questions', id).get();
    }

    function getListFromCategoryId(category_id) {
      return endpoint().all('api').all('all-questions').getList({category_id: category_id}).then(function(results) {
        return _.map(results, function(result) {
          // Helpjuice's API returns results inside an object where the data resides in a prop literally
          // named "". But only for this route. It's otherwise in "question". wtf?
          return result[""];
        });
      });
    }

    function getLinkDataFrom(helpJuiceObjects) {
      return _.map(helpJuiceObjects, function(helpJuiceObject) {
        return {
          url: "https://help.hint.com/questions/" + helpJuiceObject.id,
          text: helpJuiceObject.name,
        };
      });
    }

    function endpoint() {
      return Restangular.withConfig(function(RestangularConfigurer) {
        RestangularConfigurer.setDefaultHeaders({
          'Content-Type': 'application/json'
        });
        return RestangularConfigurer.setBaseUrl('helpjuice');
      });
    }
  }
  
/* the inlineManualLinkView.haml file
.container
  .text-highlight
    %h4 Help Articles
    %hr
  %p(ng-repeat="link in links")
    %a(ng-href="{{link.url}}" target="_blank")
      {{link.text}}
      
*/