Skip to content

Integration

Getting Started

Before you can add the widget to your site, ensure that you have an account with an active subscription at www.commentix.com.

Next, sign in to your account in the Commentix Console and click Add Site to register your website. Once the registration is complete, you will be redirected to the Integration section, where you will find the HTML embed code shown below:

<script src="https://static.commentix.com/js/widget.js" defer></script>
<commentix-widget site="{{ SITE_ID }}"></commentix-widget>

Insert the snippet into your site's HTML template at the desired location.

Info

While the default snippet works for most use cases, certain setups require the thread attribute on the <commentix-widget> element to prevent problems. See the Configuration page for more information.

Responsiveness

The widget is responsive and expands to fill the width of its parent container. However, for containers exceeding 800px, it is recommended to apply a maximum width using CSS.

Excessively wide containers can negatively impact readability by creating long line lengths. For optimal legibility, comments should ideally maintain a width that results in 45 to 75 characters per line. When lines are too long, the reader's eye has difficulty tracking from the end of one line to the start of the next, leading to increased cognitive load and higher skip rates.

Example:

commentix-widget {
    max-width: 800px;
}

Multilingual Websites

The widget supports over 20 languages. By default, it attempts to detect the site's language via the lang attribute of the <html> element. If the detected language is not supported, it falls back to English.

To force a specific locale, you can define the language attribute on the <commentix-widget> element. For an example and the complete list of supported language codes, refer to the language attribute in the Configuration section.