Emote Component

Pre-Req: Free Emote Account

Create an Account on Emote.com

Go to emote.com and create an account for your domain. It's easy, takes less than 1 minute, and is required for domains using Emote. This is also where you can manage moderation rules, settings, and import/export your data.

1. Installation

npm install emote-comments

2. Creating Emote Comments Section Component

Create or add a new file in your choice of framework as a container element as HTML.

Use a container tag; as the script is deferred and imported. In my example, I use TailwindCSS classes for layout and styling as shown, but you can create custom classes or design the container to fit your project needs.

The id declaration id="emote_com" will identify the container which imports the comments section. The container should be empty anmd can be used below as shown as a standalone component or added to an existing one that can be later imported to a file or page.

<!-- Emote / styles composed as TailwindCSS -->
<container id="emote_com" class="mx-auto w-2/3 flex"></container>

3. Importing Your Emote Component

Since Emote uses a deferred script, we reccomend importing it or the component that contains Emote directly to a page/file and not another component.

VanillaJs

// YourPage.js
import Emote from 'emote-comments';

document.addEventListener('DOMContentLoaded', () => {
  new Emote('emote_com');
});

JXS, TSX, and .astro usage example

// YourPage.(jsx/tsx/astro)
import Emote from 'emote-comments';
...
// location of comments section component
<Emote />

Handling Multiple Instances, Script-Handeling, and Re-Initialization

If your script or component may be instantiated multiple times on the same page, ensure your script loading mechanism checks if the script is already present or loaded to avoid loading it multiple times.

If you add additional script handeling or asynchrinization to your component or page, it's likely to affect the scripts deferred loading. You'll want to opt that component or tag out of any additional rules or project-wide script loading mechanisms to avoid conflicts.