Add an About Box to a WordPress Site

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 it to WordPress in 3 steps

The About box is a Web Component that loads its data from AboutTheApp. WordPress only stores the script tag and the element, so links and contacts change without editing the site.

Script tags need the unfiltered_html capability

WordPress removes script tags from content saved by users without the unfiltered_html capability. On a single site, Administrators and Editors have it. On Multisite, only Super Admins do. Insert the code under an account that has it.

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
Add a Custom HTML block
In the block editor, add a Custom HTML block to a page, or in the Site Editor to the footer template part, and paste the code. In a classic theme, use the Custom HTML widget in the footer widget area.
3
Check the preview
Switch the block to Preview or open the page. If the box stays empty, check that the script tag is still in the block after saving.

Add it to the theme template

In a classic theme, you can put the code into footer.php of a child theme. The box then appears on every page and a parent theme update doesn't overwrite it.

The version attribute in the example takes the version from the Version header of the theme's style.css. Release notes appear when the same version exists in the product's version catalog and is public.

footer.php

<footer class="site-footer">
  <about-the-app
    alias="aboutthe.app"
    variant="footer"
    version="<?php echo esc_attr( wp_get_theme()->get( 'Version' ) ); ?>"
  ></about-the-app>
</footer>

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

Show support contacts to your client

If you build or maintain sites for clients, the support variant shows the site name, its links and a button that copies the name and version for a bug report. Add your support email, ticket system and documentation to the product in AboutTheApp.

When the site moves to another agency, you hand over the links in one place. If you're not sure what to include, use the project handover template.

Frequently asked questions

Do I need a plugin to add an About box to WordPress?

No. A Custom HTML block or widget is enough. The About box loads its data from AboutTheApp, so WordPress doesn't store any of it.

Why did WordPress remove my script tag?

WordPress strips script tags from content saved by users without the unfiltered_html capability. Save the block as an Administrator or Editor on a single site or as a Super Admin on Multisite.

Does the About box use cookies?

No. The About box sets no cookies and uses no analytics. It only stores a token from a previous unlock in sessionStorage, never the unlock code itself.

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