Tenant Setup Guide

This guide reflects the current tenant schema used by the widget, studio, and theme editor.

1. Generate the Tenant Files

nx g @as-community/tooling:tenant my-brand

Generated structure:

packages/tenants/registry/my-brand/
├── tenant.config.json
├── theme.overrides.json
└── README.md

2. Fill in tenant.config.json

Example:

{
  "id": "my-brand",
  "api": {
    "baseUrl": "https://api.my-brand.com",
    "tenantId": "my-brand"
  },
  "branding": {
    "displayName": "My Brand"
  },
  "theme": {},
  "features": {
    "votingEnabled": true,
    "repliesEnabled": true,
    "editEnabled": true,
    "deleteEnabled": true,
    "sortingEnabled": true,
    "moderationLabelsVisible": false
  },
  "behavior": {
    "defaultSortMode": "new",
    "maxReplyDepth": 3,
    "commentsPerPage": 20,
    "repliesPerPage": 10,
    "autoLoadReplies": false
  }
}

Important field names:

• features.editEnabled, not editingEnabled
• features.deleteEnabled, not deletionEnabled
• behavior.maxReplyDepth, not replyDepthLimit
• behavior.defaultSortMode, not defaultSort

3. Add Theme Overrides

theme.overrides.json must be a flat JSON object of CSS custom properties:

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

You can either keep the theme separate and load it via theme-url, or inline the same values into tenant.config.json under theme.

4. Load the Config in the Widget

Auto-fetch

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

The widget requests:

GET {config-base-url || api-base-url}/tenants/{tenant-id}

Direct assignment

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

Through the SDK

import { ASCommunityClient } from '@as-community/web';

const client = new ASCommunityClient({
  baseUrl: 'https://api.my-brand.com',
  tenantId: 'my-brand',
});

const config = await client.loadTenantConfig('https://app.my-brand.com/tenants/my-brand');
widget.tenantConfig = config;

5. Verify in Studio and Theme Editor

Use the local tools to confirm the frontend behavior matches the backend contract:

nx serve studio
nx serve theme-editor

Check:

• sort controls respect features.sortingEnabled
• moderation badges respect features.moderationLabelsVisible
• reply UI respects features.repliesEnabled and behavior.maxReplyDepth
• vote buttons respect features.votingEnabled

Troubleshooting

Tenant config does not load

• Confirm the widget has tenant-id
• Confirm GET /tenants/{tenantId} returns a valid TenantConfig
• If config is not served from the API origin, set config-base-url

Feature flags do not apply

• Validate the JSON against TenantConfigSchema
• Check the field names exactly match the schema

Theme does not apply

• If using theme-url, confirm it returns valid JSON
• If assigning tenantConfig, confirm the keys in theme start with --