Embedding Kontrast visualizations into web pages

Web space

If you have access to a web space, you can simply upload the HTML and JavaScript files of your visualizations including all files included via the HTML <link> and <script> tags and you are done. More information on the files distributed within this Kontrast standalone distribution can be found in the documentation article on the directory structure.

Note that you do not require any permissions to run server-side scripts (such as PHP, for example) and you do not require access to any databases.

Embedding using iframes

If you only have permissions to include other content via the <iframe> element, you can create your visualization as a standalone HTML file without any additional text content.

An example is provided in site/examples/minimal-iframe.html. It can be embedded as shown in the following snippet:

The embedded iframe looks like this:

The disadvantage of using iframes is that it is more difficult to use interactive elements (such as sliders, for example) outside of the iframe. If you are able to include all interactive elements within the iframe (like the slider in the example above) this is not a problem.

WordPress

In order to embed Kontrast visualizations into WordPress posts, you need to be able to include additional JavaScript and CSS files and snippets into WordPress. While there are several ways to achieve this, the simplest way is to enter arbitrary HTML using the HTML block in the Gutenberg editor. If you find a different way to include the code snippets detailed below, it should work as well.

All steps described below take place on an individual post. Click Edit within the Posts menu to edit a post.

Step 1: Insert the figure in the post

Edit your post as HTML. In the Gutenberg editor, simply add a Custom HTML block. In the older editor, click the three dots (More tools & options) → Code editor (or press Ctrl + Shift + Alt + M).

An editor should appear where you now see your post as HTML. To insert your figure, insert something like the following:

As usual, the names figure0 and slider0 need to match with your JavaScript code (below). Note that up to this point, no WordPress-specific considerations need to be made, you can simply copy and paste your code from your visualizations created within the Kontrast distribution or the example files.

Step 2: Add your JavaScript for the visualization

Using the Gutenberg Custom HTML block, you can directly enter your script. Alternatively, you can enter your code using a script plugin (such as Scripts n Styles, https://wordpress.org/plugins/scripts-n-styles/). Again, no WordPress-specific modifications need to be made, you can simply use your original code as-is.

An alternative to including your script using the editor interface is to keep all your JavaScript code in a separate file and include the file as detailed in the next step. This may be easier if you need to manage and/or frequently edit many large scripts.

Step 3: Including Kontrast (and other JavaScript libraries)

Finally, you need to include kontrast.js and kontrast.css files (and perhaps the KaTeX files for mathematical formulae). Within the Scripts n Styles plugin settings for your post, navigate to HTML → HTML for the head element. In the Gutenberg Custom HTML block, you can enter the following snippet directly.

You can of course host the above files for Kontrast on your own domain or within the wp-admin/uploads directory: Simply upload the files kontrast.css and kontrast.js somewhere on your server and modify the above URLs accordingly.

You can use KaTeX for LaTeX-style math typesetting. You can take the KaTeX files either from ext.soengen-dev.de, host it on your own somewhere, or use the KaTeX Content delivery network (CDN) as shown above and described in the KaTeX documentation.