Vanilla JavaScript

You’re not required to use JamComments only with a server-rendered framework. It’s possible to use it with only front-end JavaScript (see the simple demo here). Here’s how that works.

Despite not being server-rendered, this approach still yields benefits over other embeddable solutions:

• ~10 lines of code to configure
• no custom styles
• ~2.6kb (gzipped) of JavaScript needed to load
• ~3.6kb (gzipped) of HTML to load lazily load in after that

Installation

In your project, install the @jam-comments/client package:

npm install @jam-comments/client

Or load it from a CDN:

<script src="https://unpkg.com/@jam-comments/client"></script>

Usage

If you’re using ES modules, import the initialize method and pass some configuration properties. The first argument can be either an HTML element selector or an element itself. The contents of this element will be used to house your comment form.

import { initialize } from "@jam-comments/client";

initialize("#root", {
    path: window.location.pathname,
    apiKey: "your-very-long-api-key",
    domain: "your-domain.com",
    environment: "production",
});

If you’ve loaded the library from a CDN, you’ll have access to the JamComments object:

<script src="https://unpkg.com/@jam-comments/client"></script>
<script>
    JamComments.initialize("#root", {
        path: window.location.pathname,
        apiKey: "your-very-long-api-key",
        domain: "your-domain.com",
        environment: "production",
    });
</script>

Promise-Based Instantiation

After the comment form has been instantiated, the initialize function resolves to the HTML element on which the form was mounted.

initialize("#comments", {
    path: window.location.pathname,
    apiKey: "your-very-long-api-key",
    domain: "your-domain.com",
    environment: "production",
}).then(function(element) {
    el.classList.add('is-loaded');
});

The promise will only resolve after the first repaint following instantiation, which means you can safely use it to perform things like CSS animations:

Configuration Properties

Here’s some more detail on what values you can use to configuration your comment form. The first argument must either be a string selector to an element or a reference to an HTMLElement itself (ex: document.getElementById('root')).

Configuration Property Name	Description
path	The path for which you’re loading and accepting comments.
domain	The domain for your site as configured in your account. Don’t include the protocol (“https”).
apiKey	The API generated in your account settings.
environment	The environment JamComments will use to determine if it should render dummy comments. Must be either “production” or “development.”
dateFormat	Optional. The default format for comments is m/d/Y. If you’re from another country, that might be weird. So, you can customize it by using the dateFormat option. Note that the format must follow PHP’s DateTime standards.

Trade-Offs

Keep in mind that loading the comment form client-side will have a marginal impact on your page’s performance. Additionally, search engines may not be able to crawl your comment content as efficiently as server-rendered content.