Add an About Box to Any Website with HTML and JS

Live example

This is the About box of AboutTheApp itself. Switch the variant to see other layouts. The code below renders exactly this box. For your own app, change the alias.

About box

HTML

<script src="https://aboutthe.app/embed/web/0.3.5/card.js" integrity="sha384-X3VGSEdTNGsfVKfVUx7sq9ICfpWsJW88HDQYidGPio1KjoxYCbSirTNqtbVfq1sj" crossorigin="anonymous" async></script>

<about-the-app alias="aboutthe.app" variant="card" api-base="https://aboutthe.app/api/v1" visual-style="default" palette="default" appearance="auto"></about-the-app>

Add an About box to a web page in 3 steps

The About box is a Web Component, a custom HTML element that all current browsers support. It works on a static page, in a server-rendered template and inside any JavaScript app.

Always close the element

Custom elements in HTML need a closing tag. The browser reads <about-the-app alias="aboutthe.app" /> as an opening tag, so the content that follows ends up inside the About box element.

1
Create your product
Create it in AboutTheApp and note its alias. The Integrate panel on the product card has the same code as the live example, already filled in with your alias.
2
Load the script
Paste the script tag into the page once, for example before the closing body tag. The code in the live example points to an exact script version and includes the integrity attribute.
3
Place the element
Put <about-the-app alias="aboutthe.app"></about-the-app> where the box should appear, for example in the footer or on an About page.

index.html

<footer>
  <about-the-app alias="aboutthe.app" variant="footer"></about-the-app>
</footer>

<script src="https://aboutthe.app/embed/web/v1/abouttheapp.js" async></script>

Choose the layout and the look

The variant attribute picks the layout: card (default), footer, compact, dialog, support, version, maker, credits or link. You can switch between them in the live example above and see each one with real data.

The look is set by visual-style, palette and appearance. If you set visual-style="host" and palette="host", the box takes the font, corner radius and colors from your page, which suits footers and menus. You can override single colors with --ata-* CSS variables.

Show the version of the running build

Without the version attribute, the box shows the version recorded in AboutTheApp. If your build knows its own version, pass it in the version attribute and the box shows exactly that value. Release notes appear when the same version exists in the product's version catalog and is public or is private and the box is unlocked with an unlock code.

The element reacts to attribute changes, so a script can also set the version after the page loads. If you're not sure how to get the version into your build, read how to display the app version.

index.html

<about-the-app alias="aboutthe.app" variant="version" version="1.4.2"></about-the-app>

<script>
  // Or set it later, for example from a value your build injects:
  document.querySelector("about-the-app").setAttribute("version", "1.4.2");
</script>

Frequently asked questions

Does the About box need a framework or a build step?

No. One script tag and one HTML element are enough. The script has no runtime dependencies and renders the box into a Shadow DOM, so your page's CSS doesn't affect it and its CSS doesn't leak into your page.

Will the About box slow down my page?

The script loads with the async attribute, so it doesn't block rendering. The code from the Integrate panel loads only the script for the chosen variant, not all of them.

Does the About box work with a Content Security Policy?

Yes. Allow https://aboutthe.app in script-src, connect-src and img-src. If your policy blocks inline styles, pass your nonce in the nonce attribute and the box applies it to its internal style element.

AboutTheApp

Ready to add your own About box?

Create a free AboutTheApp product and get your integration code right away.

Create your first product

Related guides

ℹ️App content