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.

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.

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. It passes the access token to the iframe over postMessage — so the token never appears in the iframe URL — and lets you customize widgets, colors, theme and height.

    <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.

Only the access token is kept out of the iframe URL. theme and colors.primary are passed as query parameters so the embedded dashboard can paint in the right colors before the first postMessage arrives.

Customization

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
RETENTION

RETENTION renders nothing when the access token carries filters. Filtered retention isn't supported yet, so pair the retention widget with an unfiltered token.

    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",
            },
          },
        ],
    });

Available Properties

AGGREGATION_BY_PROPERTY widgets group by a property. Properties prefixed with _ are event fields:

Property	Groups by
`_url`	Page URL
`_entry_url`	The page a session started on
`_referrer`	Referrer
`_acquisition_channel`	Acquisition channel derived from referrer and UTM params
`_location_country`	Country
`_location_city`	City
`_device`	Device class
`_browser`	Browser
`_os`	Operating system
`_screen`	Screen size
`_language`	Language

Any property without the _ prefix is read from the event's metadata, so you can group by whatever you send yourself, including campaign parameters like utm_source.

_entry_url is computed per session rather than stored on each event, so it can't be used in the token's filters.

Map raw property values to your own labels with a function on the host page. mapFunction is honored only for AGGREGATION_BY_PROPERTY widgets; other widget types ignore it.

    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',
    },
  },
];