In-App Insights (Beta)

Logspot allows you to embed Logspot’s dashboard with custom widgets inside your web application using our web snippet.

The snippet configures & renders iframe with the customized dashboard.

Basic integration

You need to do two things to embed your dashboard:

1. Generate one time access token

Call Logspot api with your secret key (read more)

POST https://api.logspot.io/embed/ott

Response:

{
    "status": "OK",
    "data": "YOUR_ACCESS_TOKEN"
}

Generated access token is valid for 2 hours. We suggest generating a new token on each dashboard view.

2. Embed Logspot’s iframe

Embed the IFrame snippet anywhere in the <body> element.

<iframe
  src="https://embed.logspot.io/?token=YOUR_ACCESS_TOKEN"
  width="100%"
  height="800px"
  frameborder="0"
></iframe>

Advanced integration

Embed the web snippet anywhere in your HTML site e.g. in the <head> or in the <body>. The snippet queues the initial load, so our JS code can be fetched asynchronously.

    <script>
      !function(e,t,s,n,o,c,p){e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},c=t.createElement(s),p=t.getElementsByTagName(s)[0],c.async=1,c.src=n,p.parentNode.insertBefore(c,p)}(window,document,"script","https://embed.logspot.io/d.js","LogspotEmbed");

      LogspotEmbed({
        elementId: "HTML_ELEMENT_ID",
        accessToken: "YOUR_ACCESS_TOKEN",
      });
    </script>

    <div style="width:100%" id="HTML_ELEMENT_ID"></div>

After adding this snippet, Logspot will render the default widget set (the dashboard you can see when you visit app.logspot.io)

Filter the data set

POST https://api.logspot.io/embed/ott

{
    "filters": [
        {
            "fieldName": "url",
            "operator": "=",
            "value": "/blog"
        }
    ],
}

Params:

filters (optional) - filters that will be applied to all widgets in the dashboard (read more about filters). If you don’t pass any filtering, we will return all your data to the embedded dashboard.

Customize widgets

Supported widget types:

DAU
EVENT
AGGREGATION_BY_PROPERTY
REFERRER
COUNTRY
CAMPAIGNS

    LogspotEmbed({
        ...
         widgets: [
          {
            type: "DAU",
          },
          {
            type: "EVENT",
            params: {
              title: "Pageview",
              eventName: "Pageview",
            },
          },
          {
            type: "REFERRER",
            params: {
              title: "Top sources",
            },
          },
          {
            type: "COUNTRY",
            params: {
              title: "Country",
            },
          },
          {
            type: "AGGREGATION_BY_PROPERTY",
            params: {
              title: "OS",
              property: "_os",
              eventName: "Pageview",
            },
          },
          {
            type: "AGGREGATION_BY_PROPERTY",
            params: {
              title: "Language",
              property: "_language",
              eventName: "Pageview",
            },
          },
          {
            type: "CAMPAIGNS",
            params: {
              title: "Campaigns",
            },
          },
        ],
    });

    LogspotEmbed({
        ...
        mapping: {
          mapLanguages: function (str) {
            return str ? "CUSTOM" + str.toUpperCase() : null;
          },
        },
        widgets: [
            ...
            {
                type: "AGGREGATION_BY_PROPERTY",
                params: {
                    title: "Widget with custom mapping",
                    property: "_url",
                    eventName: "Pageview",
                    mapFunction: "mapLanguages",
                },
            },
        ],
    });

Change primary color

    LogspotEmbed({
        ...
        colors: {
            primary: "#ffe000",
        }
    });

Change IFrame height

By default, Logspot will automatically define the IFrame height.

You can override it by defining height in the params;

    LogspotEmbed({
        ...
        height: "800px",
    });

Theme

By default, Logspot will detect user settings and will choose which theme it should use (light/dark).

You can also force specific theme:

    LogspotEmbed({
        ...
        theme: "dark",
    });

Available options: "light" and "dark".

Default widgets

This is the list of all widgets displayed by default. You can use it to display default widgets and your custom ones.

[
  {
    type: 'DAU',
  },
  {
    type: 'EVENT',
    params: {
      title: 'Pageview',
      eventName: 'Pageview',
    },
  },
  {
    type: 'AGGREGATION_BY_PROPERTY',
    params: {
      title: 'Top pages',
      eventName: 'Pageview',
      property: '_url',
    },
  },
  {
    type: 'REFERRER',
    params: {
      title: 'Top sources',
    },
  },
  {
    type: 'COUNTRY',
    params: {
      title: 'Country',
    },
  },
  {
    type: 'AGGREGATION_BY_PROPERTY',
    params: {
      title: 'City',
      property: '_location_city',
      eventName: 'Pageview',
    },
  },
  {
    type: 'AGGREGATION_BY_PROPERTY',
    params: {
      title: 'Screen',
      property: '_screen',
      eventName: 'Pageview',
    },
  },
  {
    type: 'AGGREGATION_BY_PROPERTY',
    params: {
      title: 'Device',
      property: '_device',
      eventName: 'Pageview',
    },
  },
  {
    type: 'AGGREGATION_BY_PROPERTY',
    params: {
      title: 'Browser',
      property: '_browser',
      eventName: 'Pageview',
    },
  },
  {
    type: 'AGGREGATION_BY_PROPERTY',
    params: {
      title: 'OS',
      property: '_os',
      eventName: 'Pageview',
    },
  },
  {
    type: 'CAMPAIGNS',
    params: {
      title: 'Campaigns',
    },
  },
];