Showing an Ad

You can add promotional content that displays below the table of contents on desktop and at the end of the page content on mobile.

How to show an ad

Use the ad option inside the plugin configuration:

import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
import starlightUiTweaks from "starlight-ui-tweaks";

export default defineConfig({
  integrations: [
    starlight({
      plugins: [
        starlightUiTweaks({
          ad: {
            image: "/ad-image.png",
            title: "Try Our New Product",
            description: "Boost your productivity with our latest tool.",
            buttonLabel: "Learn More",
            buttonHref: "https://example.com/product",
          },
        }),
      ],
      title: "My Docs",
    }),
  ],
});

Placement

The ad appears in different locations depending on screen size:

• Desktop: Below the table of contents in the right sidebar
• Mobile: At the end of the page content, before the footer (when the table of contents is hidden)

Internationalization

Ad content can be internationalized. See the Internationalization guide for more details.

import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
import starlightUiTweaks from "starlight-ui-tweaks";

export default defineConfig({
  integrations: [
    starlight({
      locales: {
        root: {
          label: "English",
          lang: "en",
        },
        es: {
          label: "Español",
          lang: "es",
        },
      },
      plugins: [
        starlightUiTweaks({
          ad: {
            image: "/ad-image.png",
            title: "Try Our New Product",
            description: "Boost your productivity with our latest tool.",
            buttonLabel: "Learn More",
            buttonHref: "https://example.com/product",
          },
          locales: {
            es: {
              ad: {
                image: "/ad-image-es.png",
                title: "Prueba Nuestro Nuevo Producto",
                description:
                  "Aumenta tu productividad con nuestra última herramienta.",
                buttonLabel: "Saber Más",
                buttonHref: "https://example.com/es/producto",
              },
            },
          },
        }),
      ],
      title: "My Docs",
    }),
  ],
});