Embed AI analytics charts

An embed puts charts from Notra on your own site, for example a stats page or a blog post. It can show:

Chart	What it shows
AI traffic	Crawler requests, citations in AI answers and AI referrals, from the AI analytics tab
Visibility over time	How often AI assistants mention you, per day
Visibility by engine	Visibility, citations and average position per AI engine
Share of voice	Your share of mentions next to your top competitors
Visibility by language	Visibility per language your prompts run in
Visitors by country	Visitors per country, compared with the previous period

Charts update by themselves while the page is open, so an embed also works on a wall display or a TV that runs for days.

Create an embed

Open the embed dialog

In Analytics, on the Agent tab, open the … menu at the end of the tab row, then Embed on your site. The embed shows the current project, and only the domain selected in the domain filter if you picked one. The same menu on the Web tab embeds your website visitors instead, and you can switch between the two under Traffic.

Allow your domains

Under Allowed domains, type each domain that will show the charts and press Enter, for example example.com, since the charts only display on these domains.

Create and configure

Click Create embed. New embeds show AI traffic only. To add charts, click the Charts row to open it and tick every chart the embed may show, which saves right away. Then pick the Period, Theme and, for AI traffic, what to Show, and the preview updates as you change them.

Add it to your site

Copy the code under Embed code and paste it where the charts should appear, or click Copy agent prompt and hand it to your coding agent, which adds them for you.

The embed code looks like this:

<iframe
  src="https://app.usenotra.com/embed/ai-traffic/<embed-id>"
  title="AI traffic"
  data-notra-embed
  width="100%"
  height="420"
  sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-downloads"
  style="border:0;width:100%"
  loading="lazy"
></iframe>
<script src="https://app.usenotra.com/embed.js" async></script>

The script keeps the iframe’s height in sync with the charts, and without it the iframe stays 420 px high. Load it once per page, even with several embeds.

React and other JSX

Convert the attributes and load the script once, for example in Next.js:

import Script from "next/script";

export function AiTrafficChart() {
  return (
    <>
      <iframe
        src="https://app.usenotra.com/embed/ai-traffic/<embed-id>"
        title="AI traffic"
        data-notra-embed=""
        width="100%"
        height={420}
        sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-downloads"
        style={{ border: 0, width: "100%" }}
        loading="lazy"
      />
      <Script src="https://app.usenotra.com/embed.js" strategy="lazyOnload" />
    </>
  );
}

Options

The dialog writes the options into the iframe URL, where you can also change them:

Parameter	Values	Default
`range`	`7d`, `14d`, `30d`, `90d`	`30d`
`theme`	`light`, `dark`, `auto` (follows the visitor’s system)	`auto`
`charts`	a comma-separated list of `traffic`, `visibility`, `engines`, `share-of-voice`, `languages`, `countries`	every chart the embed allows
`parts`	`metrics`, `chart` or `metrics,chart` (AI traffic only)	both
`locale`	a dashboard language such as `en` or `de`	the visitor’s browser language

For example, .../embed/ai-traffic/<embed-id>?range=7d&theme=dark&parts=chart shows only the traffic chart for the last 7 days in dark mode, and ?charts=visibility,share-of-voice shows just those two charts. charts can only pick from the charts ticked in the dialog. Charts the embed doesn’t allow are ignored, so editing the URL never shows more than you chose to publish. Use one embed with several iframes to put different charts in different places. The background is transparent, so the charts sit on your page’s background. If you set theme=dark on a page that does not declare color-scheme: dark, some browsers paint a solid backdrop behind the iframe.

Allowed domains

example.com allows https://example.com only. Add www.example.com separately if your site uses it.
*.example.com allows every subdomain, but not example.com itself.
http:// only works for localhost and 127.0.0.1, for local development.
Enter domains without paths, up to 10 per embed.

Every added or removed domain saves right away and applies within a minute. The charts only load inside an iframe on one of these domains:

Another site that embeds the code gets an empty frame, and no numbers are sent to it.
Opening the embed link directly, in a new tab or by pasting it into the address bar, shows “This embed only shows on the websites it was added to” instead of the charts. To check an embed, open the page it’s on, or use the preview in the dialog.
The numbers behind the charts are only sent to the embed itself, not to other sites or to a browser that requests them directly.

This works with your page’s Referrer-Policy, including no-referrer. If your site sends a Content-Security-Policy header, allow https://app.usenotra.com in frame-src and script-src.

Manage embeds

Open … > Embed on your site on the Agent tab again to switch between embeds, edit their domains or create another one. An organization can have up to 50 embeds. Click Delete embed to take the charts down, and pages that use it show nothing after at most a minute.

What visitors see

An open embed checks for new numbers every 30 seconds without reloading, and scan results appear within about a minute of a scan finishing. AI traffic and visitors arrive in five-minute batches, so they can take up to about six minutes.
Updated under the charts shows when the numbers on screen were loaded.
Adding or removing a chart or domain reloads open embeds within a minute, and after a delete, open embeds go blank on their next check.
While the browser tab or screen is hidden, the embed stops checking and catches up as soon as it shows again. If the network drops, the last numbers stay on screen.
The embed draws flags and brand icons locally, so visitors’ browsers only contact Notra.
The embed runs no analytics and shows no consent banner.
A small AI analytics by Notra link sits under the charts, or Analytics by Notra when the embed only shows website visitors.

An embed isn’t a login, so everyone who can open a page with the embed sees its charts. Put it on pages whose visitors may see the numbers, and only tick charts you’re happy to show there, since Share of voice shows your competitors’ names. Delete the embed to take the charts down everywhere.

Build your own chart

To draw the traffic numbers in your own chart instead, call GET /v1/projects/{projectId}/geo/traffic/overview from your server with an API key that has the traffic.read scope. Never put the API key in client-side code. Authentication explains keys and scopes.

AI Traffic

Web Analytics

MCP Analytics

Reference

Troubleshooting

Create an embed

React and other JSX

Options

Allowed domains

Manage embeds

What visitors see

Build your own chart

​Create an embed

​React and other JSX

​Options

​Allowed domains

​Manage embeds

​What visitors see

​Build your own chart

Create an embed

React and other JSX

Options

Allowed domains

Manage embeds

What visitors see

Build your own chart