Meerkat makes it easy to integrate into your existing Statamic theme by providing familiar features. Before you get starting integrating Meerkat into your theme, it is recommended that you catch up Statamic templates and Statamic Forms.

Hey there! We've released Tanager, a free Statamic theme that has 100% Meerkat integration. Check it out and accelerate your next Statamic and Meerkat project!

Overview

In this guide, we will be integrating Meerkat into Statamic's default Redwood theme. To get a sense of what we will be building, we are going to add commenting capabilities to the Redwood blog section:

We will start by modifying the themes/redwood/templates/blog/post.html file. When we start, the content of this file will look like this (at the time of writing):

<section class="regular">

    <header>
        <div class="meta clearfix">
            <div class="author">
                <img src="https://s3.amazonaws.com/uifaces/faces/twitter/rssems/48.jpg"
                     class="img-circle" width="48" height="48">
                <div class="pull-left">
                    <a href="" class="name">{{ author_name }}</a>
                    <span class="length">{{ content | read_time }} minute read</span>
                </div>
            </div>
            <div class="date">
                {{ date format="F j, Y" }}
            </div>
        </div>
        <h1>{{ title }}</h1>
        {{ sub_title wrap="h2" }}
    </header>

    <article class="content">

        {{ if intro_image }}
            <p><img src="{{ intro_image }}" class="intro-image"></p>
        {{ /if }}

        {{ content }}

        <ul class="tags">
        {{ tags }}
            <li><a href="{{ url }}">{{ title }}</a></li>
        {{ /tags }}
        </ul>
    </article>

</section>

{{ partial:article-footer }}

We will be adding our code after the <ul class="tags"> block.

Creating the Comment Form

To create the comment form, we will use the {{ meerkat:create }} tag. It is strongly recommended that you brush up on Statamic's form:create tag (read the docs for this tag here) as Meerkat uses the same syntax when creating comment forms.

At the most basic level, this is all the code we will have to write to implement our comment form:

{{ meerkat:create }}

{{ fields }}
<div class="form-group">
    <label>{{ display }}</label>
    <input type="text" name="{{ field }}" value="{{ old }}" class="form-control" />
</div>
{{ /fields }}

<input type="submit" value="Submit your comment!">
{{ /meerkat:create }}

After we have added this code to the Redwood template, you will see this on the page:

You may notice that the form's fields are not in the typical order, that's fine for now. We will discuss how to modify this later.

The completed code for our new post.html file should look like this:

<section class="regular">

    <header>
        <div class="meta clearfix">
            <div class="author">
                <img src="https://s3.amazonaws.com/uifaces/faces/twitter/rssems/48.jpg"
                     class="img-circle" width="48" height="48">
                <div class="pull-left">
                    <a href="" class="name">{{ author_name }}</a>
                    <span class="length">{{ content | read_time }} minute read</span>
                </div>
            </div>
            <div class="date">
                {{ date format="F j, Y" }}
            </div>
        </div>
        <h1>{{ title }}</h1>
        {{ sub_title wrap="h2" }}
    </header>

    <article class="content">

        {{ if intro_image }}
            <p><img src="{{ intro_image }}" class="intro-image"></p>
        {{ /if }}

        {{ content }}

        <ul class="tags">
        {{ tags }}
            <li><a href="{{ url }}">{{ title }}</a></li>
        {{ /tags }}
        </ul>
    </article>


    {{ meerkat:create }}

    {{ fields }}
    <div class="form-group">
        <label>{{ display }}</label>
        <input type="text" name="{{ field }}" value="{{ old }}" class="form-control" />
    </div>
     {{ /fields }}

    <input type="submit" value="Submit your comment!">
    {{ /meerkat:create }}

</section>

{{ partial:article-footer }}

Submitting Our First Comment

Now that we have a comment form on our blog, let's give it a test run! Don't worry - we don't have to go through any more setup tasks in order to start receiving comments it will just work. Enter a comment into your new form and activate the "Submit your comment!" button. Once you have done this, navigate to the Comment Manager within the Control Panel; you should see your comment appear!

You may notice that the comment has a red/orange border on the left side. This is to visually indicate to you that the comment has not been approved. Hover over the comment to display the comment actions and activate the "Approve" button. Your comment should be approved and the border should disappear.

Perfect! We've created a comment form and submitted a comment in about five minutes; that's awesome! The only problem is that we still cannot view these comments on our site; we have to build that out next. Luckily for us, Meerkat makes that incredibly simple. We will cover that in the article Building the Comment Thread.