Reply Forms

Most sites provide the ability for visitors to reply to one-anothers comments. Meerkat supports this out of the box, but might be one of the most involved aspects of integrating Meerkat in your site's theme.

When Meerkat generates the opening tags of the comment form, it adds the [data-meerkat-form="comment-form"] attribute to the form. This tells Meerkat "Hey, this is the form that is used to post comments!"; this is the form that will be used inline when a visitor clicks the "Reply To" link below a comment on your site.

#Adding the Necessary JavaScript

While you could technically roll your own JavaScript to allow visitors to reply to other comments on your site, it is definitely easier to harness Meerkat's "reply to" JavaScript file. To add this file to your themes, simply use the following tag to your default layout (presumably after all of the other JavaScript files):

1{{ meerkat:replies-to }}

This will create a <script> tag referencing Meerkat's replies-to.js JavaScript file.

#Creating the "Reply To" Link

In order for visitor's to reply to other visitor's comments, you need to include a "Reply To" link on your site. The exact wording, styling, etc. does not matter. The only thing that matters is that you include the following markup on the "Reply To" link (Note: only the meerkat-* data attributes are required, apart from that, go wild!):

1<a href="#" data-meerkat-form="reply" data-meerkat-reply-to="{{ id }}">Reply</a>

That should be all you have to do to get Meerkat to enable an awesome "reply to" form for your site's visitors. This method will simply create a clone of your site's main comment form, and display it below the comment you would like to reply to. While this is the fastest way to get you up and running, you most likely want a little more freedom in how Meerkat displays the "reply to" form; don't worry - Meerkat has got you covered.

First, however, let's discuss how Meerkat decides which reply to form to display.

#How Meerkat Decides What Form to Display

Meerkat, by default, will display whatever form has been generated by the {{ meerkat:create }} tag (pro tip: the default attribute value will be data-meerkat-form="comment-form"). This form has the data attribute data-meerkat-form="comment-form" attached to it, and this is how Meerkat knows to use that form. However, you can create a custom "reply to" form by creating a form with the data attribute data-meerkat-form="comment-reply-form" data attribute.

If Meerkat detects that an element exists on the page with the data-meerkat-form="comment-reply-form data attribute, it will use that as the "reply to" form that is displayed to your site's visitors whenever they click a "Reply To" link.

As an example, the following example demonstrates how you might create a custom "reply to" form:

1<div style="display: none;">
2{{ meerkat:create data-meerkat-form="comment-reply-form" }}
3  <!-- Implement the rest of your form here. -->
4{{ /meerkat:create }}
5</div>

The default JavaScript and form handling system should be enough to get most sites up and running in little time. However, if you need to customize things even further, you should consider checking out the Advanced Reply Forms article.