Insert a widget into the website

The appearance of the |related| widget is always customised according to the website's design, using its style elements, before the code is submitted. A widget placed immediately after the content of the article is most effective, but we will always agree on the position of the widget within the page.

The insertion code should be placed in the appropriate section or element within the HTML document. This will ensure that the content recommendation widget is displayed to the website visitor exactly where it was designed to be, in harmony with the rest of the content and layout of the website. 

If multiple widgets have been designed for the same page, each one must be inserted separately in the appropriate place.

To avoid potential problems, please do not modify the embed code or overwrite the appearance with custom CSS settings. If you experience a discrepancy or later change the design of the website, please report the problem to [email protected] and we will adjust the styles.

Next.js, Nuxt and single-page applications

If your website uses React/Next.js, Vue/Nuxt or another framework that renders content dynamically, insert the widget script after the relevant component has mounted on the client and the widget div is present in the DOM. If the component is server-rendered and hydrated on the client, wait until its hydration is complete before initializing the widget.

The widget does not automatically detect navigation that occurs without a full page reload. When replacing an existing widget, first remove its entire DOM element, then create a new, empty widget div with the supplied attributes, and only then insert the script again.

Clearing the contents of the existing div is not sufficient: if the data-init="1" attribute added during initialization remains on the element, the script will skip it.

If you have any questions or encounter issues with a custom framework integration, please contact us so we can help you with the implementation.