Origami Frontend Components & Services

Readme: o-comments

o-comments is not maintained by the Origami team. This means that the Origami team will not necessarily be able to help you with support requests. The people who maintain this component may be able to offer support, but it's not guaranteed.

o-comments has a support status of "experimental". This means that the component's API may change without notice, and there is no guarantee that the component is ready for production use.

A component, integrated with FT authentication and user data services, to add comments to content.


Use the following markup to enable comments:

<div  class="o-comments" data-o-component="o-comments">

This element will be initialized automatically on the o.DOMContentReady event meaning you're unable to defer component initialisation.


No code will run automatically unless you are using the Build Service. You must either construct an o-comments object or fire the o.DOMContentLoaded event, which oComponent listens for.

Constructing an o-comments

const oComments = require('o-comments');

Firing an oDomContentLoaded event


document.addEventListener('DOMContentLoaded', function() {
    document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));


.on(eventName, callback)

The .on interface allows you to listen for events.

const oComments = require('o-comments');
const Comments = new oComments();

Comments.on('component.render.successful', () => {
    console.log('The comments have rendered')


Events are emitted during key events and can be listened to using the .on interface.

The naming of events uses a dot notation and follows a category.action.state namespacing. The categories and their events are listed below.


These events are anything to do with the component itself.


These events are anything to do with comment interactions.


These events are anything to do with users being authenticated.


Remember to start your codeblocks with three backticks and "sass" so your markup is syntax highlighted correctly.

As with all Origami components, o-comments has a silent mode. To use its compiled CSS (rather than using its mixins with your own Sass) set $o-comments-is-silent : false; in your Sass before you import the o-comments Sass.


This is a good place to put problems that come up repeatedly


If your component is particularly complicated (image sets fall into this category) then a contributing section or even a contributing.md might be useful.


We use tables to represent our migration guides. Be sure to update it when there is a major release, and update MIGRATION.md, as well

State Major Version Last Minor Release Migration guide
✨ active 3 N/A migrate to v3
⚠ maintained 2 2.0 migrate to v2
╳ deprecated 1 1.0 N/A


If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub Repository

Install o-comments

If using the Build Service, add o-comments@^6.0.0-beta.9 to your script and link tags.

If running a Manual Build, run bower install --save "o-comments@^6.0.0-beta.9".

Help & Support

o-comments is not supported directly by the Origami team. We make no guarantees, but will help if we can. First try contacting its maintainers at:

Email: YOUR-TEAM@ft.com