---
url: https://docs.comnto.com/integration.md
description: >-
  The two ways to mount the widget (data attributes or window.comnto()), how the
  loader derives topics and sizes the iframe, and which method to choose.
---

# Integration Overview

Comnto offers two complementary ways to initialise the widget:

1. **Data attributes** – declare options directly on the comments container. Ideal for straightforward installs and CMS snippets.
2. **`window.comnto()` API** – call a function and receive a widget handle for advanced control (multiple containers, dynamic updates, single page apps).

Both approaches load the same iframe. You can even mix them: use attributes for the default container and call `window.comnto()` for any widgets you create later in JavaScript.

## How the Loader Works

* The embed script scans the document for elements marked with `data-comnto`.
* It reads their `data-*` attributes, merges them with any options passed to `window.comnto()`, and builds the iframe URL for the hosted widget.
* If you omit `data-topic`, the loader derives a stable identifier from the page URL (using canonical URL, query ids, and path segments). This keeps threads consistent across revisits, However, we highly recommend explicitly passing a stable topic ID yourself, such as the article’s unique ID.
* The iframe automatically reports its height via `postMessage`, so you never have to manage sizing manually.

## Choosing the Right Method

Use the quick checklist below:

| If you need… | Recommended method |
| --- | --- |
| Just one widget per page with static options | Data attributes |
| Multiple widgets or dynamic topics | `window.comnto()` |
| Respond to user preferences at runtime (theme, locale, SSO updates) | `window.comnto()` |
| Integrate inside a CMS where editors paste snippets | Data attributes |

Next steps:

* [Using data attributes](/integration/data-attributes)
* [Using the `window.comnto()` API](/integration/window-api)