tia-gpc-widget 1.0.7 → 1.0.8
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 +1092 -1092
- package/dist/tia-gpc-widget.standalone.css +1 -1
- package/dist/tia-gpc-widget.standalone.js +5 -5
- package/dist/tia-gpc-widget.standalone.js.map +1 -1
- package/dist/tia-gpc.cjs.js +7 -7
- package/dist/tia-gpc.cjs.js.map +1 -1
- package/dist/tia-gpc.css +1 -1
- package/dist/tia-gpc.es.js +283 -273
- package/dist/tia-gpc.es.js.map +1 -1
- package/package.json +84 -84
package/README.md
CHANGED
|
@@ -1,1092 +1,1092 @@
|
|
|
1
|
-
# TIA GPC Widget
|
|
2
|
-
|
|
3
|
-
Intelligent chat widget for TIA GPC integration. Compatible with **React, HTML, Angular, ASP.NET, Vue, and any other framework**.
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/tia-gpc-widget)
|
|
6
|
-
[](https://www.jsdelivr.com/package/npm/tia-gpc-widget)
|
|
7
|
-
[](LICENSE)
|
|
8
|
-
|
|
9
|
-
---
|
|
10
|
-
|
|
11
|
-
## 📋 Table of Contents
|
|
12
|
-
|
|
13
|
-
- [Features](#-features)
|
|
14
|
-
- [Installation](#-installation)
|
|
15
|
-
- [Option 1: NPM (For React/Node Projects)](#option-1-npm-for-reactnode-projects)
|
|
16
|
-
- [Option 2: CDN (For HTML, Angular, ASP.NET, etc.)](#option-2-cdn-for-html-angular-aspnet-etc)
|
|
17
|
-
- [Quick Start](#-quick-start)
|
|
18
|
-
- [Framework Examples](#-framework-examples)
|
|
19
|
-
- [React](#1-react)
|
|
20
|
-
- [HTML / Vanilla JavaScript](#2-html--vanilla-javascript)
|
|
21
|
-
- [Angular](#3-angular)
|
|
22
|
-
- [ASP.NET / ASPX](#4-aspnet--aspx)
|
|
23
|
-
- [Vue.js](#5-vuejs)
|
|
24
|
-
- [Next.js](#6-nextjs)
|
|
25
|
-
- [PHP](#7-php)
|
|
26
|
-
- [API & Configuration](#-api--configuration)
|
|
27
|
-
- [Props/Attributes](#propsattributes)
|
|
28
|
-
- [Events](#events)
|
|
29
|
-
- [Programmatic API (JavaScript)](#programmatic-api-javascript)
|
|
30
|
-
- [Customization](#-customization)
|
|
31
|
-
- [Themes](#themes)
|
|
32
|
-
- [Positions](#positions)
|
|
33
|
-
- [Languages](#languages)
|
|
34
|
-
- [Colors](#colors)
|
|
35
|
-
- [Build & Development](#-build--development)
|
|
36
|
-
- [Publishing](#-publishing)
|
|
37
|
-
- [Support](#-support)
|
|
38
|
-
|
|
39
|
-
---
|
|
40
|
-
|
|
41
|
-
## 🚀 Features
|
|
42
|
-
|
|
43
|
-
- ✅ **Framework Agnostic**: Works in React, Angular, Vue, ASP.NET, plain HTML, etc.
|
|
44
|
-
- ✅ **Web Component**: Based on native web standards
|
|
45
|
-
- ✅ **Themes**: Light, dark, or automatic mode
|
|
46
|
-
- ✅ **Internationalization**: Spanish, English, French
|
|
47
|
-
- ✅ **Responsive**: Adaptive design for mobile and desktop
|
|
48
|
-
- ✅ **Customizable**: Colors, positions, dimensions
|
|
49
|
-
- ✅ **TypeScript Ready**: Types included
|
|
50
|
-
- ✅ **Zero Dependencies**: Standalone bundle includes everything needed
|
|
51
|
-
|
|
52
|
-
---
|
|
53
|
-
|
|
54
|
-
## 📦 Installation
|
|
55
|
-
|
|
56
|
-
### Option 1: NPM (For React/Node Projects)
|
|
57
|
-
|
|
58
|
-
```bash
|
|
59
|
-
npm install tia-gpc-widget
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
or with yarn:
|
|
63
|
-
|
|
64
|
-
```bash
|
|
65
|
-
yarn add tia-gpc-widget
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
or with pnpm:
|
|
69
|
-
|
|
70
|
-
```bash
|
|
71
|
-
pnpm add tia-gpc-widget
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
### Option 2: CDN (For HTML, Angular, ASP.NET, etc.)
|
|
75
|
-
|
|
76
|
-
You can include the widget directly from a CDN:
|
|
77
|
-
|
|
78
|
-
#### jsDelivr (Recommended)
|
|
79
|
-
|
|
80
|
-
```html
|
|
81
|
-
<!-- JavaScript -->
|
|
82
|
-
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
83
|
-
|
|
84
|
-
<!-- CSS -->
|
|
85
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
#### unpkg
|
|
89
|
-
|
|
90
|
-
```html
|
|
91
|
-
<!-- JavaScript -->
|
|
92
|
-
<script src="https://unpkg.com/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
93
|
-
|
|
94
|
-
<!-- CSS -->
|
|
95
|
-
<link rel="stylesheet" href="https://unpkg.com/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
#### Latest Version (Development Only)
|
|
99
|
-
|
|
100
|
-
```html
|
|
101
|
-
<!-- Always use specific versions in production! -->
|
|
102
|
-
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget/dist/tia-gpc-widget.standalone.js"></script>
|
|
103
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget/dist/tia-gpc-widget.standalone.css">
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
---
|
|
107
|
-
|
|
108
|
-
## ⚡ Quick Start
|
|
109
|
-
|
|
110
|
-
### In Plain HTML
|
|
111
|
-
|
|
112
|
-
```html
|
|
113
|
-
<!DOCTYPE html>
|
|
114
|
-
<html lang="en">
|
|
115
|
-
<head>
|
|
116
|
-
<meta charset="UTF-8">
|
|
117
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
118
|
-
<title>My App with TIA GPC</title>
|
|
119
|
-
|
|
120
|
-
<!-- Widget CSS -->
|
|
121
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
122
|
-
</head>
|
|
123
|
-
<body>
|
|
124
|
-
<h1>My Application</h1>
|
|
125
|
-
|
|
126
|
-
<!-- TIA GPC Widget -->
|
|
127
|
-
<tia-gpc-widget
|
|
128
|
-
token="your-license-token-here"
|
|
129
|
-
theme="auto"
|
|
130
|
-
position="bottom-right"
|
|
131
|
-
language="en"
|
|
132
|
-
></tia-gpc-widget>
|
|
133
|
-
|
|
134
|
-
<!-- Widget JavaScript -->
|
|
135
|
-
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
136
|
-
</body>
|
|
137
|
-
</html>
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
### In React
|
|
141
|
-
|
|
142
|
-
```jsx
|
|
143
|
-
import { TiaGPCWidget } from 'tia-gpc-widget';
|
|
144
|
-
import 'tia-gpc-widget/styles';
|
|
145
|
-
|
|
146
|
-
function App() {
|
|
147
|
-
return (
|
|
148
|
-
<div>
|
|
149
|
-
<h1>My Application</h1>
|
|
150
|
-
<TiaGPCWidget
|
|
151
|
-
token="your-license-token-here"
|
|
152
|
-
theme="auto"
|
|
153
|
-
position="bottom-right"
|
|
154
|
-
language="en"
|
|
155
|
-
/>
|
|
156
|
-
</div>
|
|
157
|
-
);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
export default App;
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
---
|
|
164
|
-
|
|
165
|
-
## 📚 Framework Examples
|
|
166
|
-
|
|
167
|
-
### 1. React
|
|
168
|
-
|
|
169
|
-
#### Installation
|
|
170
|
-
|
|
171
|
-
```bash
|
|
172
|
-
npm install tia-gpc-widget
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
#### Basic Usage
|
|
176
|
-
|
|
177
|
-
```jsx
|
|
178
|
-
import { TiaGPCWidget } from 'tia-gpc-widget';
|
|
179
|
-
import 'tia-gpc-widget/styles';
|
|
180
|
-
|
|
181
|
-
function App() {
|
|
182
|
-
return (
|
|
183
|
-
<TiaGPCWidget
|
|
184
|
-
token="your-license-token"
|
|
185
|
-
theme="auto"
|
|
186
|
-
position="bottom-right"
|
|
187
|
-
language="en"
|
|
188
|
-
primaryColor="#2563eb"
|
|
189
|
-
onReady={() => console.log('Widget ready')}
|
|
190
|
-
onError={(error) => console.error('Error:', error)}
|
|
191
|
-
/>
|
|
192
|
-
);
|
|
193
|
-
}
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
#### Advanced Configuration
|
|
197
|
-
|
|
198
|
-
```jsx
|
|
199
|
-
import { TiaGPCWidget, WIDGET_POSITIONS, THEMES, LANGUAGES } from 'tia-gpc-widget';
|
|
200
|
-
import 'tia-gpc-widget/styles';
|
|
201
|
-
|
|
202
|
-
function App() {
|
|
203
|
-
const handleReady = () => {
|
|
204
|
-
console.log('✅ Widget initialized successfully');
|
|
205
|
-
};
|
|
206
|
-
|
|
207
|
-
const handleError = (error) => {
|
|
208
|
-
console.error('❌ Widget error:', error);
|
|
209
|
-
};
|
|
210
|
-
|
|
211
|
-
return (
|
|
212
|
-
<TiaGPCWidget
|
|
213
|
-
token="your-license-token"
|
|
214
|
-
theme={THEMES.AUTO}
|
|
215
|
-
position={WIDGET_POSITIONS.BOTTOM_RIGHT}
|
|
216
|
-
language={LANGUAGES.EN}
|
|
217
|
-
primaryColor="#10b981"
|
|
218
|
-
width="450px"
|
|
219
|
-
height="650px"
|
|
220
|
-
autoOpen={false}
|
|
221
|
-
showBranding={true}
|
|
222
|
-
mobileFullscreen={true}
|
|
223
|
-
onReady={handleReady}
|
|
224
|
-
onError={handleError}
|
|
225
|
-
onClose={() => console.log('Widget closed')}
|
|
226
|
-
/>
|
|
227
|
-
);
|
|
228
|
-
}
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
---
|
|
232
|
-
|
|
233
|
-
### 2. HTML / Vanilla JavaScript
|
|
234
|
-
|
|
235
|
-
#### Method 1: Using HTML element directly
|
|
236
|
-
|
|
237
|
-
```html
|
|
238
|
-
<!DOCTYPE html>
|
|
239
|
-
<html lang="en">
|
|
240
|
-
<head>
|
|
241
|
-
<meta charset="UTF-8">
|
|
242
|
-
<title>TIA GPC Widget - Plain HTML</title>
|
|
243
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
244
|
-
</head>
|
|
245
|
-
<body>
|
|
246
|
-
<h1>My Website</h1>
|
|
247
|
-
|
|
248
|
-
<!-- Widget as HTML element -->
|
|
249
|
-
<tia-gpc-widget
|
|
250
|
-
token="your-license-token"
|
|
251
|
-
theme="light"
|
|
252
|
-
position="bottom-right"
|
|
253
|
-
language="en"
|
|
254
|
-
primary-color="#3b82f6"
|
|
255
|
-
width="400px"
|
|
256
|
-
height="600px"
|
|
257
|
-
auto-open="false"
|
|
258
|
-
show-branding="true"
|
|
259
|
-
></tia-gpc-widget>
|
|
260
|
-
|
|
261
|
-
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
262
|
-
|
|
263
|
-
<!-- Optional events -->
|
|
264
|
-
<script>
|
|
265
|
-
const widget = document.querySelector('tia-gpc-widget');
|
|
266
|
-
|
|
267
|
-
widget.addEventListener('ready', () => {
|
|
268
|
-
console.log('Widget ready');
|
|
269
|
-
});
|
|
270
|
-
|
|
271
|
-
widget.addEventListener('error', (e) => {
|
|
272
|
-
console.error('Error:', e.detail);
|
|
273
|
-
});
|
|
274
|
-
|
|
275
|
-
widget.addEventListener('close', () => {
|
|
276
|
-
console.log('Widget closed');
|
|
277
|
-
});
|
|
278
|
-
</script>
|
|
279
|
-
</body>
|
|
280
|
-
</html>
|
|
281
|
-
```
|
|
282
|
-
|
|
283
|
-
#### Method 2: Programmatic creation with JavaScript
|
|
284
|
-
|
|
285
|
-
```html
|
|
286
|
-
<!DOCTYPE html>
|
|
287
|
-
<html lang="en">
|
|
288
|
-
<head>
|
|
289
|
-
<meta charset="UTF-8">
|
|
290
|
-
<title>TIA GPC Widget - Programmatic</title>
|
|
291
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
292
|
-
</head>
|
|
293
|
-
<body>
|
|
294
|
-
<h1>My Website</h1>
|
|
295
|
-
<button id="create-widget">Create Widget</button>
|
|
296
|
-
|
|
297
|
-
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
298
|
-
<script>
|
|
299
|
-
document.getElementById('create-widget').addEventListener('click', () => {
|
|
300
|
-
// Use the global TiaGPC API
|
|
301
|
-
const widget = TiaGPC.create({
|
|
302
|
-
token: 'your-license-token',
|
|
303
|
-
theme: 'auto',
|
|
304
|
-
position: TiaGPC.POSITIONS.BOTTOM_RIGHT,
|
|
305
|
-
language: TiaGPC.LANGUAGES.EN,
|
|
306
|
-
primaryColor: '#3b82f6',
|
|
307
|
-
autoOpen: false,
|
|
308
|
-
onReady: () => console.log('✅ Widget ready'),
|
|
309
|
-
onError: (error) => console.error('❌ Error:', error),
|
|
310
|
-
onClose: () => console.log('Widget closed')
|
|
311
|
-
});
|
|
312
|
-
|
|
313
|
-
console.log('Widget created:', widget);
|
|
314
|
-
});
|
|
315
|
-
|
|
316
|
-
// View widget information
|
|
317
|
-
TiaGPC.info();
|
|
318
|
-
</script>
|
|
319
|
-
</body>
|
|
320
|
-
</html>
|
|
321
|
-
```
|
|
322
|
-
|
|
323
|
-
---
|
|
324
|
-
|
|
325
|
-
### 3. Angular
|
|
326
|
-
|
|
327
|
-
#### Step 1: Install the widget
|
|
328
|
-
|
|
329
|
-
```bash
|
|
330
|
-
npm install tia-gpc-widget
|
|
331
|
-
```
|
|
332
|
-
|
|
333
|
-
#### Step 2: Configure Angular for Web Components
|
|
334
|
-
|
|
335
|
-
In `src/main.ts` or `src/polyfills.ts`, add:
|
|
336
|
-
|
|
337
|
-
```typescript
|
|
338
|
-
// Enable Custom Elements (Web Components)
|
|
339
|
-
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
340
|
-
```
|
|
341
|
-
|
|
342
|
-
In your main module (`app.module.ts`):
|
|
343
|
-
|
|
344
|
-
```typescript
|
|
345
|
-
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
346
|
-
import { BrowserModule } from '@angular/platform-browser';
|
|
347
|
-
import { AppComponent } from './app.component';
|
|
348
|
-
|
|
349
|
-
@NgModule({
|
|
350
|
-
declarations: [AppComponent],
|
|
351
|
-
imports: [BrowserModule],
|
|
352
|
-
schemas: [CUSTOM_ELEMENTS_SCHEMA], // ← Important
|
|
353
|
-
bootstrap: [AppComponent]
|
|
354
|
-
})
|
|
355
|
-
export class AppModule { }
|
|
356
|
-
```
|
|
357
|
-
|
|
358
|
-
#### Step 3: Import widget files
|
|
359
|
-
|
|
360
|
-
In `angular.json`, add the CSS and JS files:
|
|
361
|
-
|
|
362
|
-
```json
|
|
363
|
-
{
|
|
364
|
-
"projects": {
|
|
365
|
-
"your-project": {
|
|
366
|
-
"architect": {
|
|
367
|
-
"build": {
|
|
368
|
-
"options": {
|
|
369
|
-
"styles": [
|
|
370
|
-
"src/styles.css",
|
|
371
|
-
"node_modules/tia-gpc-widget/dist/tia-gpc-widget.standalone.css"
|
|
372
|
-
],
|
|
373
|
-
"scripts": [
|
|
374
|
-
"node_modules/tia-gpc-widget/dist/tia-gpc-widget.standalone.js"
|
|
375
|
-
]
|
|
376
|
-
}
|
|
377
|
-
}
|
|
378
|
-
}
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
}
|
|
382
|
-
```
|
|
383
|
-
|
|
384
|
-
#### Step 4: Use the widget in your component
|
|
385
|
-
|
|
386
|
-
```typescript
|
|
387
|
-
// app.component.ts
|
|
388
|
-
import { Component, OnInit } from '@angular/core';
|
|
389
|
-
|
|
390
|
-
declare global {
|
|
391
|
-
interface Window {
|
|
392
|
-
TiaGPC: any;
|
|
393
|
-
}
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
@Component({
|
|
397
|
-
selector: 'app-root',
|
|
398
|
-
template: `
|
|
399
|
-
<h1>My Angular Application</h1>
|
|
400
|
-
|
|
401
|
-
<!-- Option 1: Direct HTML element -->
|
|
402
|
-
<tia-gpc-widget
|
|
403
|
-
[attr.token]="widgetToken"
|
|
404
|
-
[attr.theme]="theme"
|
|
405
|
-
[attr.position]="position"
|
|
406
|
-
[attr.language]="language"
|
|
407
|
-
(ready)="onWidgetReady()"
|
|
408
|
-
(error)="onWidgetError($event)"
|
|
409
|
-
></tia-gpc-widget>
|
|
410
|
-
`
|
|
411
|
-
})
|
|
412
|
-
export class AppComponent implements OnInit {
|
|
413
|
-
widgetToken = 'your-license-token';
|
|
414
|
-
theme = 'auto';
|
|
415
|
-
position = 'bottom-right';
|
|
416
|
-
language = 'en';
|
|
417
|
-
|
|
418
|
-
ngOnInit() {
|
|
419
|
-
console.log('TiaGPC available:', window.TiaGPC);
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
onWidgetReady() {
|
|
423
|
-
console.log('✅ TIA GPC widget ready');
|
|
424
|
-
}
|
|
425
|
-
|
|
426
|
-
onWidgetError(event: any) {
|
|
427
|
-
console.error('❌ Widget error:', event.detail);
|
|
428
|
-
}
|
|
429
|
-
}
|
|
430
|
-
```
|
|
431
|
-
|
|
432
|
-
#### Alternative option: Programmatic creation
|
|
433
|
-
|
|
434
|
-
```typescript
|
|
435
|
-
// app.component.ts
|
|
436
|
-
import { Component, OnInit } from '@angular/core';
|
|
437
|
-
|
|
438
|
-
@Component({
|
|
439
|
-
selector: 'app-root',
|
|
440
|
-
template: `
|
|
441
|
-
<h1>My Angular Application</h1>
|
|
442
|
-
<button (click)="createWidget()">Create Widget</button>
|
|
443
|
-
<div #widgetContainer></div>
|
|
444
|
-
`
|
|
445
|
-
})
|
|
446
|
-
export class AppComponent implements OnInit {
|
|
447
|
-
ngOnInit() {
|
|
448
|
-
this.createWidget();
|
|
449
|
-
}
|
|
450
|
-
|
|
451
|
-
createWidget() {
|
|
452
|
-
if (window.TiaGPC) {
|
|
453
|
-
window.TiaGPC.create({
|
|
454
|
-
token: 'your-license-token',
|
|
455
|
-
theme: 'auto',
|
|
456
|
-
language: 'en',
|
|
457
|
-
onReady: () => console.log('Widget ready'),
|
|
458
|
-
onError: (err: any) => console.error(err)
|
|
459
|
-
});
|
|
460
|
-
}
|
|
461
|
-
}
|
|
462
|
-
}
|
|
463
|
-
```
|
|
464
|
-
|
|
465
|
-
---
|
|
466
|
-
|
|
467
|
-
### 4. ASP.NET / ASPX
|
|
468
|
-
|
|
469
|
-
#### Option 1: In an ASPX page
|
|
470
|
-
|
|
471
|
-
```aspx
|
|
472
|
-
<%@ Page Language="C#" AutoEventWireup="true" %>
|
|
473
|
-
|
|
474
|
-
<!DOCTYPE html>
|
|
475
|
-
<html>
|
|
476
|
-
<head>
|
|
477
|
-
<title>TIA GPC Widget - ASP.NET</title>
|
|
478
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css" />
|
|
479
|
-
</head>
|
|
480
|
-
<body>
|
|
481
|
-
<form id="form1" runat="server">
|
|
482
|
-
<h1>My ASP.NET Application</h1>
|
|
483
|
-
|
|
484
|
-
<!-- TIA GPC Widget -->
|
|
485
|
-
<tia-gpc-widget
|
|
486
|
-
token="<%= ConfigurationManager.AppSettings["TiaGpcToken"] %>"
|
|
487
|
-
theme="auto"
|
|
488
|
-
position="bottom-right"
|
|
489
|
-
language="en"
|
|
490
|
-
primary-color="#2563eb"
|
|
491
|
-
></tia-gpc-widget>
|
|
492
|
-
</form>
|
|
493
|
-
|
|
494
|
-
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
495
|
-
<script>
|
|
496
|
-
// Optional events
|
|
497
|
-
document.querySelector('tia-gpc-widget').addEventListener('ready', function() {
|
|
498
|
-
console.log('TIA GPC Widget initialized');
|
|
499
|
-
});
|
|
500
|
-
</script>
|
|
501
|
-
</body>
|
|
502
|
-
</html>
|
|
503
|
-
```
|
|
504
|
-
|
|
505
|
-
#### Option 2: With Master Page
|
|
506
|
-
|
|
507
|
-
In your `Site.Master`:
|
|
508
|
-
|
|
509
|
-
```aspx
|
|
510
|
-
<head runat="server">
|
|
511
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css" />
|
|
512
|
-
</head>
|
|
513
|
-
<body>
|
|
514
|
-
<asp:ContentPlaceHolder ID="MainContent" runat="server">
|
|
515
|
-
</asp:ContentPlaceHolder>
|
|
516
|
-
|
|
517
|
-
<!-- Global widget -->
|
|
518
|
-
<tia-gpc-widget
|
|
519
|
-
token="<%= GetTiaGpcToken() %>"
|
|
520
|
-
theme="auto"
|
|
521
|
-
language="en"
|
|
522
|
-
></tia-gpc-widget>
|
|
523
|
-
|
|
524
|
-
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
525
|
-
</body>
|
|
526
|
-
```
|
|
527
|
-
|
|
528
|
-
In your `Site.Master.cs`:
|
|
529
|
-
|
|
530
|
-
```csharp
|
|
531
|
-
public partial class SiteMaster : MasterPage
|
|
532
|
-
{
|
|
533
|
-
protected string GetTiaGpcToken()
|
|
534
|
-
{
|
|
535
|
-
return ConfigurationManager.AppSettings["TiaGpcToken"];
|
|
536
|
-
}
|
|
537
|
-
}
|
|
538
|
-
```
|
|
539
|
-
|
|
540
|
-
#### Option 3: MVC / Razor
|
|
541
|
-
|
|
542
|
-
In your layout `_Layout.cshtml`:
|
|
543
|
-
|
|
544
|
-
```html
|
|
545
|
-
<!DOCTYPE html>
|
|
546
|
-
<html>
|
|
547
|
-
<head>
|
|
548
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css" />
|
|
549
|
-
</head>
|
|
550
|
-
<body>
|
|
551
|
-
@RenderBody()
|
|
552
|
-
|
|
553
|
-
<!-- TIA GPC Widget -->
|
|
554
|
-
<tia-gpc-widget
|
|
555
|
-
token="@ViewBag.TiaGpcToken"
|
|
556
|
-
theme="auto"
|
|
557
|
-
language="en"
|
|
558
|
-
></tia-gpc-widget>
|
|
559
|
-
|
|
560
|
-
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
561
|
-
</body>
|
|
562
|
-
</html>
|
|
563
|
-
```
|
|
564
|
-
|
|
565
|
-
In your `Controller`:
|
|
566
|
-
|
|
567
|
-
```csharp
|
|
568
|
-
public class HomeController : Controller
|
|
569
|
-
{
|
|
570
|
-
public ActionResult Index()
|
|
571
|
-
{
|
|
572
|
-
ViewBag.TiaGpcToken = ConfigurationManager.AppSettings["TiaGpcToken"];
|
|
573
|
-
return View();
|
|
574
|
-
}
|
|
575
|
-
}
|
|
576
|
-
```
|
|
577
|
-
|
|
578
|
-
---
|
|
579
|
-
|
|
580
|
-
### 5. Vue.js
|
|
581
|
-
|
|
582
|
-
#### Installation
|
|
583
|
-
|
|
584
|
-
```bash
|
|
585
|
-
npm install tia-gpc-widget
|
|
586
|
-
```
|
|
587
|
-
|
|
588
|
-
#### Configuration
|
|
589
|
-
|
|
590
|
-
In `main.js` or `main.ts`:
|
|
591
|
-
|
|
592
|
-
```javascript
|
|
593
|
-
import { createApp } from 'vue';
|
|
594
|
-
import App from './App.vue';
|
|
595
|
-
|
|
596
|
-
// Import the standalone widget
|
|
597
|
-
import 'tia-gpc-widget/dist/tia-gpc-widget.standalone.js';
|
|
598
|
-
import 'tia-gpc-widget/dist/tia-gpc-widget.standalone.css';
|
|
599
|
-
|
|
600
|
-
const app = createApp(App);
|
|
601
|
-
|
|
602
|
-
// Configure Vue to ignore custom elements
|
|
603
|
-
app.config.compilerOptions.isCustomElement = (tag) => tag === 'tia-gpc-widget';
|
|
604
|
-
|
|
605
|
-
app.mount('#app');
|
|
606
|
-
```
|
|
607
|
-
|
|
608
|
-
#### Usage in components
|
|
609
|
-
|
|
610
|
-
```vue
|
|
611
|
-
<template>
|
|
612
|
-
<div>
|
|
613
|
-
<h1>My Vue Application</h1>
|
|
614
|
-
|
|
615
|
-
<!-- TIA GPC Widget -->
|
|
616
|
-
<tia-gpc-widget
|
|
617
|
-
:token="widgetToken"
|
|
618
|
-
:theme="theme"
|
|
619
|
-
:language="language"
|
|
620
|
-
position="bottom-right"
|
|
621
|
-
@ready="onReady"
|
|
622
|
-
@error="onError"
|
|
623
|
-
></tia-gpc-widget>
|
|
624
|
-
</div>
|
|
625
|
-
</template>
|
|
626
|
-
|
|
627
|
-
<script setup>
|
|
628
|
-
import { ref, onMounted } from 'vue';
|
|
629
|
-
|
|
630
|
-
const widgetToken = ref('your-license-token');
|
|
631
|
-
const theme = ref('auto');
|
|
632
|
-
const language = ref('en');
|
|
633
|
-
|
|
634
|
-
const onReady = () => {
|
|
635
|
-
console.log('✅ TIA GPC Widget ready');
|
|
636
|
-
};
|
|
637
|
-
|
|
638
|
-
const onError = (event) => {
|
|
639
|
-
console.error('❌ Error:', event.detail);
|
|
640
|
-
};
|
|
641
|
-
|
|
642
|
-
onMounted(() => {
|
|
643
|
-
console.log('TiaGPC available:', window.TiaGPC);
|
|
644
|
-
});
|
|
645
|
-
</script>
|
|
646
|
-
```
|
|
647
|
-
|
|
648
|
-
---
|
|
649
|
-
|
|
650
|
-
### 6. Next.js
|
|
651
|
-
|
|
652
|
-
#### Installation
|
|
653
|
-
|
|
654
|
-
```bash
|
|
655
|
-
npm install tia-gpc-widget
|
|
656
|
-
```
|
|
657
|
-
|
|
658
|
-
#### Usage (with Client Component)
|
|
659
|
-
|
|
660
|
-
```jsx
|
|
661
|
-
// components/TiaWidget.jsx
|
|
662
|
-
'use client'; // ← Important: Client Component
|
|
663
|
-
|
|
664
|
-
import { useEffect } from 'react';
|
|
665
|
-
|
|
666
|
-
export default function TiaWidget() {
|
|
667
|
-
useEffect(() => {
|
|
668
|
-
// Import widget only on client side
|
|
669
|
-
import('tia-gpc-widget/dist/tia-gpc-widget.standalone.js');
|
|
670
|
-
}, []);
|
|
671
|
-
|
|
672
|
-
return (
|
|
673
|
-
<>
|
|
674
|
-
{/* CSS */}
|
|
675
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css" />
|
|
676
|
-
|
|
677
|
-
{/* Widget */}
|
|
678
|
-
<tia-gpc-widget
|
|
679
|
-
token={process.env.NEXT_PUBLIC_TIA_GPC_TOKEN}
|
|
680
|
-
theme="auto"
|
|
681
|
-
language="en"
|
|
682
|
-
></tia-gpc-widget>
|
|
683
|
-
</>
|
|
684
|
-
);
|
|
685
|
-
}
|
|
686
|
-
```
|
|
687
|
-
|
|
688
|
-
In your page:
|
|
689
|
-
|
|
690
|
-
```jsx
|
|
691
|
-
// app/page.jsx
|
|
692
|
-
import TiaWidget from '@/components/TiaWidget';
|
|
693
|
-
|
|
694
|
-
export default function Home() {
|
|
695
|
-
return (
|
|
696
|
-
<main>
|
|
697
|
-
<h1>My Next.js App</h1>
|
|
698
|
-
<TiaWidget />
|
|
699
|
-
</main>
|
|
700
|
-
);
|
|
701
|
-
}
|
|
702
|
-
```
|
|
703
|
-
|
|
704
|
-
---
|
|
705
|
-
|
|
706
|
-
### 7. PHP
|
|
707
|
-
|
|
708
|
-
```php
|
|
709
|
-
<!DOCTYPE html>
|
|
710
|
-
<html lang="en">
|
|
711
|
-
<head>
|
|
712
|
-
<meta charset="UTF-8">
|
|
713
|
-
<title>TIA GPC Widget - PHP</title>
|
|
714
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
715
|
-
</head>
|
|
716
|
-
<body>
|
|
717
|
-
<h1>My PHP Application</h1>
|
|
718
|
-
|
|
719
|
-
<?php
|
|
720
|
-
// Get token from environment variables or config
|
|
721
|
-
$tiaGpcToken = getenv('TIA_GPC_TOKEN') ?: 'your-license-token';
|
|
722
|
-
$userLanguage = $_SESSION['user_language'] ?? 'en';
|
|
723
|
-
?>
|
|
724
|
-
|
|
725
|
-
<!-- TIA GPC Widget -->
|
|
726
|
-
<tia-gpc-widget
|
|
727
|
-
token="<?php echo htmlspecialchars($tiaGpcToken); ?>"
|
|
728
|
-
theme="auto"
|
|
729
|
-
position="bottom-right"
|
|
730
|
-
language="<?php echo htmlspecialchars($userLanguage); ?>"
|
|
731
|
-
></tia-gpc-widget>
|
|
732
|
-
|
|
733
|
-
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
734
|
-
</body>
|
|
735
|
-
</html>
|
|
736
|
-
```
|
|
737
|
-
|
|
738
|
-
---
|
|
739
|
-
|
|
740
|
-
## 🎛️ API & Configuration
|
|
741
|
-
|
|
742
|
-
### Props/Attributes
|
|
743
|
-
|
|
744
|
-
All frameworks support the same attributes:
|
|
745
|
-
|
|
746
|
-
| Attribute | Type | Default | Description |
|
|
747
|
-
|----------|------|-------------|-------------|
|
|
748
|
-
| `token` | `string` | **Required** | TIA GPC license token |
|
|
749
|
-
| `theme` | `'auto' \| 'light' \| 'dark'` | `'auto'` | Widget theme |
|
|
750
|
-
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Screen position |
|
|
751
|
-
| `language` | `'es' \| 'en' \| 'fr'` | `'es'` | Widget language |
|
|
752
|
-
| `primary-color` | `string` | `'#2563eb'` | Primary color (hexadecimal) |
|
|
753
|
-
| `width` | `string` | `'400px'` | Widget width |
|
|
754
|
-
| `height` | `string` | `'600px'` | Widget height |
|
|
755
|
-
| `api-url` | `string` | Default API | Custom API URL |
|
|
756
|
-
| `turnstile-site-key` | `string` | - | Cloudflare Turnstile site key |
|
|
757
|
-
| `auto-open` | `boolean` | `false` | Auto-open on load |
|
|
758
|
-
| `show-branding` | `boolean` | `true` | Show TIA GPC branding |
|
|
759
|
-
| `mobile-fullscreen` | `boolean` | `true` | Fullscreen on mobile |
|
|
760
|
-
|
|
761
|
-
### Events
|
|
762
|
-
|
|
763
|
-
| Event | Description | Payload |
|
|
764
|
-
|--------|-------------|---------|
|
|
765
|
-
| `ready` | Fired when widget is ready | - |
|
|
766
|
-
| `error` | Fired when an error occurs | `{ detail: ErrorObject }` |
|
|
767
|
-
| `close` | Fired when widget closes | - |
|
|
768
|
-
|
|
769
|
-
#### Event usage example
|
|
770
|
-
|
|
771
|
-
```html
|
|
772
|
-
<script>
|
|
773
|
-
const widget = document.querySelector('tia-gpc-widget');
|
|
774
|
-
|
|
775
|
-
widget.addEventListener('ready', () => {
|
|
776
|
-
console.log('Widget ready');
|
|
777
|
-
});
|
|
778
|
-
|
|
779
|
-
widget.addEventListener('error', (e) => {
|
|
780
|
-
console.error('Error:', e.detail);
|
|
781
|
-
// Send to logging system
|
|
782
|
-
});
|
|
783
|
-
|
|
784
|
-
widget.addEventListener('close', () => {
|
|
785
|
-
console.log('User closed the widget');
|
|
786
|
-
// Analytics or tracking
|
|
787
|
-
});
|
|
788
|
-
</script>
|
|
789
|
-
```
|
|
790
|
-
|
|
791
|
-
### Programmatic API (JavaScript)
|
|
792
|
-
|
|
793
|
-
The widget exposes a global `TiaGPC` API for programmatic control:
|
|
794
|
-
|
|
795
|
-
```javascript
|
|
796
|
-
// Create widget programmatically
|
|
797
|
-
const widget = TiaGPC.create({
|
|
798
|
-
token: 'your-token',
|
|
799
|
-
theme: 'dark',
|
|
800
|
-
language: 'en',
|
|
801
|
-
position: TiaGPC.POSITIONS.BOTTOM_LEFT,
|
|
802
|
-
onReady: () => console.log('Ready'),
|
|
803
|
-
onError: (err) => console.error(err)
|
|
804
|
-
});
|
|
805
|
-
|
|
806
|
-
// Open widget
|
|
807
|
-
widget.open();
|
|
808
|
-
|
|
809
|
-
// Close widget
|
|
810
|
-
widget.close();
|
|
811
|
-
|
|
812
|
-
// View information
|
|
813
|
-
TiaGPC.info();
|
|
814
|
-
|
|
815
|
-
// Available constants
|
|
816
|
-
console.log(TiaGPC.POSITIONS); // { BOTTOM_RIGHT, BOTTOM_LEFT, ... }
|
|
817
|
-
console.log(TiaGPC.THEMES); // { AUTO, LIGHT, DARK }
|
|
818
|
-
console.log(TiaGPC.LANGUAGES); // { ES, EN, FR }
|
|
819
|
-
```
|
|
820
|
-
|
|
821
|
-
---
|
|
822
|
-
|
|
823
|
-
## 🎨 Customization
|
|
824
|
-
|
|
825
|
-
### Themes
|
|
826
|
-
|
|
827
|
-
```html
|
|
828
|
-
<!-- Automatic (follows system preferences) -->
|
|
829
|
-
<tia-gpc-widget theme="auto"></tia-gpc-widget>
|
|
830
|
-
|
|
831
|
-
<!-- Light -->
|
|
832
|
-
<tia-gpc-widget theme="light"></tia-gpc-widget>
|
|
833
|
-
|
|
834
|
-
<!-- Dark -->
|
|
835
|
-
<tia-gpc-widget theme="dark"></tia-gpc-widget>
|
|
836
|
-
```
|
|
837
|
-
|
|
838
|
-
### Positions
|
|
839
|
-
|
|
840
|
-
```html
|
|
841
|
-
<!-- Bottom right corner (default) -->
|
|
842
|
-
<tia-gpc-widget position="bottom-right"></tia-gpc-widget>
|
|
843
|
-
|
|
844
|
-
<!-- Bottom left corner -->
|
|
845
|
-
<tia-gpc-widget position="bottom-left"></tia-gpc-widget>
|
|
846
|
-
|
|
847
|
-
<!-- Top right corner -->
|
|
848
|
-
<tia-gpc-widget position="top-right"></tia-gpc-widget>
|
|
849
|
-
|
|
850
|
-
<!-- Top left corner -->
|
|
851
|
-
<tia-gpc-widget position="top-left"></tia-gpc-widget>
|
|
852
|
-
```
|
|
853
|
-
|
|
854
|
-
### Languages
|
|
855
|
-
|
|
856
|
-
```html
|
|
857
|
-
<!-- Spanish -->
|
|
858
|
-
<tia-gpc-widget language="es"></tia-gpc-widget>
|
|
859
|
-
|
|
860
|
-
<!-- English -->
|
|
861
|
-
<tia-gpc-widget language="en"></tia-gpc-widget>
|
|
862
|
-
|
|
863
|
-
<!-- French -->
|
|
864
|
-
<tia-gpc-widget language="fr"></tia-gpc-widget>
|
|
865
|
-
```
|
|
866
|
-
|
|
867
|
-
### Colors
|
|
868
|
-
|
|
869
|
-
```html
|
|
870
|
-
<!-- Custom color -->
|
|
871
|
-
<tia-gpc-widget
|
|
872
|
-
primary-color="#10b981"
|
|
873
|
-
></tia-gpc-widget>
|
|
874
|
-
|
|
875
|
-
<!-- Blue (default) -->
|
|
876
|
-
<tia-gpc-widget primary-color="#2563eb"></tia-gpc-widget>
|
|
877
|
-
|
|
878
|
-
<!-- Green -->
|
|
879
|
-
<tia-gpc-widget primary-color="#16a34a"></tia-gpc-widget>
|
|
880
|
-
|
|
881
|
-
<!-- Purple -->
|
|
882
|
-
<tia-gpc-widget primary-color="#9333ea"></tia-gpc-widget>
|
|
883
|
-
```
|
|
884
|
-
|
|
885
|
-
---
|
|
886
|
-
|
|
887
|
-
## 🛠️ Build & Development
|
|
888
|
-
|
|
889
|
-
### Available scripts
|
|
890
|
-
|
|
891
|
-
```bash
|
|
892
|
-
# Development (dev mode with hot reload)
|
|
893
|
-
npm run dev
|
|
894
|
-
|
|
895
|
-
# Complete build (NPM + Standalone)
|
|
896
|
-
npm run build
|
|
897
|
-
|
|
898
|
-
# Build only for NPM (without bundled React)
|
|
899
|
-
npm run build:npm
|
|
900
|
-
|
|
901
|
-
# Standalone build (with bundled React)
|
|
902
|
-
npm run build:standalone
|
|
903
|
-
|
|
904
|
-
# Lint
|
|
905
|
-
npm run lint
|
|
906
|
-
|
|
907
|
-
# Preview
|
|
908
|
-
npm run preview
|
|
909
|
-
```
|
|
910
|
-
|
|
911
|
-
### Generated file structure
|
|
912
|
-
|
|
913
|
-
```
|
|
914
|
-
dist/
|
|
915
|
-
├── tia-gpc.es.js # ESM build for NPM
|
|
916
|
-
├── tia-gpc.cjs.js # CommonJS build for NPM
|
|
917
|
-
├── tia-gpc.css # CSS for NPM build
|
|
918
|
-
├── tia-gpc-widget.standalone.js # Standalone build (IIFE with React)
|
|
919
|
-
└── tia-gpc-widget.standalone.css # CSS for standalone
|
|
920
|
-
```
|
|
921
|
-
|
|
922
|
-
### Which file to use?
|
|
923
|
-
|
|
924
|
-
| Environment | File to use |
|
|
925
|
-
|---------|----------------|
|
|
926
|
-
| React, Vue (with build system) | `tia-gpc.es.js` + `tia-gpc.css` |
|
|
927
|
-
| Node.js CommonJS | `tia-gpc.cjs.js` + `tia-gpc.css` |
|
|
928
|
-
| Plain HTML, Angular, ASP.NET, PHP | `tia-gpc-widget.standalone.js` + `tia-gpc-widget.standalone.css` |
|
|
929
|
-
|
|
930
|
-
---
|
|
931
|
-
|
|
932
|
-
## 📤 Publishing
|
|
933
|
-
|
|
934
|
-
### Publish to NPM (Public)
|
|
935
|
-
|
|
936
|
-
```bash
|
|
937
|
-
# 1. Login to NPM
|
|
938
|
-
npm login
|
|
939
|
-
|
|
940
|
-
# 2. Build the project
|
|
941
|
-
npm run build
|
|
942
|
-
|
|
943
|
-
# 3. Publish
|
|
944
|
-
npm publish
|
|
945
|
-
```
|
|
946
|
-
|
|
947
|
-
### Publish to Private NPM / GitLab Package Registry
|
|
948
|
-
|
|
949
|
-
#### Configure `.npmrc`
|
|
950
|
-
|
|
951
|
-
Create an `.npmrc` file in the project root:
|
|
952
|
-
|
|
953
|
-
```ini
|
|
954
|
-
# For GitLab Package Registry
|
|
955
|
-
@your-scope:registry=https://gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/
|
|
956
|
-
//gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/:_authToken=${CI_JOB_TOKEN}
|
|
957
|
-
```
|
|
958
|
-
|
|
959
|
-
#### Update `package.json`
|
|
960
|
-
|
|
961
|
-
```json
|
|
962
|
-
{
|
|
963
|
-
"name": "@your-scope/tia-gpc-widget",
|
|
964
|
-
"publishConfig": {
|
|
965
|
-
"@your-scope:registry": "https://gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/"
|
|
966
|
-
}
|
|
967
|
-
}
|
|
968
|
-
```
|
|
969
|
-
|
|
970
|
-
#### Publish
|
|
971
|
-
|
|
972
|
-
```bash
|
|
973
|
-
npm run build
|
|
974
|
-
npm publish
|
|
975
|
-
```
|
|
976
|
-
|
|
977
|
-
### CDN Distribution
|
|
978
|
-
|
|
979
|
-
After publishing to npm, your package is automatically available on these CDNs:
|
|
980
|
-
|
|
981
|
-
#### jsDelivr
|
|
982
|
-
```html
|
|
983
|
-
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
984
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
985
|
-
```
|
|
986
|
-
|
|
987
|
-
#### unpkg
|
|
988
|
-
```html
|
|
989
|
-
<script src="https://unpkg.com/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
990
|
-
<link rel="stylesheet" href="https://unpkg.com/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
991
|
-
```
|
|
992
|
-
|
|
993
|
-
**Note:** CDNs may take 5-10 minutes to sync after publishing to npm.
|
|
994
|
-
|
|
995
|
-
### Manual Distribution
|
|
996
|
-
|
|
997
|
-
Copy files from `dist/` to your web server:
|
|
998
|
-
|
|
999
|
-
```bash
|
|
1000
|
-
# Copy standalone files to server
|
|
1001
|
-
cp dist/tia-gpc-widget.standalone.* /var/www/html/assets/
|
|
1002
|
-
```
|
|
1003
|
-
|
|
1004
|
-
---
|
|
1005
|
-
|
|
1006
|
-
## 🔐 Getting a License Token
|
|
1007
|
-
|
|
1008
|
-
To use this widget you need a TIA GPC license token. Contact the TIA team to get your token:
|
|
1009
|
-
|
|
1010
|
-
- **Email**: support@tia.com
|
|
1011
|
-
- **Web**: https://tia.com/gpc
|
|
1012
|
-
|
|
1013
|
-
---
|
|
1014
|
-
|
|
1015
|
-
## 📊 Bundle Sizes
|
|
1016
|
-
|
|
1017
|
-
| File | Size (gzip) | Description |
|
|
1018
|
-
|---------|---------------|-------------|
|
|
1019
|
-
| `tia-gpc.es.js` | ~45 KB | NPM build (without React) |
|
|
1020
|
-
| `tia-gpc-widget.standalone.js` | ~180 KB | Standalone build (with React) |
|
|
1021
|
-
| `*.css` | ~15 KB | Styles |
|
|
1022
|
-
|
|
1023
|
-
The standalone bundle is larger because it includes React and all dependencies.
|
|
1024
|
-
|
|
1025
|
-
---
|
|
1026
|
-
|
|
1027
|
-
## 🐛 Troubleshooting
|
|
1028
|
-
|
|
1029
|
-
### Widget doesn't appear
|
|
1030
|
-
|
|
1031
|
-
1. Verify you included both files (JS and CSS)
|
|
1032
|
-
2. Check browser console for errors
|
|
1033
|
-
3. Make sure the token is valid
|
|
1034
|
-
|
|
1035
|
-
### Error: "customElements.define() called with incorrect arguments"
|
|
1036
|
-
|
|
1037
|
-
- In Angular: Add `CUSTOM_ELEMENTS_SCHEMA` to your module
|
|
1038
|
-
- In Vue: Configure `isCustomElement` in compiler options
|
|
1039
|
-
|
|
1040
|
-
### CSS Conflicts
|
|
1041
|
-
|
|
1042
|
-
The widget uses `gpc-` prefixes on all classes to avoid conflicts. If there are still issues, you can increase specificity:
|
|
1043
|
-
|
|
1044
|
-
```css
|
|
1045
|
-
.your-container tia-gpc-widget {
|
|
1046
|
-
/* your custom styles */
|
|
1047
|
-
}
|
|
1048
|
-
```
|
|
1049
|
-
|
|
1050
|
-
### React is not defined (in standalone build)
|
|
1051
|
-
|
|
1052
|
-
If you see this error, make sure you're using the `standalone.js` file and not the regular NPM build.
|
|
1053
|
-
|
|
1054
|
-
---
|
|
1055
|
-
|
|
1056
|
-
## 📝 License
|
|
1057
|
-
|
|
1058
|
-
UNLICENSED - Internal use by TIA
|
|
1059
|
-
|
|
1060
|
-
---
|
|
1061
|
-
|
|
1062
|
-
## 👥 Support
|
|
1063
|
-
|
|
1064
|
-
For technical support:
|
|
1065
|
-
|
|
1066
|
-
- **Email**: support@tia.com
|
|
1067
|
-
- **GitLab Issues**: https://gitlab.com/softia/tiagpc-frontend/issues
|
|
1068
|
-
- **Documentation**: This README
|
|
1069
|
-
|
|
1070
|
-
---
|
|
1071
|
-
|
|
1072
|
-
## 🚀 Changelog
|
|
1073
|
-
|
|
1074
|
-
### v1.0.6 (2025-01-11)
|
|
1075
|
-
|
|
1076
|
-
- ✨ Added CDN support via jsDelivr and unpkg
|
|
1077
|
-
- 📝 Updated documentation to English
|
|
1078
|
-
- 🔧 Added `unpkg` and `jsdelivr` fields to package.json
|
|
1079
|
-
|
|
1080
|
-
### v1.0.0 (2025-01-10)
|
|
1081
|
-
|
|
1082
|
-
- ✨ Initial release
|
|
1083
|
-
- ✅ React support
|
|
1084
|
-
- ✅ Standalone build for HTML/Angular/ASP.NET
|
|
1085
|
-
- ✅ Web Component API
|
|
1086
|
-
- ✅ Light/dark themes
|
|
1087
|
-
- ✅ Internationalization (ES/EN/FR)
|
|
1088
|
-
- ✅ Full customization
|
|
1089
|
-
|
|
1090
|
-
---
|
|
1091
|
-
|
|
1092
|
-
**Built with ❤️ by the TIA team**
|
|
1
|
+
# TIA GPC Widget
|
|
2
|
+
|
|
3
|
+
Intelligent chat widget for TIA GPC integration. Compatible with **React, HTML, Angular, ASP.NET, Vue, and any other framework**.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/tia-gpc-widget)
|
|
6
|
+
[](https://www.jsdelivr.com/package/npm/tia-gpc-widget)
|
|
7
|
+
[](LICENSE)
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## 📋 Table of Contents
|
|
12
|
+
|
|
13
|
+
- [Features](#-features)
|
|
14
|
+
- [Installation](#-installation)
|
|
15
|
+
- [Option 1: NPM (For React/Node Projects)](#option-1-npm-for-reactnode-projects)
|
|
16
|
+
- [Option 2: CDN (For HTML, Angular, ASP.NET, etc.)](#option-2-cdn-for-html-angular-aspnet-etc)
|
|
17
|
+
- [Quick Start](#-quick-start)
|
|
18
|
+
- [Framework Examples](#-framework-examples)
|
|
19
|
+
- [React](#1-react)
|
|
20
|
+
- [HTML / Vanilla JavaScript](#2-html--vanilla-javascript)
|
|
21
|
+
- [Angular](#3-angular)
|
|
22
|
+
- [ASP.NET / ASPX](#4-aspnet--aspx)
|
|
23
|
+
- [Vue.js](#5-vuejs)
|
|
24
|
+
- [Next.js](#6-nextjs)
|
|
25
|
+
- [PHP](#7-php)
|
|
26
|
+
- [API & Configuration](#-api--configuration)
|
|
27
|
+
- [Props/Attributes](#propsattributes)
|
|
28
|
+
- [Events](#events)
|
|
29
|
+
- [Programmatic API (JavaScript)](#programmatic-api-javascript)
|
|
30
|
+
- [Customization](#-customization)
|
|
31
|
+
- [Themes](#themes)
|
|
32
|
+
- [Positions](#positions)
|
|
33
|
+
- [Languages](#languages)
|
|
34
|
+
- [Colors](#colors)
|
|
35
|
+
- [Build & Development](#-build--development)
|
|
36
|
+
- [Publishing](#-publishing)
|
|
37
|
+
- [Support](#-support)
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
## 🚀 Features
|
|
42
|
+
|
|
43
|
+
- ✅ **Framework Agnostic**: Works in React, Angular, Vue, ASP.NET, plain HTML, etc.
|
|
44
|
+
- ✅ **Web Component**: Based on native web standards
|
|
45
|
+
- ✅ **Themes**: Light, dark, or automatic mode
|
|
46
|
+
- ✅ **Internationalization**: Spanish, English, French
|
|
47
|
+
- ✅ **Responsive**: Adaptive design for mobile and desktop
|
|
48
|
+
- ✅ **Customizable**: Colors, positions, dimensions
|
|
49
|
+
- ✅ **TypeScript Ready**: Types included
|
|
50
|
+
- ✅ **Zero Dependencies**: Standalone bundle includes everything needed
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## 📦 Installation
|
|
55
|
+
|
|
56
|
+
### Option 1: NPM (For React/Node Projects)
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
npm install tia-gpc-widget
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
or with yarn:
|
|
63
|
+
|
|
64
|
+
```bash
|
|
65
|
+
yarn add tia-gpc-widget
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
or with pnpm:
|
|
69
|
+
|
|
70
|
+
```bash
|
|
71
|
+
pnpm add tia-gpc-widget
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Option 2: CDN (For HTML, Angular, ASP.NET, etc.)
|
|
75
|
+
|
|
76
|
+
You can include the widget directly from a CDN:
|
|
77
|
+
|
|
78
|
+
#### jsDelivr (Recommended)
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<!-- JavaScript -->
|
|
82
|
+
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
83
|
+
|
|
84
|
+
<!-- CSS -->
|
|
85
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
#### unpkg
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<!-- JavaScript -->
|
|
92
|
+
<script src="https://unpkg.com/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
93
|
+
|
|
94
|
+
<!-- CSS -->
|
|
95
|
+
<link rel="stylesheet" href="https://unpkg.com/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
#### Latest Version (Development Only)
|
|
99
|
+
|
|
100
|
+
```html
|
|
101
|
+
<!-- Always use specific versions in production! -->
|
|
102
|
+
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget/dist/tia-gpc-widget.standalone.js"></script>
|
|
103
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget/dist/tia-gpc-widget.standalone.css">
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
## ⚡ Quick Start
|
|
109
|
+
|
|
110
|
+
### In Plain HTML
|
|
111
|
+
|
|
112
|
+
```html
|
|
113
|
+
<!DOCTYPE html>
|
|
114
|
+
<html lang="en">
|
|
115
|
+
<head>
|
|
116
|
+
<meta charset="UTF-8">
|
|
117
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
118
|
+
<title>My App with TIA GPC</title>
|
|
119
|
+
|
|
120
|
+
<!-- Widget CSS -->
|
|
121
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
122
|
+
</head>
|
|
123
|
+
<body>
|
|
124
|
+
<h1>My Application</h1>
|
|
125
|
+
|
|
126
|
+
<!-- TIA GPC Widget -->
|
|
127
|
+
<tia-gpc-widget
|
|
128
|
+
token="your-license-token-here"
|
|
129
|
+
theme="auto"
|
|
130
|
+
position="bottom-right"
|
|
131
|
+
language="en"
|
|
132
|
+
></tia-gpc-widget>
|
|
133
|
+
|
|
134
|
+
<!-- Widget JavaScript -->
|
|
135
|
+
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
136
|
+
</body>
|
|
137
|
+
</html>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### In React
|
|
141
|
+
|
|
142
|
+
```jsx
|
|
143
|
+
import { TiaGPCWidget } from 'tia-gpc-widget';
|
|
144
|
+
import 'tia-gpc-widget/styles';
|
|
145
|
+
|
|
146
|
+
function App() {
|
|
147
|
+
return (
|
|
148
|
+
<div>
|
|
149
|
+
<h1>My Application</h1>
|
|
150
|
+
<TiaGPCWidget
|
|
151
|
+
token="your-license-token-here"
|
|
152
|
+
theme="auto"
|
|
153
|
+
position="bottom-right"
|
|
154
|
+
language="en"
|
|
155
|
+
/>
|
|
156
|
+
</div>
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
export default App;
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
## 📚 Framework Examples
|
|
166
|
+
|
|
167
|
+
### 1. React
|
|
168
|
+
|
|
169
|
+
#### Installation
|
|
170
|
+
|
|
171
|
+
```bash
|
|
172
|
+
npm install tia-gpc-widget
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
#### Basic Usage
|
|
176
|
+
|
|
177
|
+
```jsx
|
|
178
|
+
import { TiaGPCWidget } from 'tia-gpc-widget';
|
|
179
|
+
import 'tia-gpc-widget/styles';
|
|
180
|
+
|
|
181
|
+
function App() {
|
|
182
|
+
return (
|
|
183
|
+
<TiaGPCWidget
|
|
184
|
+
token="your-license-token"
|
|
185
|
+
theme="auto"
|
|
186
|
+
position="bottom-right"
|
|
187
|
+
language="en"
|
|
188
|
+
primaryColor="#2563eb"
|
|
189
|
+
onReady={() => console.log('Widget ready')}
|
|
190
|
+
onError={(error) => console.error('Error:', error)}
|
|
191
|
+
/>
|
|
192
|
+
);
|
|
193
|
+
}
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
#### Advanced Configuration
|
|
197
|
+
|
|
198
|
+
```jsx
|
|
199
|
+
import { TiaGPCWidget, WIDGET_POSITIONS, THEMES, LANGUAGES } from 'tia-gpc-widget';
|
|
200
|
+
import 'tia-gpc-widget/styles';
|
|
201
|
+
|
|
202
|
+
function App() {
|
|
203
|
+
const handleReady = () => {
|
|
204
|
+
console.log('✅ Widget initialized successfully');
|
|
205
|
+
};
|
|
206
|
+
|
|
207
|
+
const handleError = (error) => {
|
|
208
|
+
console.error('❌ Widget error:', error);
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
return (
|
|
212
|
+
<TiaGPCWidget
|
|
213
|
+
token="your-license-token"
|
|
214
|
+
theme={THEMES.AUTO}
|
|
215
|
+
position={WIDGET_POSITIONS.BOTTOM_RIGHT}
|
|
216
|
+
language={LANGUAGES.EN}
|
|
217
|
+
primaryColor="#10b981"
|
|
218
|
+
width="450px"
|
|
219
|
+
height="650px"
|
|
220
|
+
autoOpen={false}
|
|
221
|
+
showBranding={true}
|
|
222
|
+
mobileFullscreen={true}
|
|
223
|
+
onReady={handleReady}
|
|
224
|
+
onError={handleError}
|
|
225
|
+
onClose={() => console.log('Widget closed')}
|
|
226
|
+
/>
|
|
227
|
+
);
|
|
228
|
+
}
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
---
|
|
232
|
+
|
|
233
|
+
### 2. HTML / Vanilla JavaScript
|
|
234
|
+
|
|
235
|
+
#### Method 1: Using HTML element directly
|
|
236
|
+
|
|
237
|
+
```html
|
|
238
|
+
<!DOCTYPE html>
|
|
239
|
+
<html lang="en">
|
|
240
|
+
<head>
|
|
241
|
+
<meta charset="UTF-8">
|
|
242
|
+
<title>TIA GPC Widget - Plain HTML</title>
|
|
243
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
244
|
+
</head>
|
|
245
|
+
<body>
|
|
246
|
+
<h1>My Website</h1>
|
|
247
|
+
|
|
248
|
+
<!-- Widget as HTML element -->
|
|
249
|
+
<tia-gpc-widget
|
|
250
|
+
token="your-license-token"
|
|
251
|
+
theme="light"
|
|
252
|
+
position="bottom-right"
|
|
253
|
+
language="en"
|
|
254
|
+
primary-color="#3b82f6"
|
|
255
|
+
width="400px"
|
|
256
|
+
height="600px"
|
|
257
|
+
auto-open="false"
|
|
258
|
+
show-branding="true"
|
|
259
|
+
></tia-gpc-widget>
|
|
260
|
+
|
|
261
|
+
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
262
|
+
|
|
263
|
+
<!-- Optional events -->
|
|
264
|
+
<script>
|
|
265
|
+
const widget = document.querySelector('tia-gpc-widget');
|
|
266
|
+
|
|
267
|
+
widget.addEventListener('ready', () => {
|
|
268
|
+
console.log('Widget ready');
|
|
269
|
+
});
|
|
270
|
+
|
|
271
|
+
widget.addEventListener('error', (e) => {
|
|
272
|
+
console.error('Error:', e.detail);
|
|
273
|
+
});
|
|
274
|
+
|
|
275
|
+
widget.addEventListener('close', () => {
|
|
276
|
+
console.log('Widget closed');
|
|
277
|
+
});
|
|
278
|
+
</script>
|
|
279
|
+
</body>
|
|
280
|
+
</html>
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
#### Method 2: Programmatic creation with JavaScript
|
|
284
|
+
|
|
285
|
+
```html
|
|
286
|
+
<!DOCTYPE html>
|
|
287
|
+
<html lang="en">
|
|
288
|
+
<head>
|
|
289
|
+
<meta charset="UTF-8">
|
|
290
|
+
<title>TIA GPC Widget - Programmatic</title>
|
|
291
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
292
|
+
</head>
|
|
293
|
+
<body>
|
|
294
|
+
<h1>My Website</h1>
|
|
295
|
+
<button id="create-widget">Create Widget</button>
|
|
296
|
+
|
|
297
|
+
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
298
|
+
<script>
|
|
299
|
+
document.getElementById('create-widget').addEventListener('click', () => {
|
|
300
|
+
// Use the global TiaGPC API
|
|
301
|
+
const widget = TiaGPC.create({
|
|
302
|
+
token: 'your-license-token',
|
|
303
|
+
theme: 'auto',
|
|
304
|
+
position: TiaGPC.POSITIONS.BOTTOM_RIGHT,
|
|
305
|
+
language: TiaGPC.LANGUAGES.EN,
|
|
306
|
+
primaryColor: '#3b82f6',
|
|
307
|
+
autoOpen: false,
|
|
308
|
+
onReady: () => console.log('✅ Widget ready'),
|
|
309
|
+
onError: (error) => console.error('❌ Error:', error),
|
|
310
|
+
onClose: () => console.log('Widget closed')
|
|
311
|
+
});
|
|
312
|
+
|
|
313
|
+
console.log('Widget created:', widget);
|
|
314
|
+
});
|
|
315
|
+
|
|
316
|
+
// View widget information
|
|
317
|
+
TiaGPC.info();
|
|
318
|
+
</script>
|
|
319
|
+
</body>
|
|
320
|
+
</html>
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
---
|
|
324
|
+
|
|
325
|
+
### 3. Angular
|
|
326
|
+
|
|
327
|
+
#### Step 1: Install the widget
|
|
328
|
+
|
|
329
|
+
```bash
|
|
330
|
+
npm install tia-gpc-widget
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
#### Step 2: Configure Angular for Web Components
|
|
334
|
+
|
|
335
|
+
In `src/main.ts` or `src/polyfills.ts`, add:
|
|
336
|
+
|
|
337
|
+
```typescript
|
|
338
|
+
// Enable Custom Elements (Web Components)
|
|
339
|
+
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
In your main module (`app.module.ts`):
|
|
343
|
+
|
|
344
|
+
```typescript
|
|
345
|
+
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
346
|
+
import { BrowserModule } from '@angular/platform-browser';
|
|
347
|
+
import { AppComponent } from './app.component';
|
|
348
|
+
|
|
349
|
+
@NgModule({
|
|
350
|
+
declarations: [AppComponent],
|
|
351
|
+
imports: [BrowserModule],
|
|
352
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA], // ← Important
|
|
353
|
+
bootstrap: [AppComponent]
|
|
354
|
+
})
|
|
355
|
+
export class AppModule { }
|
|
356
|
+
```
|
|
357
|
+
|
|
358
|
+
#### Step 3: Import widget files
|
|
359
|
+
|
|
360
|
+
In `angular.json`, add the CSS and JS files:
|
|
361
|
+
|
|
362
|
+
```json
|
|
363
|
+
{
|
|
364
|
+
"projects": {
|
|
365
|
+
"your-project": {
|
|
366
|
+
"architect": {
|
|
367
|
+
"build": {
|
|
368
|
+
"options": {
|
|
369
|
+
"styles": [
|
|
370
|
+
"src/styles.css",
|
|
371
|
+
"node_modules/tia-gpc-widget/dist/tia-gpc-widget.standalone.css"
|
|
372
|
+
],
|
|
373
|
+
"scripts": [
|
|
374
|
+
"node_modules/tia-gpc-widget/dist/tia-gpc-widget.standalone.js"
|
|
375
|
+
]
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
#### Step 4: Use the widget in your component
|
|
385
|
+
|
|
386
|
+
```typescript
|
|
387
|
+
// app.component.ts
|
|
388
|
+
import { Component, OnInit } from '@angular/core';
|
|
389
|
+
|
|
390
|
+
declare global {
|
|
391
|
+
interface Window {
|
|
392
|
+
TiaGPC: any;
|
|
393
|
+
}
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
@Component({
|
|
397
|
+
selector: 'app-root',
|
|
398
|
+
template: `
|
|
399
|
+
<h1>My Angular Application</h1>
|
|
400
|
+
|
|
401
|
+
<!-- Option 1: Direct HTML element -->
|
|
402
|
+
<tia-gpc-widget
|
|
403
|
+
[attr.token]="widgetToken"
|
|
404
|
+
[attr.theme]="theme"
|
|
405
|
+
[attr.position]="position"
|
|
406
|
+
[attr.language]="language"
|
|
407
|
+
(ready)="onWidgetReady()"
|
|
408
|
+
(error)="onWidgetError($event)"
|
|
409
|
+
></tia-gpc-widget>
|
|
410
|
+
`
|
|
411
|
+
})
|
|
412
|
+
export class AppComponent implements OnInit {
|
|
413
|
+
widgetToken = 'your-license-token';
|
|
414
|
+
theme = 'auto';
|
|
415
|
+
position = 'bottom-right';
|
|
416
|
+
language = 'en';
|
|
417
|
+
|
|
418
|
+
ngOnInit() {
|
|
419
|
+
console.log('TiaGPC available:', window.TiaGPC);
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
onWidgetReady() {
|
|
423
|
+
console.log('✅ TIA GPC widget ready');
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
onWidgetError(event: any) {
|
|
427
|
+
console.error('❌ Widget error:', event.detail);
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
```
|
|
431
|
+
|
|
432
|
+
#### Alternative option: Programmatic creation
|
|
433
|
+
|
|
434
|
+
```typescript
|
|
435
|
+
// app.component.ts
|
|
436
|
+
import { Component, OnInit } from '@angular/core';
|
|
437
|
+
|
|
438
|
+
@Component({
|
|
439
|
+
selector: 'app-root',
|
|
440
|
+
template: `
|
|
441
|
+
<h1>My Angular Application</h1>
|
|
442
|
+
<button (click)="createWidget()">Create Widget</button>
|
|
443
|
+
<div #widgetContainer></div>
|
|
444
|
+
`
|
|
445
|
+
})
|
|
446
|
+
export class AppComponent implements OnInit {
|
|
447
|
+
ngOnInit() {
|
|
448
|
+
this.createWidget();
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
createWidget() {
|
|
452
|
+
if (window.TiaGPC) {
|
|
453
|
+
window.TiaGPC.create({
|
|
454
|
+
token: 'your-license-token',
|
|
455
|
+
theme: 'auto',
|
|
456
|
+
language: 'en',
|
|
457
|
+
onReady: () => console.log('Widget ready'),
|
|
458
|
+
onError: (err: any) => console.error(err)
|
|
459
|
+
});
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
```
|
|
464
|
+
|
|
465
|
+
---
|
|
466
|
+
|
|
467
|
+
### 4. ASP.NET / ASPX
|
|
468
|
+
|
|
469
|
+
#### Option 1: In an ASPX page
|
|
470
|
+
|
|
471
|
+
```aspx
|
|
472
|
+
<%@ Page Language="C#" AutoEventWireup="true" %>
|
|
473
|
+
|
|
474
|
+
<!DOCTYPE html>
|
|
475
|
+
<html>
|
|
476
|
+
<head>
|
|
477
|
+
<title>TIA GPC Widget - ASP.NET</title>
|
|
478
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css" />
|
|
479
|
+
</head>
|
|
480
|
+
<body>
|
|
481
|
+
<form id="form1" runat="server">
|
|
482
|
+
<h1>My ASP.NET Application</h1>
|
|
483
|
+
|
|
484
|
+
<!-- TIA GPC Widget -->
|
|
485
|
+
<tia-gpc-widget
|
|
486
|
+
token="<%= ConfigurationManager.AppSettings["TiaGpcToken"] %>"
|
|
487
|
+
theme="auto"
|
|
488
|
+
position="bottom-right"
|
|
489
|
+
language="en"
|
|
490
|
+
primary-color="#2563eb"
|
|
491
|
+
></tia-gpc-widget>
|
|
492
|
+
</form>
|
|
493
|
+
|
|
494
|
+
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
495
|
+
<script>
|
|
496
|
+
// Optional events
|
|
497
|
+
document.querySelector('tia-gpc-widget').addEventListener('ready', function() {
|
|
498
|
+
console.log('TIA GPC Widget initialized');
|
|
499
|
+
});
|
|
500
|
+
</script>
|
|
501
|
+
</body>
|
|
502
|
+
</html>
|
|
503
|
+
```
|
|
504
|
+
|
|
505
|
+
#### Option 2: With Master Page
|
|
506
|
+
|
|
507
|
+
In your `Site.Master`:
|
|
508
|
+
|
|
509
|
+
```aspx
|
|
510
|
+
<head runat="server">
|
|
511
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css" />
|
|
512
|
+
</head>
|
|
513
|
+
<body>
|
|
514
|
+
<asp:ContentPlaceHolder ID="MainContent" runat="server">
|
|
515
|
+
</asp:ContentPlaceHolder>
|
|
516
|
+
|
|
517
|
+
<!-- Global widget -->
|
|
518
|
+
<tia-gpc-widget
|
|
519
|
+
token="<%= GetTiaGpcToken() %>"
|
|
520
|
+
theme="auto"
|
|
521
|
+
language="en"
|
|
522
|
+
></tia-gpc-widget>
|
|
523
|
+
|
|
524
|
+
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
525
|
+
</body>
|
|
526
|
+
```
|
|
527
|
+
|
|
528
|
+
In your `Site.Master.cs`:
|
|
529
|
+
|
|
530
|
+
```csharp
|
|
531
|
+
public partial class SiteMaster : MasterPage
|
|
532
|
+
{
|
|
533
|
+
protected string GetTiaGpcToken()
|
|
534
|
+
{
|
|
535
|
+
return ConfigurationManager.AppSettings["TiaGpcToken"];
|
|
536
|
+
}
|
|
537
|
+
}
|
|
538
|
+
```
|
|
539
|
+
|
|
540
|
+
#### Option 3: MVC / Razor
|
|
541
|
+
|
|
542
|
+
In your layout `_Layout.cshtml`:
|
|
543
|
+
|
|
544
|
+
```html
|
|
545
|
+
<!DOCTYPE html>
|
|
546
|
+
<html>
|
|
547
|
+
<head>
|
|
548
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css" />
|
|
549
|
+
</head>
|
|
550
|
+
<body>
|
|
551
|
+
@RenderBody()
|
|
552
|
+
|
|
553
|
+
<!-- TIA GPC Widget -->
|
|
554
|
+
<tia-gpc-widget
|
|
555
|
+
token="@ViewBag.TiaGpcToken"
|
|
556
|
+
theme="auto"
|
|
557
|
+
language="en"
|
|
558
|
+
></tia-gpc-widget>
|
|
559
|
+
|
|
560
|
+
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
561
|
+
</body>
|
|
562
|
+
</html>
|
|
563
|
+
```
|
|
564
|
+
|
|
565
|
+
In your `Controller`:
|
|
566
|
+
|
|
567
|
+
```csharp
|
|
568
|
+
public class HomeController : Controller
|
|
569
|
+
{
|
|
570
|
+
public ActionResult Index()
|
|
571
|
+
{
|
|
572
|
+
ViewBag.TiaGpcToken = ConfigurationManager.AppSettings["TiaGpcToken"];
|
|
573
|
+
return View();
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
```
|
|
577
|
+
|
|
578
|
+
---
|
|
579
|
+
|
|
580
|
+
### 5. Vue.js
|
|
581
|
+
|
|
582
|
+
#### Installation
|
|
583
|
+
|
|
584
|
+
```bash
|
|
585
|
+
npm install tia-gpc-widget
|
|
586
|
+
```
|
|
587
|
+
|
|
588
|
+
#### Configuration
|
|
589
|
+
|
|
590
|
+
In `main.js` or `main.ts`:
|
|
591
|
+
|
|
592
|
+
```javascript
|
|
593
|
+
import { createApp } from 'vue';
|
|
594
|
+
import App from './App.vue';
|
|
595
|
+
|
|
596
|
+
// Import the standalone widget
|
|
597
|
+
import 'tia-gpc-widget/dist/tia-gpc-widget.standalone.js';
|
|
598
|
+
import 'tia-gpc-widget/dist/tia-gpc-widget.standalone.css';
|
|
599
|
+
|
|
600
|
+
const app = createApp(App);
|
|
601
|
+
|
|
602
|
+
// Configure Vue to ignore custom elements
|
|
603
|
+
app.config.compilerOptions.isCustomElement = (tag) => tag === 'tia-gpc-widget';
|
|
604
|
+
|
|
605
|
+
app.mount('#app');
|
|
606
|
+
```
|
|
607
|
+
|
|
608
|
+
#### Usage in components
|
|
609
|
+
|
|
610
|
+
```vue
|
|
611
|
+
<template>
|
|
612
|
+
<div>
|
|
613
|
+
<h1>My Vue Application</h1>
|
|
614
|
+
|
|
615
|
+
<!-- TIA GPC Widget -->
|
|
616
|
+
<tia-gpc-widget
|
|
617
|
+
:token="widgetToken"
|
|
618
|
+
:theme="theme"
|
|
619
|
+
:language="language"
|
|
620
|
+
position="bottom-right"
|
|
621
|
+
@ready="onReady"
|
|
622
|
+
@error="onError"
|
|
623
|
+
></tia-gpc-widget>
|
|
624
|
+
</div>
|
|
625
|
+
</template>
|
|
626
|
+
|
|
627
|
+
<script setup>
|
|
628
|
+
import { ref, onMounted } from 'vue';
|
|
629
|
+
|
|
630
|
+
const widgetToken = ref('your-license-token');
|
|
631
|
+
const theme = ref('auto');
|
|
632
|
+
const language = ref('en');
|
|
633
|
+
|
|
634
|
+
const onReady = () => {
|
|
635
|
+
console.log('✅ TIA GPC Widget ready');
|
|
636
|
+
};
|
|
637
|
+
|
|
638
|
+
const onError = (event) => {
|
|
639
|
+
console.error('❌ Error:', event.detail);
|
|
640
|
+
};
|
|
641
|
+
|
|
642
|
+
onMounted(() => {
|
|
643
|
+
console.log('TiaGPC available:', window.TiaGPC);
|
|
644
|
+
});
|
|
645
|
+
</script>
|
|
646
|
+
```
|
|
647
|
+
|
|
648
|
+
---
|
|
649
|
+
|
|
650
|
+
### 6. Next.js
|
|
651
|
+
|
|
652
|
+
#### Installation
|
|
653
|
+
|
|
654
|
+
```bash
|
|
655
|
+
npm install tia-gpc-widget
|
|
656
|
+
```
|
|
657
|
+
|
|
658
|
+
#### Usage (with Client Component)
|
|
659
|
+
|
|
660
|
+
```jsx
|
|
661
|
+
// components/TiaWidget.jsx
|
|
662
|
+
'use client'; // ← Important: Client Component
|
|
663
|
+
|
|
664
|
+
import { useEffect } from 'react';
|
|
665
|
+
|
|
666
|
+
export default function TiaWidget() {
|
|
667
|
+
useEffect(() => {
|
|
668
|
+
// Import widget only on client side
|
|
669
|
+
import('tia-gpc-widget/dist/tia-gpc-widget.standalone.js');
|
|
670
|
+
}, []);
|
|
671
|
+
|
|
672
|
+
return (
|
|
673
|
+
<>
|
|
674
|
+
{/* CSS */}
|
|
675
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css" />
|
|
676
|
+
|
|
677
|
+
{/* Widget */}
|
|
678
|
+
<tia-gpc-widget
|
|
679
|
+
token={process.env.NEXT_PUBLIC_TIA_GPC_TOKEN}
|
|
680
|
+
theme="auto"
|
|
681
|
+
language="en"
|
|
682
|
+
></tia-gpc-widget>
|
|
683
|
+
</>
|
|
684
|
+
);
|
|
685
|
+
}
|
|
686
|
+
```
|
|
687
|
+
|
|
688
|
+
In your page:
|
|
689
|
+
|
|
690
|
+
```jsx
|
|
691
|
+
// app/page.jsx
|
|
692
|
+
import TiaWidget from '@/components/TiaWidget';
|
|
693
|
+
|
|
694
|
+
export default function Home() {
|
|
695
|
+
return (
|
|
696
|
+
<main>
|
|
697
|
+
<h1>My Next.js App</h1>
|
|
698
|
+
<TiaWidget />
|
|
699
|
+
</main>
|
|
700
|
+
);
|
|
701
|
+
}
|
|
702
|
+
```
|
|
703
|
+
|
|
704
|
+
---
|
|
705
|
+
|
|
706
|
+
### 7. PHP
|
|
707
|
+
|
|
708
|
+
```php
|
|
709
|
+
<!DOCTYPE html>
|
|
710
|
+
<html lang="en">
|
|
711
|
+
<head>
|
|
712
|
+
<meta charset="UTF-8">
|
|
713
|
+
<title>TIA GPC Widget - PHP</title>
|
|
714
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
715
|
+
</head>
|
|
716
|
+
<body>
|
|
717
|
+
<h1>My PHP Application</h1>
|
|
718
|
+
|
|
719
|
+
<?php
|
|
720
|
+
// Get token from environment variables or config
|
|
721
|
+
$tiaGpcToken = getenv('TIA_GPC_TOKEN') ?: 'your-license-token';
|
|
722
|
+
$userLanguage = $_SESSION['user_language'] ?? 'en';
|
|
723
|
+
?>
|
|
724
|
+
|
|
725
|
+
<!-- TIA GPC Widget -->
|
|
726
|
+
<tia-gpc-widget
|
|
727
|
+
token="<?php echo htmlspecialchars($tiaGpcToken); ?>"
|
|
728
|
+
theme="auto"
|
|
729
|
+
position="bottom-right"
|
|
730
|
+
language="<?php echo htmlspecialchars($userLanguage); ?>"
|
|
731
|
+
></tia-gpc-widget>
|
|
732
|
+
|
|
733
|
+
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
734
|
+
</body>
|
|
735
|
+
</html>
|
|
736
|
+
```
|
|
737
|
+
|
|
738
|
+
---
|
|
739
|
+
|
|
740
|
+
## 🎛️ API & Configuration
|
|
741
|
+
|
|
742
|
+
### Props/Attributes
|
|
743
|
+
|
|
744
|
+
All frameworks support the same attributes:
|
|
745
|
+
|
|
746
|
+
| Attribute | Type | Default | Description |
|
|
747
|
+
|----------|------|-------------|-------------|
|
|
748
|
+
| `token` | `string` | **Required** | TIA GPC license token |
|
|
749
|
+
| `theme` | `'auto' \| 'light' \| 'dark'` | `'auto'` | Widget theme |
|
|
750
|
+
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Screen position |
|
|
751
|
+
| `language` | `'es' \| 'en' \| 'fr'` | `'es'` | Widget language |
|
|
752
|
+
| `primary-color` | `string` | `'#2563eb'` | Primary color (hexadecimal) |
|
|
753
|
+
| `width` | `string` | `'400px'` | Widget width |
|
|
754
|
+
| `height` | `string` | `'600px'` | Widget height |
|
|
755
|
+
| `api-url` | `string` | Default API | Custom API URL |
|
|
756
|
+
| `turnstile-site-key` | `string` | - | Cloudflare Turnstile site key |
|
|
757
|
+
| `auto-open` | `boolean` | `false` | Auto-open on load |
|
|
758
|
+
| `show-branding` | `boolean` | `true` | Show TIA GPC branding |
|
|
759
|
+
| `mobile-fullscreen` | `boolean` | `true` | Fullscreen on mobile |
|
|
760
|
+
|
|
761
|
+
### Events
|
|
762
|
+
|
|
763
|
+
| Event | Description | Payload |
|
|
764
|
+
|--------|-------------|---------|
|
|
765
|
+
| `ready` | Fired when widget is ready | - |
|
|
766
|
+
| `error` | Fired when an error occurs | `{ detail: ErrorObject }` |
|
|
767
|
+
| `close` | Fired when widget closes | - |
|
|
768
|
+
|
|
769
|
+
#### Event usage example
|
|
770
|
+
|
|
771
|
+
```html
|
|
772
|
+
<script>
|
|
773
|
+
const widget = document.querySelector('tia-gpc-widget');
|
|
774
|
+
|
|
775
|
+
widget.addEventListener('ready', () => {
|
|
776
|
+
console.log('Widget ready');
|
|
777
|
+
});
|
|
778
|
+
|
|
779
|
+
widget.addEventListener('error', (e) => {
|
|
780
|
+
console.error('Error:', e.detail);
|
|
781
|
+
// Send to logging system
|
|
782
|
+
});
|
|
783
|
+
|
|
784
|
+
widget.addEventListener('close', () => {
|
|
785
|
+
console.log('User closed the widget');
|
|
786
|
+
// Analytics or tracking
|
|
787
|
+
});
|
|
788
|
+
</script>
|
|
789
|
+
```
|
|
790
|
+
|
|
791
|
+
### Programmatic API (JavaScript)
|
|
792
|
+
|
|
793
|
+
The widget exposes a global `TiaGPC` API for programmatic control:
|
|
794
|
+
|
|
795
|
+
```javascript
|
|
796
|
+
// Create widget programmatically
|
|
797
|
+
const widget = TiaGPC.create({
|
|
798
|
+
token: 'your-token',
|
|
799
|
+
theme: 'dark',
|
|
800
|
+
language: 'en',
|
|
801
|
+
position: TiaGPC.POSITIONS.BOTTOM_LEFT,
|
|
802
|
+
onReady: () => console.log('Ready'),
|
|
803
|
+
onError: (err) => console.error(err)
|
|
804
|
+
});
|
|
805
|
+
|
|
806
|
+
// Open widget
|
|
807
|
+
widget.open();
|
|
808
|
+
|
|
809
|
+
// Close widget
|
|
810
|
+
widget.close();
|
|
811
|
+
|
|
812
|
+
// View information
|
|
813
|
+
TiaGPC.info();
|
|
814
|
+
|
|
815
|
+
// Available constants
|
|
816
|
+
console.log(TiaGPC.POSITIONS); // { BOTTOM_RIGHT, BOTTOM_LEFT, ... }
|
|
817
|
+
console.log(TiaGPC.THEMES); // { AUTO, LIGHT, DARK }
|
|
818
|
+
console.log(TiaGPC.LANGUAGES); // { ES, EN, FR }
|
|
819
|
+
```
|
|
820
|
+
|
|
821
|
+
---
|
|
822
|
+
|
|
823
|
+
## 🎨 Customization
|
|
824
|
+
|
|
825
|
+
### Themes
|
|
826
|
+
|
|
827
|
+
```html
|
|
828
|
+
<!-- Automatic (follows system preferences) -->
|
|
829
|
+
<tia-gpc-widget theme="auto"></tia-gpc-widget>
|
|
830
|
+
|
|
831
|
+
<!-- Light -->
|
|
832
|
+
<tia-gpc-widget theme="light"></tia-gpc-widget>
|
|
833
|
+
|
|
834
|
+
<!-- Dark -->
|
|
835
|
+
<tia-gpc-widget theme="dark"></tia-gpc-widget>
|
|
836
|
+
```
|
|
837
|
+
|
|
838
|
+
### Positions
|
|
839
|
+
|
|
840
|
+
```html
|
|
841
|
+
<!-- Bottom right corner (default) -->
|
|
842
|
+
<tia-gpc-widget position="bottom-right"></tia-gpc-widget>
|
|
843
|
+
|
|
844
|
+
<!-- Bottom left corner -->
|
|
845
|
+
<tia-gpc-widget position="bottom-left"></tia-gpc-widget>
|
|
846
|
+
|
|
847
|
+
<!-- Top right corner -->
|
|
848
|
+
<tia-gpc-widget position="top-right"></tia-gpc-widget>
|
|
849
|
+
|
|
850
|
+
<!-- Top left corner -->
|
|
851
|
+
<tia-gpc-widget position="top-left"></tia-gpc-widget>
|
|
852
|
+
```
|
|
853
|
+
|
|
854
|
+
### Languages
|
|
855
|
+
|
|
856
|
+
```html
|
|
857
|
+
<!-- Spanish -->
|
|
858
|
+
<tia-gpc-widget language="es"></tia-gpc-widget>
|
|
859
|
+
|
|
860
|
+
<!-- English -->
|
|
861
|
+
<tia-gpc-widget language="en"></tia-gpc-widget>
|
|
862
|
+
|
|
863
|
+
<!-- French -->
|
|
864
|
+
<tia-gpc-widget language="fr"></tia-gpc-widget>
|
|
865
|
+
```
|
|
866
|
+
|
|
867
|
+
### Colors
|
|
868
|
+
|
|
869
|
+
```html
|
|
870
|
+
<!-- Custom color -->
|
|
871
|
+
<tia-gpc-widget
|
|
872
|
+
primary-color="#10b981"
|
|
873
|
+
></tia-gpc-widget>
|
|
874
|
+
|
|
875
|
+
<!-- Blue (default) -->
|
|
876
|
+
<tia-gpc-widget primary-color="#2563eb"></tia-gpc-widget>
|
|
877
|
+
|
|
878
|
+
<!-- Green -->
|
|
879
|
+
<tia-gpc-widget primary-color="#16a34a"></tia-gpc-widget>
|
|
880
|
+
|
|
881
|
+
<!-- Purple -->
|
|
882
|
+
<tia-gpc-widget primary-color="#9333ea"></tia-gpc-widget>
|
|
883
|
+
```
|
|
884
|
+
|
|
885
|
+
---
|
|
886
|
+
|
|
887
|
+
## 🛠️ Build & Development
|
|
888
|
+
|
|
889
|
+
### Available scripts
|
|
890
|
+
|
|
891
|
+
```bash
|
|
892
|
+
# Development (dev mode with hot reload)
|
|
893
|
+
npm run dev
|
|
894
|
+
|
|
895
|
+
# Complete build (NPM + Standalone)
|
|
896
|
+
npm run build
|
|
897
|
+
|
|
898
|
+
# Build only for NPM (without bundled React)
|
|
899
|
+
npm run build:npm
|
|
900
|
+
|
|
901
|
+
# Standalone build (with bundled React)
|
|
902
|
+
npm run build:standalone
|
|
903
|
+
|
|
904
|
+
# Lint
|
|
905
|
+
npm run lint
|
|
906
|
+
|
|
907
|
+
# Preview
|
|
908
|
+
npm run preview
|
|
909
|
+
```
|
|
910
|
+
|
|
911
|
+
### Generated file structure
|
|
912
|
+
|
|
913
|
+
```
|
|
914
|
+
dist/
|
|
915
|
+
├── tia-gpc.es.js # ESM build for NPM
|
|
916
|
+
├── tia-gpc.cjs.js # CommonJS build for NPM
|
|
917
|
+
├── tia-gpc.css # CSS for NPM build
|
|
918
|
+
├── tia-gpc-widget.standalone.js # Standalone build (IIFE with React)
|
|
919
|
+
└── tia-gpc-widget.standalone.css # CSS for standalone
|
|
920
|
+
```
|
|
921
|
+
|
|
922
|
+
### Which file to use?
|
|
923
|
+
|
|
924
|
+
| Environment | File to use |
|
|
925
|
+
|---------|----------------|
|
|
926
|
+
| React, Vue (with build system) | `tia-gpc.es.js` + `tia-gpc.css` |
|
|
927
|
+
| Node.js CommonJS | `tia-gpc.cjs.js` + `tia-gpc.css` |
|
|
928
|
+
| Plain HTML, Angular, ASP.NET, PHP | `tia-gpc-widget.standalone.js` + `tia-gpc-widget.standalone.css` |
|
|
929
|
+
|
|
930
|
+
---
|
|
931
|
+
|
|
932
|
+
## 📤 Publishing
|
|
933
|
+
|
|
934
|
+
### Publish to NPM (Public)
|
|
935
|
+
|
|
936
|
+
```bash
|
|
937
|
+
# 1. Login to NPM
|
|
938
|
+
npm login
|
|
939
|
+
|
|
940
|
+
# 2. Build the project
|
|
941
|
+
npm run build
|
|
942
|
+
|
|
943
|
+
# 3. Publish
|
|
944
|
+
npm publish
|
|
945
|
+
```
|
|
946
|
+
|
|
947
|
+
### Publish to Private NPM / GitLab Package Registry
|
|
948
|
+
|
|
949
|
+
#### Configure `.npmrc`
|
|
950
|
+
|
|
951
|
+
Create an `.npmrc` file in the project root:
|
|
952
|
+
|
|
953
|
+
```ini
|
|
954
|
+
# For GitLab Package Registry
|
|
955
|
+
@your-scope:registry=https://gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/
|
|
956
|
+
//gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/:_authToken=${CI_JOB_TOKEN}
|
|
957
|
+
```
|
|
958
|
+
|
|
959
|
+
#### Update `package.json`
|
|
960
|
+
|
|
961
|
+
```json
|
|
962
|
+
{
|
|
963
|
+
"name": "@your-scope/tia-gpc-widget",
|
|
964
|
+
"publishConfig": {
|
|
965
|
+
"@your-scope:registry": "https://gitlab.com/api/v4/projects/YOUR_PROJECT_ID/packages/npm/"
|
|
966
|
+
}
|
|
967
|
+
}
|
|
968
|
+
```
|
|
969
|
+
|
|
970
|
+
#### Publish
|
|
971
|
+
|
|
972
|
+
```bash
|
|
973
|
+
npm run build
|
|
974
|
+
npm publish
|
|
975
|
+
```
|
|
976
|
+
|
|
977
|
+
### CDN Distribution
|
|
978
|
+
|
|
979
|
+
After publishing to npm, your package is automatically available on these CDNs:
|
|
980
|
+
|
|
981
|
+
#### jsDelivr
|
|
982
|
+
```html
|
|
983
|
+
<script src="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
984
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
985
|
+
```
|
|
986
|
+
|
|
987
|
+
#### unpkg
|
|
988
|
+
```html
|
|
989
|
+
<script src="https://unpkg.com/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.js"></script>
|
|
990
|
+
<link rel="stylesheet" href="https://unpkg.com/tia-gpc-widget@1.0.6/dist/tia-gpc-widget.standalone.css">
|
|
991
|
+
```
|
|
992
|
+
|
|
993
|
+
**Note:** CDNs may take 5-10 minutes to sync after publishing to npm.
|
|
994
|
+
|
|
995
|
+
### Manual Distribution
|
|
996
|
+
|
|
997
|
+
Copy files from `dist/` to your web server:
|
|
998
|
+
|
|
999
|
+
```bash
|
|
1000
|
+
# Copy standalone files to server
|
|
1001
|
+
cp dist/tia-gpc-widget.standalone.* /var/www/html/assets/
|
|
1002
|
+
```
|
|
1003
|
+
|
|
1004
|
+
---
|
|
1005
|
+
|
|
1006
|
+
## 🔐 Getting a License Token
|
|
1007
|
+
|
|
1008
|
+
To use this widget you need a TIA GPC license token. Contact the TIA team to get your token:
|
|
1009
|
+
|
|
1010
|
+
- **Email**: support@tia.com
|
|
1011
|
+
- **Web**: https://tia.com/gpc
|
|
1012
|
+
|
|
1013
|
+
---
|
|
1014
|
+
|
|
1015
|
+
## 📊 Bundle Sizes
|
|
1016
|
+
|
|
1017
|
+
| File | Size (gzip) | Description |
|
|
1018
|
+
|---------|---------------|-------------|
|
|
1019
|
+
| `tia-gpc.es.js` | ~45 KB | NPM build (without React) |
|
|
1020
|
+
| `tia-gpc-widget.standalone.js` | ~180 KB | Standalone build (with React) |
|
|
1021
|
+
| `*.css` | ~15 KB | Styles |
|
|
1022
|
+
|
|
1023
|
+
The standalone bundle is larger because it includes React and all dependencies.
|
|
1024
|
+
|
|
1025
|
+
---
|
|
1026
|
+
|
|
1027
|
+
## 🐛 Troubleshooting
|
|
1028
|
+
|
|
1029
|
+
### Widget doesn't appear
|
|
1030
|
+
|
|
1031
|
+
1. Verify you included both files (JS and CSS)
|
|
1032
|
+
2. Check browser console for errors
|
|
1033
|
+
3. Make sure the token is valid
|
|
1034
|
+
|
|
1035
|
+
### Error: "customElements.define() called with incorrect arguments"
|
|
1036
|
+
|
|
1037
|
+
- In Angular: Add `CUSTOM_ELEMENTS_SCHEMA` to your module
|
|
1038
|
+
- In Vue: Configure `isCustomElement` in compiler options
|
|
1039
|
+
|
|
1040
|
+
### CSS Conflicts
|
|
1041
|
+
|
|
1042
|
+
The widget uses `gpc-` prefixes on all classes to avoid conflicts. If there are still issues, you can increase specificity:
|
|
1043
|
+
|
|
1044
|
+
```css
|
|
1045
|
+
.your-container tia-gpc-widget {
|
|
1046
|
+
/* your custom styles */
|
|
1047
|
+
}
|
|
1048
|
+
```
|
|
1049
|
+
|
|
1050
|
+
### React is not defined (in standalone build)
|
|
1051
|
+
|
|
1052
|
+
If you see this error, make sure you're using the `standalone.js` file and not the regular NPM build.
|
|
1053
|
+
|
|
1054
|
+
---
|
|
1055
|
+
|
|
1056
|
+
## 📝 License
|
|
1057
|
+
|
|
1058
|
+
UNLICENSED - Internal use by TIA
|
|
1059
|
+
|
|
1060
|
+
---
|
|
1061
|
+
|
|
1062
|
+
## 👥 Support
|
|
1063
|
+
|
|
1064
|
+
For technical support:
|
|
1065
|
+
|
|
1066
|
+
- **Email**: support@tia.com
|
|
1067
|
+
- **GitLab Issues**: https://gitlab.com/softia/tiagpc-frontend/issues
|
|
1068
|
+
- **Documentation**: This README
|
|
1069
|
+
|
|
1070
|
+
---
|
|
1071
|
+
|
|
1072
|
+
## 🚀 Changelog
|
|
1073
|
+
|
|
1074
|
+
### v1.0.6 (2025-01-11)
|
|
1075
|
+
|
|
1076
|
+
- ✨ Added CDN support via jsDelivr and unpkg
|
|
1077
|
+
- 📝 Updated documentation to English
|
|
1078
|
+
- 🔧 Added `unpkg` and `jsdelivr` fields to package.json
|
|
1079
|
+
|
|
1080
|
+
### v1.0.0 (2025-01-10)
|
|
1081
|
+
|
|
1082
|
+
- ✨ Initial release
|
|
1083
|
+
- ✅ React support
|
|
1084
|
+
- ✅ Standalone build for HTML/Angular/ASP.NET
|
|
1085
|
+
- ✅ Web Component API
|
|
1086
|
+
- ✅ Light/dark themes
|
|
1087
|
+
- ✅ Internationalization (ES/EN/FR)
|
|
1088
|
+
- ✅ Full customization
|
|
1089
|
+
|
|
1090
|
+
---
|
|
1091
|
+
|
|
1092
|
+
**Built with ❤️ by the TIA team**
|