Add a comment section to your React project - Part 1: Basic implementation

A comment section is a crucial component in many websites and applications, allowing your users to interact, and helping you to create a community around your product.

In this tutorial, I will guide you through how you can integrate a fully functioning comment section in your React.js project in less than 5 minutes using Replyke.

Why Replyke? Because Replyke works with your own users, its UI is fully customizable with an awesome design studio and it takes less than 5 minutes to integrate.

disclaimer: I built it :)

# Note: When using Replyke, you can choose either to store your data on Replyke's servers, or implement your own backend and store your data on your own server.
This is a two part tutorial - in this first part I will guide you through the basic, very simple integration, which will host your data on Replyke's servers.

In part two, I will show you how to implement your own backend and store the data on your own server.

With that said, let's get going and add our first comment section.

Step 1:

Install Replyke as a dependency in your React app.

npm i replyke

Step 2:

Head over to Replyke and create your account. Once you've signed up, open the menu by clicking your avatar at the top-right corner, and choose "My apps".

Step 3:

Now, Create your first app - all you need is a name for it. The name is for your eyes only, and will not be visible to your users. Once you've created your application, you should be forwarded to your new app's dashboard, where you will see your unique app key.

Step 4:

Choose a page in which you'd like to insert the comment section, and paste the following code (we will go over what each of these variables is).

<CommentSection
 appKey="YOUR_APP_KEY"
 articleId="UNIQUE_ARTICLE_ID"
 styleId="STYLE_ID"
 callbacks={{
    loginClickCallback: LOGIN_CALLBACK,
    commentAuthorClickCallback: COMMENT_AUTHOR_CLICK_CALLBACK,
    currentUserClickCallback: CURRENT_USER_CLICK_CALLBACK
 }}
 currentUser={user ? {
    _id: USER_ID,
    name: USER_NAME,
    img: USER_IMAGE
 } : undefined}
 />

Now let's go over what the value of each of those variables should be for your app:

YOUR_APP_KEY: This is the app key which you've received after you created your app. You can always go back to your app's dashboard and view it again.

UNIQUE_ARTICLE_ID: This is an identifier that separates all the comments in your app, based on pages. For example, if you have a comment section at your home page, and another one at your blog page, you wouldn't want the comments from both to get mixed up. This is where article ID comes in. For static pages, you can simply hard code the page's name (e.g. "home", "blog", "gallery" etc). Just be sure that you don't give two sections the same article ID, or the comments from both these section will get merged. For comment sections in dynamically generated pages, simply pass the ID of the item's page as the article ID (e.g. the product's ID / article's ID etc). When fetching comments, the query filters both based on the article ID and the app key, so don't worry about naming your static pages something generic like "home".

STYLE_ID: We will get back to that in a moment.

LOGIN_CALLBACK: I've built Replyke with the intention of making it feel like a native part of any website, rather than an external plugin. Part of that means working with your own user system, rather than having users create an account just for using the comment system. So, we need to pass to Replyke a callback for what we want to do once an unauthorized user clicks the "login" button. Maybe we want to open a popup window, or maybe we want to redirect them to a login in page. This is completely up to you. This callback is required.

COMMENT_AUTHOR_CLICK_CALLBACK: Unlike the login callback, this callback is completely optional. What is it for? This callback is for when a user clicks the name/avatar of the author of a comment. In case we want to open this user's profile page on click for example, this is where we set the logic for it.

CURRENT_USER_CLICK_CALLBACK: Also like the previous callback, this one isn't required as well and is completely optional. This callback is for when a user clicks their OWN name in the comment section statistics bar (under the form section). In case we want to open the current user's profile page on click for example, this is where we set the logic for it.

USER_ID / USER_NAME / USER_IMG: We need to pass to Replyke the details of the currently logged in user, or undefined if no user is logged in. If a user IS logged in, Replyke needs from us three pieces of information only- the user's id, name and image (if there is one). Make sure you pass the object using the field names used in the above code (_id, name & img).

We're done! Go to your page, and you could see your fully functioning comment section.
But, you're probably thinking.. it's pretty ugly. That's because we haven't added any styling yet! Let's add the styleId we've skipped on before.

Step 5:

Back in Replyke, head over to the Studio. The default comment section in the studio already comes pre-configured with some styling. If you like the way the default configuration looks, you can keep it as it is. Otherwise, you can play with the controllers on the left hand side and customize the comment section to completely fit your own website's UI.
Once you are done, give this style a name & click the "Publish" button at the top-right of the page.

Step 6:

After a quick redirect (still in the studio, just now you're in editing mode for your new style), you should now see the style ID at the top of the studio. Simply copy this ID and paste it in the "styleId" prop of your CommentSection component.

Refresh your page, and see the comment section with your new styling!
If you wish, you can always go to your styles page (click avatar -> my styles) and edit any of your styles.

Interested in implementing your own backend and hosting all of your comments data on your own server? Read part 2 of this tutorial where I show you how to do exactly that.

If you find Replyke useful for your projects (or not), please let me know! I would like to keep improving it and will be glad to get any feedback I can.

Also, as all the comments are stored on Replyke's server, if at any point you would like to migrate to a different product or your own solution, then I have added a simple download data button in the every app's dashboard. Clicking it will download all the data which is relevant for each of your app as a JSON file.

Thank you for reading!

Comments

[Abhishek Kumar]

Hi, i am trying to implement you comment section, but i am getting this error in console:
CommentSectionContainer.tsx:138 Failed to fetch article: Error: Error: Article document doesn't exist yet
at CommentSectionContainer.tsx:49:1

although i am able to see the comment box on my page but it's all distorted, i have attached a screenshot of it.

can you please help me in integrating this.