@mahe_pkm/buzl-capi 0.1.2

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.
Files changed (20) hide show
  1. package/Buzl_GoogleAppsScript_Template.gs +948 -0
  2. package/CHANGELOG.md +83 -0
  3. package/LICENSE +21 -0
  4. package/README.md +253 -0
  5. package/assets/js/buzl-tracking.js +390 -0
  6. package/bin/cli.js +155 -0
  7. package/package.json +54 -0
  8. package/src/cli/terminal.js +388 -0
  9. package/src/core/injector.js +321 -0
  10. package/src/core/rollback.js +281 -0
  11. package/src/core/scanner.js +506 -0
  12. package/src/core/tester.js +357 -0
  13. package/src/gui/public/app.js +942 -0
  14. package/src/gui/public/index.html +634 -0
  15. package/src/gui/public/style.css +1130 -0
  16. package/src/gui/server.js +232 -0
  17. package/src/index.js +47 -0
  18. package/src/templates/GoogleAppsScript.gs +948 -0
  19. package/src/templates/buzl-tracking.js +475 -0
  20. package/src/templates/gtm-meta-snippets.js +149 -0
package/src/gui/public/index.html ADDED
@@ -0,0 +1,634 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BUZL - CAPI Suite — Enterprise Conversion API & Form Tracking</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
11
+ </head>
12
+ <body>
13
+ <!-- Inline SVG Vector Sprite: Official Brand Logos & Developer Precision Icons (100% SVG Only) -->
14
+ <svg class="svg-sprite" xmlns="http://www.w3.org/2000/svg" style="display: none;" aria-hidden="true">
15
+ <!-- Official Google Tag Manager Brand Logo -->
16
+ <symbol id="icon-brand-gtm" viewBox="0 0 24 24">
17
+ <path fill="#24C1E0" d="M12.913 0H3.348A3.348 3.348 0 0 0 0 3.348v17.304A3.348 3.348 0 0 0 3.348 24h17.304A3.348 3.348 0 0 0 24 20.652V11.087L12.913 0z"/>
18
+ <path fill="#4285F4" d="M12.913 0L24 11.087v9.565A3.348 3.348 0 0 1 20.652 24H9.565L20.652 12.913V3.348A3.348 3.348 0 0 0 17.304 0h-4.391z"/>
19
+ <circle fill="#FFFFFF" cx="14.935" cy="10.043" r="2.826"/>
20
+ <circle fill="#FFFFFF" cx="17.761" cy="17.174" r="1.087"/>
21
+ </symbol>
22
+
23
+ <!-- Official Meta Infinity Ribbon Brand Logo -->
24
+ <symbol id="icon-brand-meta" viewBox="0 0 24 24">
25
+ <path fill="#0081FB" d="M6.915 4.03C3.097 4.03 0 7.17 0 11.042c0 5.093 4.314 9.07 9.453 9.07 3.013 0 5.518-1.42 7.027-3.6 1.51 2.18 4.014 3.6 7.027 3.6 5.14 0 9.453-3.977 9.453-9.07 0-3.872-3.097-7.012-6.915-7.012-3.155 0-5.875 1.76-7.565 4.364C12.79 5.79 10.07 4.03 6.915 4.03zm0 2.82c2.083 0 3.93 1.258 5.085 3.195-1.155 1.936-3.002 3.194-5.085 3.194-2.316 0-4.195-1.905-4.195-4.229 0-2.324 1.88-4.16 4.195-4.16zm10.17 0c2.315 0 4.195 1.836 4.195 4.16 0 2.324-1.88 4.23-4.195 4.23-2.083 0-3.93-1.258-5.085-3.194 1.155-1.937 3.002-3.195 5.085-3.195z"/>
26
+ </symbol>
27
+
28
+ <!-- Official Buzl Emblem (Orbit & Constellation from buzl-logo.svg) -->
29
+ <symbol id="icon-brand-buzl" viewBox="40 70 450 440">
30
+ <path fill="#3B5FF5" d="M249.68,80.45C132.05,90.69,45.17,194.55,55.55,312.54,67.54,448.8,202.16,539,332.92,498.29c24.49-7.61,24.49-7.61,24.49-32.69v-4.83c2-30.15-5.38-57-28.64-77.67-5.91-5.24-4.67-8.09-.39-12.84,30.28-33.62,84.8-30.1,111.2,7,4.19,5.89,4.63,10.59.38,16.33-4.4,5.95-8.1,12.4-12.45,18.38-12.45,17.1-27.88,31.16-45,43.44-4.81,3.44-7.14,7.89-3.07,13.1,3.6,4.61,8.29,4.27,12.86,1,1-.76,2.12-1.47,3.16-2.23,53.4-39.53,83.63-92.52,88.2-158.44C492.86,175.83,382.62,68.89,249.68,80.45ZM453.16,364.8c-3.62-.53-4.7-4-6.72-6.16-36.74-39.77-98.42-38.55-133,3.06-4.2,5.06-7.2,6.28-13.52,3.76a78.11,78.11,0,0,0-43.7-4.46c-3.28.6-8.62-.8-9.19,4.31-.55,4.9,8.4,12.87,12.78,12.41,30.23-3.18,53.56,8.28,70.12,33.41,8.83,13.4,10.88,28.58,10.7,44.36-.26,23.47,0,23.47-23.12,29.2-82.44,20.49-168-13-213.77-83.24-3.91-6-4-10.57-.77-16.64,14.22-27,45-42.14,75.76-36.71,29.83,5.26,54.47,31.2,57.42,61.3,1.07,10.86.41,21.88.84,32.81.18,4.43-1.87,6.26-5.8,7.38-10.35,3-19.65.57-28.77-4.53-4.29-2.39-3.48-5.7-2.9-9.12A69.2,69.2,0,0,1,218,399.43a12.44,12.44,0,0,0-1.52-18.59c-2.71-2-4.07-.16-5.68,1.34-18.6,17.28-28.85,38.4-29.47,63.94a10.43,10.43,0,0,0,3.54,8.59c15.52,13.77,44.45,17,63,6.94,3.29-1.77,6.07-4,6-8-.23-16.4,1.53-32.91-1.06-49.19-5.74-36.09-32.16-64.52-66.55-72.44-35.51-8.17-71,5.41-92.78,35.49-1.26,1.74-2.5,3.5-4.52,6.35C51.43,289,77,192.21,150.61,136c70.94-54.13,171.78-52.61,242.73,4.08C467.65,199.46,482.27,296.27,453.16,364.8Z"/>
31
+ <circle cx="166" cy="273" r="23" fill="#3B5FF5"/>
32
+ <circle cx="269" cy="303" r="23" fill="#F59E0B"/>
33
+ <circle cx="373" cy="273" r="23" fill="#3B5FF5"/>
34
+ </symbol>
35
+
36
+ <!-- Official Google Sheets Document & Grid Brand Logo -->
37
+ <symbol id="icon-brand-sheets" viewBox="0 0 24 24">
38
+ <path fill="#0F9D58" d="M14.5 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V7.5L14.5 2z"/>
39
+ <path fill="#87CEAB" d="M14 2v6h6L14 2z"/>
40
+ <path fill="#FFFFFF" d="M7 11h10v2H7zm0 3h10v2H7zm0-6h5v2H7z"/>
41
+ <path fill="#0B8043" d="M17 11h-3v5h3v-5zm-5 0H9v5h3v-5z" opacity="0.3"/>
42
+ </symbol>
43
+
44
+ <!-- Official Zoho Corporate 4-Tile Brand Logo -->
45
+ <symbol id="icon-brand-zoho" viewBox="0 0 24 24">
46
+ <rect x="2" y="3" width="8.5" height="8.5" rx="1.5" fill="#E53935"/>
47
+ <path d="M4.5 5.2h3.5L5.2 9.3h2.8" stroke="#FFFFFF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
48
+ <rect x="13.5" y="3" width="8.5" height="8.5" rx="1.5" fill="#43A047"/>
49
+ <circle cx="17.75" cy="7.25" r="2" stroke="#FFFFFF" stroke-width="1.2" fill="none"/>
50
+ <rect x="2" y="12.5" width="8.5" height="8.5" rx="1.5" fill="#1E88E5"/>
51
+ <path d="M4.8 14.5v4.5M7.7 14.5v4.5M4.8 16.7h2.9" stroke="#FFFFFF" stroke-width="1.2" stroke-linecap="round" fill="none"/>
52
+ <rect x="13.5" y="12.5" width="8.5" height="8.5" rx="1.5" fill="#FDD835"/>
53
+ <circle cx="17.75" cy="16.75" r="2" stroke="#FFFFFF" stroke-width="1.2" fill="none"/>
54
+ </symbol>
55
+
56
+ <!-- Official WhatsApp Brand Logo -->
57
+ <symbol id="icon-brand-whatsapp" viewBox="0 0 24 24">
58
+ <circle cx="12" cy="12" r="11" fill="#25D366"/>
59
+ <path fill="#FFFFFF" d="M17.472 14.382c-.301-.15-1.782-.879-2.058-.979-.276-.1-.476-.15-.677.15-.201.3-.777.979-.953 1.18-.175.2-.351.225-.652.075-.301-.15-1.272-.469-2.423-1.496-.895-.798-1.5-1.784-1.676-2.085-.175-.301-.019-.464.132-.614.136-.135.301-.351.452-.527.15-.175.201-.301.301-.501.101-.2.051-.376-.025-.526-.075-.15-.677-1.631-.928-2.233-.244-.587-.493-.507-.677-.517-.175-.01-.376-.01-.577-.01-.201 0-.527.075-.803.376-.276.301-1.054 1.03-1.054 2.512s1.079 2.913 1.23 3.114c.15.2 2.124 3.243 5.145 4.549.719.311 1.28.497 1.718.636.722.23 1.378.197 1.898.12.58-.087 1.782-.728 2.033-1.431.251-.703.251-1.305.176-1.431-.076-.126-.276-.201-.577-.351"/>
60
+ </symbol>
61
+
62
+ <!-- Developer Precision Action Icons -->
63
+ <symbol id="icon-clipboard" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
64
+ <rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M9 12h6"/><path d="M9 16h6"/>
65
+ </symbol>
66
+ <symbol id="icon-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
67
+ <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
68
+ </symbol>
69
+ <symbol id="icon-shield-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
70
+ <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/>
71
+ </symbol>
72
+ <symbol id="icon-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
73
+ <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/>
74
+ </symbol>
75
+ <symbol id="icon-database" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
76
+ <ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
77
+ </symbol>
78
+ <symbol id="icon-trash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
79
+ <path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>
80
+ </symbol>
81
+ <symbol id="icon-refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
82
+ <path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/>
83
+ </symbol>
84
+ <symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
85
+ <polyline points="20 6 9 17 4 12"/>
86
+ </symbol>
87
+ <symbol id="icon-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
88
+ <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
89
+ </symbol>
90
+ <symbol id="icon-pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
91
+ <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
92
+ </symbol>
93
+ </svg>
94
+
95
+ <div class="app-container">
96
+ <!-- Hero Header with Buzl Branding -->
97
+ <header class="header">
98
+ <div class="header-content">
99
+ <div class="brand">
100
+ <div class="brand-code-badge">
101
+ <svg class="brand-logo-svg"><use href="#icon-brand-buzl"/></svg>
102
+ <span class="code-buzl">BUZL</span>
103
+ <span class="code-divider">—</span>
104
+ <span class="code-capi">CAPI</span>
105
+ </div>
106
+ <div class="brand-titles">
107
+ <div class="brand-headline">
108
+ <h1>Enterprise Conversions API &amp; Multi-Channel Dispatcher</h1>
109
+ <span class="version-badge">v1.0.0</span>
110
+ </div>
111
+ <p class="subtitle">Automated GTM, Meta CAPI, Google Sheets CRM &amp; Zoho Web-to-Lead with Self-Testing</p>
112
+ </div>
113
+ </div>
114
+ <div class="header-actions">
115
+ <button type="button" id="btnOpenBackups" class="btn btn-secondary">
116
+ <svg class="icon-sm"><use href="#icon-database"/></svg>
117
+ <span>Snapshots (<span id="backupsCountBadge">0</span>)</span>
118
+ </button>
119
+ <button type="button" id="btnUninstallTracking" class="btn btn-danger-outline">
120
+ <svg class="icon-sm"><use href="#icon-trash"/></svg>
121
+ <span>Cleanly Remove All Tracking</span>
122
+ </button>
123
+ <button type="button" id="btnScan" class="btn btn-outline">
124
+ <svg class="icon-sm"><use href="#icon-refresh"/></svg>
125
+ <span>Refresh Scan</span>
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </header>
130
+
131
+ <!-- Live Site Status & Service Matrix -->
132
+ <div class="live-state-bar" id="liveStateBar">
133
+ <div class="live-state-header">
134
+ <div class="live-title-group">
135
+ <span class="live-pulse"></span>
136
+ <span class="live-title">TARGET PROJECT:</span>
137
+ <span id="liveStateRootDir" class="live-state-path">Scanning codebase...</span>
138
+ </div>
139
+ <div class="live-meta-badges">
140
+ <span id="siteLocationBadge" class="badge badge-neutral"><svg class="icon-xs"><use href="#icon-pin"/></svg> <span>Location: Detecting...</span></span>
141
+ <span id="fileBadge" class="badge badge-info">Scanning...</span>
142
+ </div>
143
+ </div>
144
+ <div class="live-matrix-container">
145
+ <span class="matrix-label">LIVE SERVICE MATRIX:</span>
146
+ <div class="live-state-chips" id="liveStateChips">
147
+ <span class="chip chip-loading">Checking GTM...</span>
148
+ <span class="chip chip-loading">Checking Meta Pixel...</span>
149
+ <span class="chip chip-loading">Checking Buzl CAPI...</span>
150
+ <span class="chip chip-loading">Checking Google Sheets...</span>
151
+ <span class="chip chip-loading">Checking Zoho CRM...</span>
152
+ <span class="chip chip-loading">Checking WhatsApp...</span>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Main Grid: Left = Services Config, Right = Testing & Verification -->
158
+ <main class="main-grid">
159
+ <!-- Left Column: Services Configuration Grid -->
160
+ <section class="config-panel">
161
+ <div class="panel-header">
162
+ <h2><svg class="icon-sm" style="color:var(--brand-blue)"><use href="#icon-brand-buzl"/></svg> Tracking Services &amp; Destinations</h2>
163
+ <span class="panel-sub">Configure active channels with 1-click surgical remove</span>
164
+ </div>
165
+
166
+ <form id="trackingForm">
167
+ <div class="services-grid">
168
+ <!-- Card 1: GTM -->
169
+ <div class="card service-card" id="cardGtm">
170
+ <div class="card-header">
171
+ <div class="card-title">
172
+ <div class="card-icon-badge badge-gtm">
173
+ <svg class="brand-icon"><use href="#icon-brand-gtm"/></svg>
174
+ </div>
175
+ <h3>Google Tag Manager</h3>
176
+ </div>
177
+ <div class="card-header-actions">
178
+ <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveGtm" data-service="gtm" title="Remove GTM from site">
179
+ <svg class="icon-xs"><use href="#icon-trash"/></svg>
180
+ <span>Remove GTM</span>
181
+ </button>
182
+ <label class="switch">
183
+ <input type="checkbox" id="enableGTM">
184
+ <span class="slider"></span>
185
+ </label>
186
+ </div>
187
+ </div>
188
+ <div class="card-body" id="gtmSection">
189
+ <div class="form-group">
190
+ <label for="gtmId">GTM Container ID</label>
191
+ <input type="text" id="gtmId" placeholder="e.g. GTM-TRF9ZHHH" value="">
192
+ <small class="helper-text">Inserts &lt;head&gt; script and &lt;body&gt; &lt;noscript&gt; fallback iframe.</small>
193
+ </div>
194
+ <div class="checkbox-group">
195
+ <label>
196
+ <input type="checkbox" id="enableDeferred" checked>
197
+ <span>Deferred Loading (Speed &amp; Core Web Vitals)</span>
198
+ </label>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Card 2: Meta Pixel & Client CAPI -->
204
+ <div class="card service-card" id="cardMeta">
205
+ <div class="card-header">
206
+ <div class="card-title">
207
+ <div class="card-icon-badge badge-meta">
208
+ <svg class="brand-icon"><use href="#icon-brand-meta"/></svg>
209
+ </div>
210
+ <h3>Meta Pixel</h3>
211
+ </div>
212
+ <div class="card-header-actions">
213
+ <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveMeta" data-service="meta" title="Remove Meta Pixel from site">
214
+ <svg class="icon-xs"><use href="#icon-trash"/></svg>
215
+ <span>Remove Meta</span>
216
+ </button>
217
+ <label class="switch">
218
+ <input type="checkbox" id="enableMeta">
219
+ <span class="slider"></span>
220
+ </label>
221
+ </div>
222
+ </div>
223
+ <div class="card-body" id="metaSection">
224
+ <div class="form-group">
225
+ <label for="metaPixelId">Meta Pixel ID</label>
226
+ <input type="text" id="metaPixelId" placeholder="e.g. 2203084510484531" value="">
227
+ <small class="helper-text">Initializes fbq; deduplicates client events with server CAPI via leadId.</small>
228
+ </div>
229
+ <div class="checkbox-group">
230
+ <label>
231
+ <input type="checkbox" id="trackMetaLead">
232
+ <span>Track standard 'Lead' event alongside 'formSubmitted'</span>
233
+ </label>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Card 3: Buzl CAPI (Server-Side Facebook Leads) -->
239
+ <div class="card service-card" id="cardCapi">
240
+ <div class="card-header">
241
+ <div class="card-title">
242
+ <div class="card-icon-badge badge-buzl">
243
+ <svg class="brand-icon"><use href="#icon-brand-buzl"/></svg>
244
+ </div>
245
+ <h3>Buzl CAPI (Server-Side Meta)</h3>
246
+ </div>
247
+ <div class="card-header-actions">
248
+ <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveCapi" data-service="capi" title="Remove Buzl CAPI from site">
249
+ <svg class="icon-xs"><use href="#icon-trash"/></svg>
250
+ <span>Remove CAPI</span>
251
+ </button>
252
+ <label class="switch">
253
+ <input type="checkbox" id="enableBuzlCapi">
254
+ <span class="slider"></span>
255
+ </label>
256
+ </div>
257
+ </div>
258
+ <div class="card-body" id="buzlCapiSection">
259
+ <div class="form-group">
260
+ <label for="buzlCapiEndpoint">Buzl CAPI Endpoint</label>
261
+ <input type="url" id="buzlCapiEndpoint" value="https://dev.api.gobuzl.com/api/leads">
262
+ <small class="helper-text">Dispatches server-side conversions to Meta CAPI with deduplicated leadId.</small>
263
+ </div>
264
+ <div class="form-row">
265
+ <div class="form-group">
266
+ <label for="buzlCapiUser">authUser</label>
267
+ <input type="text" id="buzlCapiUser" placeholder="Paste authUser">
268
+ </div>
269
+ <div class="form-group">
270
+ <label for="buzlCapiPass">authPass</label>
271
+ <input type="password" id="buzlCapiPass" placeholder="Paste authPass">
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Card 4: Google Sheets Direct CRM -->
278
+ <div class="card service-card" id="cardSheets">
279
+ <div class="card-header">
280
+ <div class="card-title">
281
+ <div class="card-icon-badge badge-sheets">
282
+ <svg class="brand-icon"><use href="#icon-brand-sheets"/></svg>
283
+ </div>
284
+ <h3>Google Sheets Direct CRM</h3>
285
+ </div>
286
+ <div class="card-header-actions">
287
+ <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveSheets" data-service="sheets" title="Remove Google Sheets CRM from site">
288
+ <svg class="icon-xs"><use href="#icon-trash"/></svg>
289
+ <span>Remove Sheets</span>
290
+ </button>
291
+ <label class="switch">
292
+ <input type="checkbox" id="enableSheets">
293
+ <span class="slider"></span>
294
+ </label>
295
+ </div>
296
+ </div>
297
+ <div class="card-body" id="sheetsSection">
298
+ <div class="form-group">
299
+ <div class="label-row">
300
+ <label for="googleSheetUrl">Apps Script Web App URL</label>
301
+ <a href="#" id="openScriptModal" class="link-btn"><svg class="icon-xs"><use href="#icon-clipboard"/></svg> View Script Code</a>
302
+ </div>
303
+ <input type="url" id="googleSheetUrl" placeholder="https://script.google.com/macros/s/.../exec">
304
+ <small class="helper-text">Writes lead submissions to CRM tabs. Deploy as Web app with <strong>Who has access: Anyone</strong> (URL must end in <code>/exec</code>).</small>
305
+ </div>
306
+ <div class="form-group">
307
+ <label for="siteLocation">Default Site Location (Fallback for Column B)</label>
308
+ <input type="text" id="siteLocation" placeholder="Auto-detected from site or enter location">
309
+ <small class="helper-text">Auto-detected from metadata. Fills Column B if forms omit location.</small>
310
+ </div>
311
+
312
+ <!-- Collapsible Sheet Layout Preview Drawer (Clean & Non-Clumsy) -->
313
+ <details class="sheet-preview-drawer" id="sheetPreviewDrawer">
314
+ <summary class="drawer-summary">
315
+ <span><svg class="icon-xs" style="margin-right: 4px;"><use href="#icon-brand-sheets"/></svg> View Sheet Column Hierarchy &amp; Multi-Tab Engine</span>
316
+ <span class="badge badge-info">Preview &amp; Fields</span>
317
+ </summary>
318
+ <div class="drawer-content">
319
+ <p class="helper-text" style="margin-bottom: 8px;">Columns placed directly next to Phone in form order, followed by CRM qualification and attribution:</p>
320
+ <div id="columnHierarchyPreview" class="column-hierarchy-preview"></div>
321
+
322
+ <div style="margin-top: 12px;">
323
+ <label style="font-weight: 600; font-size: 12px; margin-bottom: 6px; display: block;">Discovered Form Fields:</label>
324
+ <div id="dynamicFieldsChecklist" class="dynamic-fields-checklist">
325
+ <span class="helper-text">Scanning forms...</span>
326
+ </div>
327
+ </div>
328
+
329
+ <div style="margin-top: 12px;">
330
+ <label style="font-weight: 600; font-size: 12px; margin-bottom: 4px; display: block;">Automated CRM Multi-Tab Views:</label>
331
+ <div class="crm-tabs-preview">
332
+ <span class="tab-pill tab-pill-master">All Leads (Master)</span>
333
+ <span class="tab-pill tab-pill-new">New</span>
334
+ <span class="tab-pill tab-pill-contacted">Contacted</span>
335
+ <span class="tab-pill tab-pill-qualified">Qualified</span>
336
+ <span class="tab-pill tab-pill-converted">Converted</span>
337
+ <span class="tab-pill tab-pill-spam">Spam</span>
338
+ <span class="tab-pill tab-pill-test">Test</span>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </details>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Card 5: Zoho CRM -->
347
+ <div class="card service-card" id="cardZoho">
348
+ <div class="card-header">
349
+ <div class="card-title">
350
+ <div class="card-icon-badge badge-zoho">
351
+ <svg class="brand-icon"><use href="#icon-brand-zoho"/></svg>
352
+ </div>
353
+ <h3>Zoho CRM Web-to-Lead</h3>
354
+ </div>
355
+ <div class="card-header-actions">
356
+ <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveZoho" data-service="zoho" title="Remove Zoho CRM from site">
357
+ <svg class="icon-xs"><use href="#icon-trash"/></svg>
358
+ <span>Remove Zoho</span>
359
+ </button>
360
+ <label class="switch">
361
+ <input type="checkbox" id="enableZoho">
362
+ <span class="slider"></span>
363
+ </label>
364
+ </div>
365
+ </div>
366
+ <div class="card-body" id="zohoSection">
367
+ <div class="form-row">
368
+ <div class="form-group">
369
+ <label for="zohoXnqsjsdp">Zoho Form ID (xnQsjsdp) <span class="req">*</span></label>
370
+ <input type="text" id="zohoXnqsjsdp" placeholder="Paste xnQsjsdp token">
371
+ <small class="helper-text">Required to activate Zoho CRM.</small>
372
+ </div>
373
+ <div class="form-group">
374
+ <label for="zohoXmiwtld">xmIwtLD (Optional)</label>
375
+ <input type="text" id="zohoXmiwtld" placeholder="Paste xmIwtLD token">
376
+ </div>
377
+ </div>
378
+ <div class="form-group">
379
+ <label for="zohoEndpoint">Zoho Data Center</label>
380
+ <select id="zohoEndpoint">
381
+ <option value="https://crm.zoho.in/crm/WebToLeadForm">India (crm.zoho.in)</option>
382
+ <option value="https://crm.zoho.com/crm/WebToLeadForm">US / Global (crm.zoho.com)</option>
383
+ <option value="https://crm.zoho.eu/crm/WebToLeadForm">Europe (crm.zoho.eu)</option>
384
+ </select>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <!-- Card 6: WhatsApp Redirection -->
390
+ <div class="card service-card" id="cardWhatsapp">
391
+ <div class="card-header">
392
+ <div class="card-title">
393
+ <div class="card-icon-badge badge-whatsapp">
394
+ <svg class="brand-icon"><use href="#icon-brand-whatsapp"/></svg>
395
+ </div>
396
+ <h3>WhatsApp Handoff</h3>
397
+ </div>
398
+ <div class="card-header-actions">
399
+ <button type="button" class="btn btn-xs btn-remove-service hidden" id="btnRemoveWhatsapp" data-service="whatsapp" title="Remove WhatsApp from site">
400
+ <svg class="icon-xs"><use href="#icon-trash"/></svg>
401
+ <span>Remove WA</span>
402
+ </button>
403
+ <label class="switch">
404
+ <input type="checkbox" id="enableWhatsapp">
405
+ <span class="slider"></span>
406
+ </label>
407
+ </div>
408
+ </div>
409
+ <div class="card-body" id="whatsappSection">
410
+ <div class="form-group">
411
+ <div style="display: flex; justify-content: space-between; align-items: center;">
412
+ <label for="whatsappNumber">WhatsApp Business Number</label>
413
+ <span id="waDetectedBadge" class="badge badge-success hidden" style="font-size: 10px; cursor: pointer;" title="Click to use auto-detected number"><svg class="icon-xs"><use href="#icon-check"/></svg> Auto-detected</span>
414
+ </div>
415
+ <input type="text" id="whatsappNumber" placeholder="e.g. 918310755474">
416
+ <small class="helper-text" id="waHelperText">Auto-fetches from form buttons on submit, or specify fallback number.</small>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+
422
+ <!-- Submit Button -->
423
+ <div class="action-footer">
424
+ <button type="submit" id="btnSubmit" class="btn btn-primary btn-large">
425
+ <svg class="icon-sm"><use href="#icon-brand-buzl"/></svg>
426
+ <span>Apply Configuration &amp; Run Automated Tests</span>
427
+ </button>
428
+ </div>
429
+ </form>
430
+ </section>
431
+
432
+ <!-- Right Column: Form Testing & Verification Console -->
433
+ <section class="status-panel">
434
+ <div class="panel-header">
435
+ <h2><svg class="icon-sm" style="color:var(--brand-blue)"><use href="#icon-shield-check"/></svg> Testing &amp; Verification Console</h2>
436
+ <span class="panel-sub">Test individual forms &amp; verify live payload delivery</span>
437
+ </div>
438
+
439
+ <!-- Discovered Forms & Per-Form Runner -->
440
+ <div class="card">
441
+ <div class="card-header">
442
+ <div class="card-title">
443
+ <div class="card-icon-badge badge-forms">
444
+ <svg class="brand-icon"><use href="#icon-clipboard"/></svg>
445
+ </div>
446
+ <h3>Discovered Site Forms</h3>
447
+ </div>
448
+ <span id="formsCountBadge" class="badge badge-info">Scanning forms...</span>
449
+ </div>
450
+ <div class="card-body">
451
+ <p class="helper-text" style="margin-bottom: 12px;">Test each discovered form independently with inputs tailored to its exact markup:</p>
452
+ <div id="individualFormsList" class="individual-forms-list">
453
+ <p class="empty-state">Loading discovered forms...</p>
454
+ </div>
455
+ </div>
456
+ </div>
457
+
458
+ <!-- Quick Multi-Channel Test Lead -->
459
+ <div class="card">
460
+ <div class="card-header">
461
+ <div class="card-title">
462
+ <div class="card-icon-badge badge-quick">
463
+ <svg class="brand-icon"><use href="#icon-send"/></svg>
464
+ </div>
465
+ <h3>Quick Multi-Channel Lead Dispatch</h3>
466
+ </div>
467
+ <span id="liveTestBadge" class="badge badge-neutral">Ready</span>
468
+ </div>
469
+ <div class="card-body">
470
+ <div class="form-row">
471
+ <div class="form-group">
472
+ <label for="testLeadPhone">Phone Number</label>
473
+ <input type="text" id="testLeadPhone" placeholder="Auto-detected or enter phone">
474
+ </div>
475
+ <div class="form-group">
476
+ <label for="testLeadName">Full Name</label>
477
+ <input type="text" id="testLeadName" value="Test Lead">
478
+ </div>
479
+ </div>
480
+ <div class="form-group" style="margin-top: 8px;">
481
+ <label for="testLeadService">Service / Inquiry</label>
482
+ <input type="text" id="testLeadService" placeholder="Auto-detected or enter inquiry">
483
+ </div>
484
+ <button type="button" id="btnTestSubmit" class="btn btn-primary" style="width: 100%; margin-top: 12px;">
485
+ <svg class="icon-sm"><use href="#icon-send"/></svg>
486
+ <span>Dispatch Quick Live Test Lead</span>
487
+ </button>
488
+ <div id="testDispatchResults" class="test-dispatch-results hidden" style="margin-top: 12px;"></div>
489
+ </div>
490
+ </div>
491
+
492
+ <!-- Live Self-Test Verification Report -->
493
+ <div class="card test-card">
494
+ <div class="card-header">
495
+ <div class="card-title">
496
+ <div class="card-icon-badge badge-verify">
497
+ <svg class="brand-icon"><use href="#icon-shield-check"/></svg>
498
+ </div>
499
+ <h3>Automated Verification Report</h3>
500
+ </div>
501
+ <span id="testSummaryBadge" class="badge badge-neutral">Awaiting Run</span>
502
+ </div>
503
+ <div class="card-body">
504
+ <div id="testConsole" class="test-console">
505
+ <p class="empty-state">Click "Apply Configuration" to inject tracking and run automated checks.</p>
506
+ </div>
507
+ </div>
508
+ </div>
509
+
510
+ <!-- Discovered Files Inspector (Collapsible) -->
511
+ <details class="card discovered-files-card">
512
+ <summary class="card-header" style="cursor: pointer; list-style: none;">
513
+ <div class="card-title">
514
+ <div class="card-icon-badge badge-neutral">
515
+ <svg class="brand-icon"><use href="#icon-folder"/></svg>
516
+ </div>
517
+ <h3>Discovered Project Files</h3>
518
+ </div>
519
+ <span class="badge badge-neutral">Toggle Files</span>
520
+ </summary>
521
+ <div class="card-body file-list-container">
522
+ <ul id="fileList" class="file-list"></ul>
523
+ </div>
524
+ </details>
525
+ </section>
526
+ </main>
527
+ </div>
528
+
529
+ <!-- Backups Management Modal -->
530
+ <div id="backupsModal" class="modal hidden">
531
+ <div class="modal-backdrop"></div>
532
+ <div class="modal-content modal-large">
533
+ <div class="modal-header">
534
+ <div class="card-title">
535
+ <div class="card-icon-badge badge-buzl">
536
+ <svg class="brand-icon"><use href="#icon-database"/></svg>
537
+ </div>
538
+ <h3>Project Snapshots &amp; Point-in-Time Restore</h3>
539
+ </div>
540
+ <button id="closeBackupsModal" class="close-btn">&times;</button>
541
+ </div>
542
+ <div class="modal-body">
543
+ <div class="create-backup-box">
544
+ <label for="customBackupName"><strong>Create New Named Snapshot:</strong></label>
545
+ <div class="input-with-button" style="display: flex; gap: 8px; margin-top: 6px;">
546
+ <input type="text" id="customBackupName" placeholder="e.g. Pre-launch checkpoint, Pristine baseline">
547
+ <button type="button" id="btnCreateNamedBackup" class="btn btn-primary" style="white-space: nowrap;">
548
+ <svg class="icon-sm"><use href="#icon-database"/></svg>
549
+ <span>Save Snapshot</span>
550
+ </button>
551
+ </div>
552
+ </div>
553
+
554
+ <h4 style="margin: 20px 0 10px 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted);">Saved Snapshots on Disk:</h4>
555
+ <div class="backups-table-container">
556
+ <table class="backups-table" id="backupsTable">
557
+ <thead>
558
+ <tr>
559
+ <th>Snapshot Name</th>
560
+ <th>Directory</th>
561
+ <th>Timestamp</th>
562
+ <th>Files</th>
563
+ <th>Actions</th>
564
+ </tr>
565
+ </thead>
566
+ <tbody id="backupsTableBody">
567
+ <tr><td colspan="5" style="text-align: center; color: var(--text-muted);">Loading backups...</td></tr>
568
+ </tbody>
569
+ </table>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ </div>
574
+
575
+ <!-- Clean Uninstall Confirmation Modal -->
576
+ <div id="uninstallModal" class="modal hidden">
577
+ <div class="modal-backdrop"></div>
578
+ <div class="modal-content modal-small">
579
+ <div class="modal-header">
580
+ <div class="card-title">
581
+ <div class="card-icon-badge badge-danger">
582
+ <svg class="brand-icon" style="stroke: var(--danger);"><use href="#icon-trash"/></svg>
583
+ </div>
584
+ <h3>Cleanly Remove All Tracking</h3>
585
+ </div>
586
+ <button id="closeUninstallModal" class="close-btn">&times;</button>
587
+ </div>
588
+ <div class="modal-body">
589
+ <p style="margin-bottom: 14px; font-size: 13px; line-height: 1.5; color: #cbd5e1;">This will cleanly strip all GTM, Meta Pixel, Buzl CAPI, and runtime scripts from your HTML files without breaking your website. An automatic safety backup will be created before removal.</p>
590
+ <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;">
591
+ <button type="button" id="btnCancelUninstall" class="btn btn-secondary">Cancel</button>
592
+ <button type="button" id="btnConfirmUninstall" class="btn btn-danger">
593
+ <svg class="icon-xs"><use href="#icon-trash"/></svg>
594
+ <span>Confirm &amp; Remove All Tracking</span>
595
+ </button>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ </div>
600
+
601
+ <!-- Apps Script Modal -->
602
+ <div id="scriptModal" class="modal hidden">
603
+ <div class="modal-backdrop"></div>
604
+ <div class="modal-content">
605
+ <div class="modal-header">
606
+ <h3>Google Apps Script Code for Google Sheets</h3>
607
+ <button id="closeScriptModal" class="close-btn">&times;</button>
608
+ </div>
609
+ <div class="modal-body">
610
+ <p>Follow these quick steps in Google Sheets to activate the CRM &amp; Multi-Tab Engine:</p>
611
+ <ol>
612
+ <li>Open your target Google Sheet &gt; <strong>Extensions &gt; Apps Script</strong>.</li>
613
+ <li>Paste the code below &amp; click <strong>Save</strong> (Ctrl+S).</li>
614
+ <li>Click the blue <strong>Deploy</strong> button (top right) &gt; <strong>New deployment</strong> (or <em>Manage deployments &gt; New version</em> if updating).</li>
615
+ <li>Select type: <strong>Web app</strong>.</li>
616
+ <li>Set <strong>Execute as</strong>: <code>Me (your Google email)</code>.</li>
617
+ <li>Set <strong>Who has access</strong>: <code>Anyone</code> <span style="color:var(--danger); font-weight:600;">(Critical: required for website leads)</span>.</li>
618
+ <li>Click <strong>Deploy</strong>, authorize access, copy the <code>/exec</code> URL, and paste it into the field above!</li>
619
+ <li>Refresh your Google Sheet and click <strong>⚡ Buzl Lead CRM &gt; ⚡ Initialize &amp; Upgrade All CRM Tabs</strong> to automatically create all 6 status tabs with real-time dynamic filters!</li>
620
+ </ol>
621
+ <div class="code-container">
622
+ <button id="copyScriptCode" class="copy-btn">
623
+ <svg class="icon-xs"><use href="#icon-clipboard"/></svg>
624
+ <span>Copy Code</span>
625
+ </button>
626
+ <pre><code id="scriptCodeDisplay">Loading script...</code></pre>
627
+ </div>
628
+ </div>
629
+ </div>
630
+ </div>
631
+
632
+ <script src="app.js"></script>
633
+ </body>
634
+ </html>