Add an About Box to a React App
How to embed the aboutthe.app About box in a React application — where to configure it, and a five-step integration walkthrough.
Overview & context
The About box is a small embeddable widget that shows an app's version, author, license and resource links — configured once in aboutthe.app, then dropped into any app as a single custom HTML tag. This guide covers where to set it up and how to add it to a React application in five steps.
1. Where the About box actually lives
Nothing about the About box is configured in your React code. Its content — name, logo, version, author, license, and resource links — is set once in the aboutthe.app dashboard, in the product's editor. Your app only embeds a reference to it.
The exact integration snippet for your framework is generated for you inside the same editor, under the product's "Add to your app" panel. It lists a direct link, a raw JSON API endpoint, and embed instructions for React, Vue, Angular, WordPress, plain HTML and more — always matching that product's real alias, so you can copy it without editing anything by hand.
2. Add it to a React app in 5 steps
The About box is a Web Component (a custom HTML element), so React renders it like any other tag — no wrapper library needed.
React itself needs no setup — but if your project uses TypeScript, JSX won't recognize an unknown custom element by default. The about-the-app.d.ts file in the integration panel declares its props (alias, theme, unlock-code, and the rest), so both the compiler and your editor's autocomplete understand the tag.
- 1
Create your product
Create it in aboutthe.app (or open an existing one) and note its alias — you'll find it in the product editor's URL and in the "Add to your app" panel.
- 2
Load the widget script
Add it once, wherever your app already loads third-party scripts — in index.html, or via next/script if you're on Next.js.
- 3
Place the tag
Add <about-the-app alias="..."> wherever you want the box to appear — a footer, a Settings screen, or a Help/About menu item.
- 4
Add TypeScript types (optional)
Download about-the-app.d.ts and drop it anywhere in your project, so JSX recognizes the tag and its attributes.
- 5
Customize the appearance
Adjust the optional attributes — theme, show-border, unlock-code, customer-id — to match how the box should look and behave inside your app.
<script src="https://aboutthe.app/embed/web/v1/abouttheapp.js" async></script>
<about-the-app alias="my-app"></about-the-app>3. What you get
However you surface it — a footer link, a Settings page, or (like the example below) an "About" item in a Help menu — the box always shows the same live information: current version, author, license, and whichever resource links the product owner made public.
Ready to add your own About box?
Create a free aboutthe.app product and get your integration snippet in minutes.