---
title: How do I embed A Publication into my single-page application (SPA)?
description: How to make AVIOU work properly in your SPA with client-side routing and dynamic change of catalogues in a single component.
---

[Skip to content](https://help.aviou.io/migration/how-do-i-embed-aviou-in-my-single-page-application-spa#main-content)

English

Show submenu for translations

![Publisher logo](https://help.aviou.io/hs-fs/hubfs/Publisher.png?width=200&height=40&name=Publisher.png)

Open main navigation

Close main navigation

- English
  
  Show submenu for translations

 Hello. How can we help you?

- There are no suggestions because the search field is empty.

1. [Help Center](https://help.aviou.io/migration)
2. [Publishing](https://help.aviou.io/migration/publishing)

# How do I embed A Publication into my single-page application (SPA)?

## If you want publisher to work properly in your SPA with client-side routing and dynamic change of catalogues in a single component, you need to use the publisher web-component.

### 🧩 Embedding AVIOU Publications in Your SPA

To support **client-side routing** and dynamic switching of catalogues in your SPA, use the **AVIOU Publisher Web Component**.

You’ll need to add **two code snippets** from your publication’s settings page.

![Skærmbillede 2023-10-11 kl. 09.16.08](https://help.aviou.io/hs-fs/hubfs/Sk%C3%A6rmbillede%202023-10-11%20kl.%2009.16.08.png?width=688&height=306&name=Sk%C3%A6rmbillede%202023-10-11%20kl.%2009.16.08.png)

---

#### 1. 📄 Get the Snippets

- Go to your **Publication \> Settings**
- Scroll to **"Embed Code"**
- Click **“SPA embed”** to reveal the code snippets
- ![Skærmbillede 2023-10-11 kl. 09.20.13](https://help.aviou.io/hs-fs/hubfs/Sk%C3%A6rmbillede%202023-10-11%20kl.%2009.20.13.png?width=688&height=363&name=Sk%C3%A6rmbillede%202023-10-11%20kl.%2009.20.13.png)

---

#### 2. 🔌 Script Tag (Load the Engine)

Add this **once** in your app:

html

KopiérRediger

`<script type="text/javascript" src="https://publish.aviou.io/assets/latest-stable/web-component.js"> </script>`

📍 **Best practice**: Place it just before the closing `</body>` tag.

---

#### 3. 🧱 Web Component (Render the Catalogue)

Place this where the catalogue should appear in your app:

html

KopiérRediger

`<av-catalogue id="your-publication-id" url="https://publish.aviou.io/view/your-publication-id"> </av-catalogue>`

### 🛠️ Dynamic Loading

- You can **switch catalogues** by updating the `id` and `url` attributes dynamically.
- Multiple catalogues can be rendered at once on a single page.

🔍 **Find your publication ID** in the URL when editing it in **Live Editor**.

---

#### 💡 Example Implementation

👉 **Next.js with TypeScript Demo**  
GitHub: [https://github.com/aviou-io/spa-example](https://github.com/aviou-io/spa-example)

bash

KopiérRediger

`git clone https://github.com/aviou-io/spa-example.git cd spa-example yarn && yarn dev`

Includes:

- Routing between catalogues
- Dynamic component integration

---

 

- [Getting started](https://help.aviou.io/migration/getting-started)
- [Working in liveeditor](https://help.aviou.io/migration/working-in-liveeditor)
- [Working with feeds and data](https://help.aviou.io/migration/working-with-feeds-and-data)
- [Publishing](https://help.aviou.io/migration/publishing)
- [Tracking](https://help.aviou.io/migration/tracking)
- [PDF publications](https://help.aviou.io/migration/pdf-publications)

[![Publisher logo](https://help.aviou.io/hs-fs/hubfs/Publisher.png?width=200&height=40&name=Publisher.png "Publisher logo")](https://help.aviou.io/)

Help Center

Copyright © 2026, AVIOU ApS