Getting Started with ConvoComet

This guide will show you how to integrate the ConvoComet widget into your website.

First, make sure you have created a ConvoComet site. If you are planning on self-hosting, check out this guide.

Once you have created the site, you should be redirected to a page showing the site id. You can also copy the id from the address bar, as the site page URL should look something like convocomet.dev/dashboard/sites/[site_id].

Follow the guide for your framework, or HTML if none match what you want.

If you are using plain HTML or a currently unsupported framework, follow this guide.

Paste this HTML snippet into either each page you want the comment widget to be loaded in, or a layout component shared across all of those pages.

You should paste this in the location of the page you want the comment to be on.

<div
id="convocomet-widget"
data-page="YOUR_PAGE_ID"
data-site="YOUR_SITE_ID"
data-theme="YOUR_THEME"
></div>
<script src="https://convocomet.dev/widget.js" async></script>

Fill in the site ID with the ID from the URL above, and fill in the page ID with whatever ID you want to use. ConvoComet uses the page ID to separate comments; just make sure that different comment threads have different page IDs. However, if you are unsure what to use, the page slug is generally a good option. You can also leave it blank to use the current URL path as the page ID.

You can also optionally set a theme using data-theme. The allowed values are "light", "dark", and "auto". The default is light, and if your website is light theme only, keep it at that. However, you can also set your theme to "dark" if your website uses a dark theme, or "auto" if your website theme changes based on the user’s preferred color scheme.

If you are using React, Preact, or another React-compatible toolbar, follow this guide.

First, you will want to install @convocomet/react.

npm install @convocomet/react

Now, import @convocomet/react in a layout or page file.

import ConvoComet from '@convocome/react';

Finally, add the component where you want the widget to be.

// article above
<ConvoComet page="YOUR_PAGE_ID" site="YOUR_SITE_ID" theme="YOUR_THEME" />

You can also optionally set a theme using theme. The allowed values are "light", "dark", and "auto". The default is light, and if your website is light theme only, keep it at that. However, you can also set your theme to "dark" if your website uses a dark theme, or "auto" if your website theme changes based on the user’s preferred color scheme.

If you are using Svelte, follow this guide.

First, you will want to install @convocomet/svelte.

npm install @convocomet/svelte

Now, import @convocomet/svelte in a layout or page file.

import ConvoComet from '@convocome/svelte';

Finally, add the component where you want the widget to be.

// article above
<ConvoComet page="YOUR_PAGE_ID" site="YOUR_SITE_ID" theme="YOUR_THEME" />

You can also optionally set a theme using theme. The allowed values are "light", "dark", and "auto". The default is light. If your website is light theme only, keep it at that. However, you can also set your theme to "dark" if your website uses a dark theme or "auto" if your website theme changes based on the user’s preferred color scheme.

If you are using Vue, follow this guide.

First, you will want to install @convocomet/vue.

npm install @convocomet/vue

Now, import @convocomet/vue in a layout or page file.

import ConvoComet from '@convocome/vue';

Finally, add the component where you want the widget to be.

// article above
<ConvoComet page="YOUR_PAGE_ID" site="YOUR_SITE_ID" theme="YOUR_THEME" />

Getting Started with ConvoComet

Adding the widget to your website