Template breakdown

In the getting started guide we gave you a basic template that will get you started and contains all the hooks for the standard client to do make sure all your comments are displayed.

However it is very basic and you’ll probably want to adjust it to match your design and layout.

In this guide we’ll breakdown what makes the basic template work so you can tweak and customize it.

Note: we are going to assume you want your template to work with the default client script. If you are going to use your own client you are completely free in your markup.

Container

First we’ll need a container that will position the form and the comments for the page.

<div data-comments-sh-slug="page-name">
    <div id="comments-sh">
    </div>
    <div id="form-sh">
    </div>
    ...
</div>

The data attribute ‘data-comments-sh-slug’ can be placed anywhere within the document and should contain a unique per page value. This will be used as the unique identifier that any comments will be linked to. How to fill this is beyond the scope of this doc and depends on your website builder of choice.

Next we have the ‘comments-sh’ container div. The client will search for an element by the id ‘comments-sh’ and will use it as a container to place all loaded comments into.

The other container is the ‘form-sh’ container div. The client will search for an element by the id ‘form-sh’ and will use it as a container to display the form to submit comments with.

Each container can be placed anywhere on the page and don’t necessarily need to be placed in the same parent.

Form

Next we have to define a template for the form. The client will use the id ‘comments-sh-form-template’ to find and clone the template. After the client will use the id of the form ‘comments-sh-form’ to attach a submit handler.

<template id="comments-sh-form-template">
    <form id="comments-sh-form">
        <input type="text" name="name" required minlength="2" maxlength="255"><br>

        <textarea name="text" required minlength="50" maxlength="5000"></textarea><br>

        <div class="comments-sh-submit-box">
            <div>
                <label for="privacy">
                <input type="checkbox" name="privacy" required value="true"> 
                I agree to the <a href="/privacy/">privacy policy</a> 
                    and consent to my data being processed.
                </label>
            </div>

            <input type="submit" value="Comment">
        </div>
    </form>
</template>

As you can see the form has 3 input fields. * Name * Comment/text * Privacy checkbox

Comments

The last template that we need is the one to insert comments. It is found by the client by the id ‘comments-sh-comment-template’ and after it uses the classes to find the right elements to insert all the text of the comment. It is not tied to any specific elements so feel free to change this however you see fit as long as the ‘comment-name’, ‘comment-timestamp’ and ‘comment-text’ classes are present to indicate what elements should hold each piece of the comment respectively.

<template id="comments-sh-comment-template">
    <div class="comment">
        <div>
            <div><span class="comment-name"></span> says:</div>
            <div class="comment-timestamp"></div>
        </div>
        <div class="comment-text"></div>
    </div>
</template>

Complete

Putting it all together and we get the following.

Note: you may need to set display: none on the template tags for IE 11 compatibility

<div data-comments-sh-slug="page-name">
    <div id="comments-sh">
    </div>
    <div id="form-sh">
    </div>
    <template id="comments-sh-comment-template">
        <div class="comment">
            <div>
                <div><span class="comment-name"></span> says:</div>
                <div class="comment-timestamp"></div>
            </div>
            <div class="comment-text"></div>
        </div>
    </template>
    <template id="comments-sh-form-template">
        <form id="comments-sh-form">
            <input type="text" name="name" required minlength="4" maxlength="200">
            <br>

            <textarea name="text" required minlength="50" maxlength="5000"></textarea><br>

            <div class="comments-sh-submit-box">
                <div>
                    <label for="privacy">
                    <input type="checkbox" name="privacy" required value="true"> 
                    I agree to the <a href="/privacy/">privacy policy</a> 
                     and consent to my data being processed.
                    </label>
                </div>

                <input type="submit" value="Comment">
            </div>
        </form>
    </template>
</div>