adding an app

It is easy to integrate any existing (and future) statically-build web application into Conzept.

Due to Conzepts use of iframes within the content panes, the execution and styling context of the app is completely isolated. Yet it is still easy to communicate with the iframed app via its URL-parameters (and when needed triggering postMessage() calls in its JS code).

To add an extra app to the existing set of apps, these things need to be done:

  • First copy the app to a directory in Conzept ($CONZEPT_WEB_DIR/app/<your_app_name>/)
  • Often you'll want to modify the app, to have it make use of some extra URL parameters, such as: the topic title, content language, Wikidata Qid or something else. In most applications this can easily be done.
  • Optional: Add the Conzept common HTML/CSS/JS resources to the app:
    • Copy the “index.html” to index.template.html (or the “index.php” to “index.template.php”, for PHP apps)
    • Insert the following template snippet into the HTML page, which will get substituted during the build step: CONZEPT_COMMON_HTML_INCLUDE. (If the project already includes jQuery, use: CONZEPT_COMMON_HTML_INCLUDE_NO_JQUERY)
  • Then add a new field definition, to create a link to this specific app. Here is a simple example, which adds a link in two sections:
'my_app_name' : {
  create_condition: true,
  title: 'My App Name',
  prop: '',
  type: 'link',
  mv: false,
  url: '${explore.base}/app/myapp/?q=${title_quoted}',
  mv: false,
  icon: 'fas fa-flask',
  text: 'My App Name',
  section: ['science-chemistry','main'],
  rank: [100,10000],
  • Run “npm run build” to rebuild the Conzept system. The new app should now be linked up in the topic results.