Skip to main content

Environment Widget

Add the Enviromental Statistics Widget to your Website

Here is the minimum amount of code needed for the Environmental Statistics Widget to work.

<script
type="text/javascript"
src="https://app.taktikal.is/widget/init.js"
></script>

<iframe
id="taktikal-widget"
src="https://app.taktikal.is/widget/:publicCompanyKey"
frameborder="0"
width="100%"
></iframe>

<script>
TaktikalWidget.init(document.getElementById("taktikal-widget"));
</script>

How the widget works

The first script creates the TaktikalWidget object. It should be placed before the iframe in the DOM.

<script
type="text/javascript"
src="https://app.taktikal.is/widget/init.js"
></script>

The iframe includes the statistics themselves and renders them at the width it has available to it.

<iframe
id="taktikal-widget"
src="https://app.taktikal.is/widget/:key"
frameborder="0"
width="100%"
></iframe>

But the height of the iframe's content may be different depending on the width. This means that we can't know the height of the iframe beforehand. To combat this, the iframe sends events communicating its own height.

By calling TaktikalWidget.init(iframeElement) the TaktikalWidget listens to those events and takes care of initializing and maintaining the iframe's height correctly.

<script>
TaktikalWidget.init(document.getElementById("taktikal-widget"));
</script>

The colors used in the iframe can be configured. We've added the company's colors from our branding settings as colorPrimary and colorOffWhite, but these colors can be changed to any valid hex color. If the company has not configured their brand colors in our settings, the default Taktikal colors will be used.

Theming

You can change the colors of the widget by modifying the colorPrimary and colorOffWhite query parameters.

The value should be a hex color without the # like 2823fb.

Breakpoint

By default the widget's mobile breakpoint is set to 768. You can change this by providing a breakAt query parameter. breakAt should be an integer.

Localization

Our widget supports two languages, is (Icelandic) and en-us (English). The language is determined by the language query parameter.

<iframe src="https://app.taktikal.is/widget/:key?language=en-us"></iframe>

If no language or an invalid language is provided, the widget defaults to is.