Installation
Prerequisites
- Node.js 18 or higher
- A modern browser with Shadow DOM and Custom Elements support (all evergreen browsers)
Package Managers
bash
npm install @as-community/ui-web-componentsbash
pnpm add @as-community/ui-web-componentsbash
yarn add @as-community/ui-web-componentsTypeScript Types
TypeScript users should also install the types package. It provides:
- HTML attribute types for all
asc-*elements - JSX intrinsic element declarations for React
- Vue component type augmentations
- Custom event types
bash
npm install @as-community/ui-web-components-typesThen add to your tsconfig.json or import directly in your app entry:
json
{
"compilerOptions": {
"types": ["@as-community/ui-web-components-types"]
}
}Or import manually:
ts
import '@as-community/ui-web-components-types';CDN Usage
For quick prototyping without a build step, load directly from a CDN:
html
<!-- unpkg -->
<script
type="module"
src="https://unpkg.com/@as-community/ui-web-components/dist/index.js"
></script>
<!-- esm.sh -->
<script type="module" src="https://esm.sh/@as-community/ui-web-components"></script>Full example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Comments</title>
<script type="module" src="https://esm.sh/@as-community/ui-web-components"></script>
</head>
<body>
<asc-comment-widget
article-id="article-123"
tenant-id="welt"
api-base-url="https://api.welt.de"
>
</asc-comment-widget>
</body>
</html>Headless SDK
If you need programmatic access to comments without the UI layer, install the SDK:
bash
npm install @as-community/webSee the SDK documentation for usage.