Přidání About boxu do React aplikace
Jak vložit About box aboutthe.app do React aplikace — kde se nastavuje a pětikrokový návod na integraci.
Shrnutí a kontext
About box je malý vkládaný widget, který zobrazuje verzi aplikace, autora, licenci a odkazy na zdroje — nastavíte ho jednou v aboutthe.app a pak ho do libovolné aplikace vložíte jako jeden HTML tag. Tenhle návod ukazuje, kde se nastavuje, a jak ho v pěti krocích přidat do React aplikace.
1. Kde About box vlastně žije
Nic z obsahu About boxu se nenastavuje ve vašem React kódu. Jeho obsah — název, logo, verze, autor, licence a odkazy na zdroje — se nastavuje jednou v aboutthe.app dashboardu, v editoru produktu. Vaše aplikace na něj jen odkazuje.
Přesný integrační kód pro váš framework najdete přímo v tomtéž editoru, v panelu „Přidat do aplikace“. Obsahuje přímý odkaz, syrový JSON API endpoint a instrukce pro React, Vue, Angular, WordPress, čisté HTML a další — vždy s reálným aliasem daného produktu, takže ho stačí zkopírovat bez ručních úprav.
2. Přidání do React aplikace v 5 krocích
About box je Web Component (vlastní HTML element), takže ho React vykreslí jako jakýkoli jiný tag — žádná knihovna ani obalující komponenta není potřeba.
React sám o sobě žádné nastavení nepotřebuje — pokud ale projekt používá TypeScript, JSX defaultně nerozpozná neznámý vlastní element. Soubor about-the-app.d.ts z integračního panelu deklaruje jeho vlastnosti (alias, theme, unlock-code a další), takže mu rozumí kompilátor i našeptávač ve vašem editoru.
- 1
Vytvořte si produkt
Vytvořte ho v aboutthe.app (nebo otevřete existující) a poznamenejte si jeho alias — najdete ho v URL editoru produktu i v panelu „Přidat do aplikace“.
- 2
Načtěte skript widgetu
Vložte ho jednou tam, kde vaše aplikace už načítá skripty třetích stran — do index.html, nebo přes next/script, pokud používáte Next.js.
- 3
Umístěte tag
Vložte <about-the-app alias="..."> tam, kde se má box zobrazit — do patičky, na obrazovku Nastavení, nebo do položky Nápověda/O aplikaci.
- 4
Přidejte TypeScript typy (nepovinné)
Stáhněte si about-the-app.d.ts a vložte ho kamkoli do projektu, ať JSX rozpozná tag i jeho atributy.
- 5
Dolaďte vzhled
Upravte volitelné atributy — theme, show-border, unlock-code, customer-id — podle toho, jak se má box ve vaší aplikaci chovat a vypadat.
<script src="https://aboutthe.app/embed/web/v1/abouttheapp.js" async></script>
<about-the-app alias="my-app"></about-the-app>3. Co tím získáte
Ať už ho zobrazíte kdekoli — jako odkaz v patičce, na obrazovce Nastavení, nebo (jako v příkladu níže) jako položku „O aplikaci“ v menu Nápověda — box vždy ukazuje stejná živá data: aktuální verzi, autora, licenci a odkazy na zdroje, které vlastník produktu zveřejnil.
Chcete si přidat vlastní About box?
Založte si zdarma produkt na aboutthe.app a integrační kód budete mít během pár minut.