@contentcredits/sdk 2.0.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +180 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
# @contentcredits/sdk
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@contentcredits/sdk)
|
|
4
|
+
[](https://github.com/contentcredits/sdk/blob/main/LICENSE)
|
|
5
|
+
[](https://www.typescriptlang.org/)
|
|
6
|
+
|
|
7
|
+
Drop-in paywall and threaded comment system for any website. Add credit-based article monetisation in under 5 minutes — no backend changes required.
|
|
8
|
+
|
|
9
|
+
**[Full documentation →](https://docs.contentcredits.com)**
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## What it does
|
|
14
|
+
|
|
15
|
+
- **Paywall** — hides premium content behind a credit gate using a CSS selector. Reveals it instantly when the reader pays. No server-side content splitting needed.
|
|
16
|
+
- **Comments** — threaded comment panel with likes, edit, delete, and sorting. Rendered in a Shadow DOM so it never conflicts with your CSS.
|
|
17
|
+
- **Auth** — popup-based login on desktop, redirect flow on mobile. Tokens stored in memory (never cookies).
|
|
18
|
+
- **Extension support** — detects the Content Credits Chrome extension for a one-click experience.
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @contentcredits/sdk
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Or via CDN (no build step):
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<script src="https://cdn.jsdelivr.net/npm/@contentcredits/sdk@2.0.0/dist/content-credits.umd.min.js"></script>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## Quick start
|
|
37
|
+
|
|
38
|
+
### Script tag (CDN)
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<!-- Wrap your premium content -->
|
|
42
|
+
<div id="premium-content">
|
|
43
|
+
<p>This content is only visible after the reader pays.</p>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<!-- Load and initialise the SDK -->
|
|
47
|
+
<script src="https://cdn.jsdelivr.net/npm/@contentcredits/sdk@2.0.0/dist/content-credits.umd.min.js"></script>
|
|
48
|
+
<script>
|
|
49
|
+
ContentCreditsSDK.ContentCredits.init({
|
|
50
|
+
apiKey: 'pub_YOUR_API_KEY',
|
|
51
|
+
contentSelector: '#premium-content',
|
|
52
|
+
teaserParagraphs: 2,
|
|
53
|
+
enableComments: true,
|
|
54
|
+
});
|
|
55
|
+
</script>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Auto-init (zero JavaScript)
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<script
|
|
62
|
+
src="https://cdn.jsdelivr.net/npm/@contentcredits/sdk@2.0.0/dist/content-credits.umd.min.js"
|
|
63
|
+
data-api-key="pub_YOUR_API_KEY"
|
|
64
|
+
data-content-selector="#premium-content"
|
|
65
|
+
data-teaser-paragraphs="2"
|
|
66
|
+
></script>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### npm / ES module
|
|
70
|
+
|
|
71
|
+
```ts
|
|
72
|
+
import { ContentCredits } from '@contentcredits/sdk';
|
|
73
|
+
|
|
74
|
+
const cc = ContentCredits.init({
|
|
75
|
+
apiKey: 'pub_YOUR_API_KEY',
|
|
76
|
+
contentSelector: '#premium-content',
|
|
77
|
+
teaserParagraphs: 2,
|
|
78
|
+
enableComments: true,
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
cc.on('paywall:hidden', () => {
|
|
82
|
+
console.log('Article unlocked!');
|
|
83
|
+
});
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
## Configuration
|
|
89
|
+
|
|
90
|
+
| Option | Type | Default | Description |
|
|
91
|
+
|--------|------|---------|-------------|
|
|
92
|
+
| `apiKey` | `string` | **required** | Your publisher API key from the dashboard |
|
|
93
|
+
| `contentSelector` | `string` | `'.cc-premium-content'` | CSS selector for the gated element |
|
|
94
|
+
| `teaserParagraphs` | `number` | `2` | Paragraphs to show before the paywall |
|
|
95
|
+
| `enableComments` | `boolean` | `true` | Show the comment widget |
|
|
96
|
+
| `articleUrl` | `string` | `location.href` | Canonical URL of the article |
|
|
97
|
+
| `theme.primaryColor` | `string` | `'#44C678'` | Brand colour for buttons |
|
|
98
|
+
| `theme.fontFamily` | `string` | system UI | Font for all SDK UI |
|
|
99
|
+
| `onAccessGranted` | `() => void` | — | Fires when content is unlocked |
|
|
100
|
+
| `debug` | `boolean` | `false` | Verbose console logging |
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## Events
|
|
105
|
+
|
|
106
|
+
```ts
|
|
107
|
+
cc.on('ready', ({ state }) => { });
|
|
108
|
+
cc.on('auth:login', ({ user }) => { });
|
|
109
|
+
cc.on('auth:logout', () => { });
|
|
110
|
+
cc.on('paywall:shown', () => { });
|
|
111
|
+
cc.on('paywall:hidden', () => { });
|
|
112
|
+
cc.on('article:purchased', ({ creditsSpent, remainingBalance }) => { });
|
|
113
|
+
cc.on('credits:insufficient',({ required, available }) => { });
|
|
114
|
+
cc.on('comment:posted', ({ comment }) => { });
|
|
115
|
+
cc.on('comment:liked', ({ commentId, hasLiked }) => { });
|
|
116
|
+
cc.on('comment:deleted', ({ commentId }) => { });
|
|
117
|
+
cc.on('error', ({ message, error }) => { });
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
All events are also dispatched as native `CustomEvent`s on `document` with the prefix `contentcredits:` — useful for Google Tag Manager and analytics integrations.
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
## API
|
|
125
|
+
|
|
126
|
+
```ts
|
|
127
|
+
const cc = ContentCredits.init(config);
|
|
128
|
+
|
|
129
|
+
cc.on(event, handler) // subscribe — returns unsubscribe fn
|
|
130
|
+
cc.off(event, handler) // unsubscribe
|
|
131
|
+
cc.getState() // → SDKState snapshot
|
|
132
|
+
cc.checkAccess() // trigger access check manually
|
|
133
|
+
cc.openComments() // open comment panel
|
|
134
|
+
cc.closeComments() // close comment panel
|
|
135
|
+
cc.isLoggedIn() // → boolean
|
|
136
|
+
cc.destroy() // tear down SDK, restore hidden content
|
|
137
|
+
|
|
138
|
+
ContentCredits.version // → "2.0.0"
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
---
|
|
142
|
+
|
|
143
|
+
## React / Next.js
|
|
144
|
+
|
|
145
|
+
```tsx
|
|
146
|
+
'use client'; // Next.js App Router
|
|
147
|
+
|
|
148
|
+
import { useEffect } from 'react';
|
|
149
|
+
import { ContentCredits } from '@contentcredits/sdk';
|
|
150
|
+
|
|
151
|
+
export function PremiumGate({ apiKey, children }) {
|
|
152
|
+
useEffect(() => {
|
|
153
|
+
const cc = ContentCredits.init({
|
|
154
|
+
apiKey,
|
|
155
|
+
contentSelector: '#premium-content',
|
|
156
|
+
});
|
|
157
|
+
return () => cc.destroy();
|
|
158
|
+
}, [apiKey]);
|
|
159
|
+
|
|
160
|
+
return <div id="premium-content">{children}</div>;
|
|
161
|
+
}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
166
|
+
## Requirements
|
|
167
|
+
|
|
168
|
+
- Modern browsers (Chrome, Firefox, Safari, Edge)
|
|
169
|
+
- Your domain must be registered as a publisher at [app.contentcredits.com](https://app.contentcredits.com)
|
|
170
|
+
- HTTPS required in production
|
|
171
|
+
|
|
172
|
+
---
|
|
173
|
+
|
|
174
|
+
## Links
|
|
175
|
+
|
|
176
|
+
- [Full documentation](https://docs.contentcredits.com)
|
|
177
|
+
- [Quick start guide](https://docs.contentcredits.com/getting-started/quick-start)
|
|
178
|
+
- [API reference](https://docs.contentcredits.com/api-reference/contentcredits-class)
|
|
179
|
+
- [Publisher dashboard](https://app.contentcredits.com)
|
|
180
|
+
- [Content Credits website](https://contentcredits.com)
|