Skip to main content

Overview

Configure your server's address​

The apiBaseUrl should be the root URL of your own application's API. This is where your application handles all backend processes. It should look like https://yourapi.com. This URL will be the base for the requests that Replyke sends to handle comment-related operations. Make sure it's correctly formatted, without a trailing slash at the end.

By specifying your API's base URL, Replyke integrates directly into your existing backend infrastructure. It uses this endpoint to send and retrieve comment data, ensuring a seamless blend with your current systems.

Understanding the articleId Property​

The articleId is a crucial property in Replyke, acting as a unique identifier for each piece of content where a comment section is integrated. It links the comments specifically to the corresponding content, ensuring they are displayed in the right context.

Usage Examples​

  • Static Content: For a static page like 'About Us', you can hardcode the articleId:

    <SocialContextProvider articleId="about-page" >... </SocialContextProvider>

  • Dynamic Content: If you implement Replyke in a page with dynamic content, for example, on a blog post page in a blog site, articleId should dynamically match the blog post ID:

    <SocialContextProvider articleId={blogPost.id} >... </SocialContextProvider>

Best Practices​

  • Ensure uniqueness: Each articleId must be unique across your application.
  • Consistency: Maintain the same articleId for a piece of content to keep the comments consistent and relevant.

By properly managing the articleId, you can effectively organize and display comments relevant to specific content, enhancing user engagement and interaction on your platform.

Managing Users​

The user prop in Replyke is crucial for integrating the comment system with your website's user management. It ensures that the interaction within the comment section aligns with the user's identity on your platform.

Implementation Details​

  • Passing User Data: Provide a user object with details to identify logged-in users. For the user object, the property "_id" is mandatory, "name" and "img" are optional.

    <SocialContextProvider
      currentUser={
        user
          ? { _id: "user-id", name: "User Name", img: "user-image-url" }
          : undefined
      }
    />

  • Anonymous Comments: If no name is provided, Replyke defaults to "Anonymous". Customize this by passing a different string as name to align with your site's approach to anonymous users.

  • Authenticity: This integration maintains the authenticity of user interactions, as Replyke uses the existing user profiles on your platform.

Callbacks in Replyke - Why Callbacks are Essential​

In Replyke, callbacks are essential for creating a cohesive user experience that seamlessly integrates with your website's existing user system. These callbacks ensure that interactions within the Replyke comment component feel like an integral part of your website, rather than an external addition.

Customization and Integration​

  • User-Centric Design: Callbacks allow the comment system to work with your own user management, avoiding the need for users to create separate accounts for commenting.
  • Seamless Experience: By using these callbacks, the actions within the Replyke component are aligned with your site's user flow and authentication processes.

With these callbacks, Replyke adapts to your website's user interface and functionality, enhancing user engagement while maintaining the integrity and continuity of the user experience. Each comment section variation requires specific callbacks. Please refer to the documentation for your chosen comment section variation to view the required and optional callbacks.

Sorting comments and replies​

If you're using the Blog-style comment section, a "Sort by" button is displayed, allowing users to set the order of the comments (newest, oldest, or popular first). If you're using the Social-style comment section, this button is not available.

By default, comments are sorted with the newest at the top. If you wish to change the default sorting order, you can pass a sortBy prop to the ReplykeSocialProvider with your preferred order (newest, oldest, or popular).

Using your Premium Access key​

If you've purchased a premium access key, simply pass it to the "accessKey" prop:

<SocialContextProvider
  apiBaseUrl="your-server-url"
  articleId="unique-article-id"
  accessKey="your-premium-access-key"
>
  ...
</SocialContextProvider>