How do I embed AVIOU on my website?

Here you can learn how to work with AVIOU inside your own website CMS. AVIOU can be placed on one or more URL's.

AVIOU is a React app that runs in the user's browser. It consists of a div where AVIOU is rendered and a script that handles the entire rendering process. The div where AVIOU should be executed should be inserted on the page where you want to show the AVIOU publication (typically after the top menu and before the footer). The script itself can be inserted along with the div or at the end of the page (it should not be before the div as we depend on it being in the DOM before we can render).

Since our content is rendered in the same DOM as the content from the CMS, it is necessary for us to test that the CMS and AVIOU do not affect each other in an unintended way. This could be because CSS from the CMS/shop affects something inside AVIOU or because a script blocks a function we are using. We also need to test whether we can add items to the cart on the site.

Therefore, we create a test page where we can see if these kinds of challenges arise, as we can only determine the above problems when we run AVIOU in the CMS. This test page can also be used to "preview" new publications in the production environment.

Most customers create it as a hidden page called "/aviou-test" which is not linked to from the menu.