Quick Start

Get the widget running with the current API and tenant-config flow.

Install

npm install @as-community/ui-web-components

For typed React or Vue usage:

npm install @as-community/ui-web-components @as-community/ui-web-components-types

Basic HTML Usage

<script type="module">
  import '@as-community/ui-web-components';
</script>

<asc-comment-widget
  article-id="my-article"
  tenant-id="my-tenant"
  api-base-url="https://api.example.com"
  config-base-url="https://app.example.com"
></asc-comment-widget>

The widget loads tenant config from GET {config-base-url || api-base-url}/tenants/{tenant-id} and then handles comment loading, replies, voting, editing, and deletion internally.

React

import '@as-community/ui-web-components';
import '@as-community/ui-web-components-types';

export function ArticlePage({ articleId }: { articleId: string }) {
  return (
    <asc-comment-widget
      article-id={articleId}
      tenant-id="my-tenant"
      api-base-url="https://api.example.com"
      config-base-url="https://app.example.com"
      sort="score"
    />
  );
}

Vue

<script setup lang="ts">
import '@as-community/ui-web-components';
import '@as-community/ui-web-components-types';

defineProps<{ articleId: string }>();
</script>

<template>
  <asc-comment-widget
    :article-id="articleId"
    tenant-id="my-tenant"
    api-base-url="https://api.example.com"
    config-base-url="https://app.example.com"
  />
</template>

The types package augments Vue from its root export. There is no separate /vue entrypoint.

Theme Overrides

Point the widget at a JSON file of CSS variable overrides:

<asc-comment-widget
  article-id="my-article"
  tenant-id="my-tenant"
  api-base-url="https://api.example.com"
  theme-url="/themes/my-tenant.json"
></asc-comment-widget>

Example theme JSON:

{
  "--asc-color-interactive": "#e63946",
  "--asc-color-interactive-hover": "#c1121f",
  "--asc-font-family-body": "Georgia, serif"
}

Direct Tenant Config

If you already have the tenant config object, assign it directly:

<script type="module">
  import '@as-community/ui-web-components';

  const widget = document.querySelector('asc-comment-widget');

  widget.tenantConfig = {
    id: 'my-tenant',
    api: {
      baseUrl: 'https://api.example.com',
      tenantId: 'my-tenant',
    },
    branding: {
      displayName: 'My Tenant',
    },
    theme: {
      '--asc-color-interactive': '#e63946',
    },
  };
</script>

Use tenant config for product behavior too:

• features.votingEnabled
• features.repliesEnabled
• features.editEnabled
• features.deleteEnabled
• features.moderationLabelsVisible
• behavior.maxReplyDepth
• behavior.defaultSortMode

Next Steps

• Component reference
• Tenant configuration
• Tenant setup guide
• SDK reference