0.0.4 • Public • Published

    Triangle Comments

    Triangle comments is the simplest way to add comments to your static website. Simply define your API key and Site ID from Netlify, and you can add comments to any page on your website 🎉

    Important: Currently, Triangle only works with Gatsby and Netlify, but support for other SSGs and hosting providers will be added in the future. If you have any questions or need assistance, you can contact us

    Table of Contents

    Getting Started

    Setting up your website

    Triangle only works with Netlify, so you need to make sure you have your site hosted on Netlify. If you don't, you can follow the instructions here.

    Once your site is hosted on Netlify, you can continue below.

    Installing Packages

    To get started, just install triangle-comments and the Gatsby plugin, gatsby-plugin-triangle-comments.

    Using NPM:

    npm install --save triangle-comments gatsby-plugin-triangle-comments

    Using Yarn:

    yarn add triangle-comments gatsby-plugin-triangle-comments


    In order to use Triange with Gatsby, you need to add the plugin to your gatsby-config.js file at the root of your project.

    module.exports = {
        plugins: [
                resolve: 'gatsby-plugin-triangle-comments',
                options: {

    After updating your gatsby-config.js file, you need to add a few options to the configuration in order for Triangle to work.

    First, you need a Netlify site ID. This can be found from your Netlify site dashboard by visiting Settings > General > Site details > Site information. Copy the value for API ID and store it in your environment variables as NETLIFY_SITE_ID. Then, use the environment variable as the value for the siteID options in gatsby-config.js

    options: {
        siteID: process.env.NETLIFY_SITE_ID

    The second mandatory value in the options object is the apiKey. This must be created manually in Netlify. Visit your User Settings > Applications at this link: (Personal Access Tokens)

    Click "New Access Token" and follow the steps to generate a new API token. Copy this value and store it in your environment variables as NETLIFY_TOKEN. Then, update your options configuration in gatsby-config.js to use this new value.

    options: {
        siteID: process.env.NETLIFY_SITE_ID,
        apiKey: process.env.NETLIFY_TOKEN

    Adding Comment Functionality

    Triangle is set up to automatically filter all comments by page and only display the ones for that page. This means that you can have as many comment forms as you'd like on your site.

    Triangle comes with 2 main components: Form and Comments. Form is the comment form, while Comments is the component that displays your comments (go figure 🤷‍♂️)

    Adding a Form

    To add a comment form to your page, just import it

    import { Form } from 'triangle-comments';

    and add it wherever you please

    <Form />

    Displaying Your Comments

    To display your comments, simply import the Comments compoment

    import { Comments } from 'triangle-comments';

    and add it wherever you'd like. Usually, this would be directly below the Form

    <Form />
    <Comments />

    Custom Configuration

    Because everyone likes to do things their own way.

    Triangle allows you to customize the stlying of your Form and your Comments components. Simply change the color value in gatsby-config.js to match Triangle to the theme of your website.

    options: {
        color: "#2e35cd"

    As of now, that's the only styling option, but support for custom CSS and styling of the inputs, buttons and comment display is coming soon. Stay tuned!


    Triangle is currently in beta stages, and is constantly evolving and improving. If you have an questions or need help setting up Triangle, you can open an issue on Github or email us at




    npm i gatsby-plugin-triangle-comments

    DownloadsWeekly Downloads






    Unpacked Size

    10.5 kB

    Total Files


    Last publish


    • jwpeachey