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

🧩 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.

1. 📄 Get the Snippets

• Go to your Publication > Settings

• Scroll to "Embed Code"

• Click “SPA embed” to reveal the code snippets

• 

2. 🔌 Script Tag (Load the Engine)

Add this once in your app:

📍 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:

🛠️ 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

Includes:

• Routing between catalogues

• Dynamic component integration