@getcredify/credify-insurance-widget 0.2.0 → 1.0.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.
- package/README.md +72 -3
- package/dist/credify-insurance-widget.css +1 -1
- package/dist/iframe/assets/iframe-9ThFCPgT.js +50 -0
- package/dist/iframe/assets/iframe-9ThFCPgT.js.map +1 -0
- package/dist/iframe/assets/iframe-CBKvQTJa.css +1 -0
- package/dist/iframe/iframe.html +2 -2
- package/dist/index.es.js +6849 -22410
- package/dist/index.es.js.map +1 -1
- package/dist/index.html +222 -0
- package/dist/index.umd.js +12 -250
- package/dist/index.umd.js.map +1 -1
- package/package.json +9 -4
- package/dist/iframe/assets/iframe-CdIFAJCC.js +0 -50
- package/dist/iframe/assets/iframe-CdIFAJCC.js.map +0 -1
- package/dist/iframe/assets/iframe-Gf3vTC2Z.css +0 -1
package/dist/index.html
ADDED
|
@@ -0,0 +1,222 @@
|
|
|
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>Credify Insurance Widget</title>
|
|
7
|
+
<!-- Load React and ReactDOM (required peer dependencies) -->
|
|
8
|
+
<!-- Note: React 19 doesn't have UMD builds, so we use ESM and expose as globals -->
|
|
9
|
+
<script type="module">
|
|
10
|
+
// Import React 19 as ESM modules - use exact same version for both
|
|
11
|
+
import React from 'https://esm.sh/react@19.1.1';
|
|
12
|
+
import ReactDOM from 'https://esm.sh/react-dom@19.1.1';
|
|
13
|
+
|
|
14
|
+
// Expose as globals for the UMD widget build
|
|
15
|
+
window.React = React;
|
|
16
|
+
window.ReactDOM = ReactDOM;
|
|
17
|
+
|
|
18
|
+
// Load the widget script after React is available
|
|
19
|
+
const script = document.createElement('script');
|
|
20
|
+
script.src = '/index.umd.js';
|
|
21
|
+
|
|
22
|
+
// Dispatch event when widget script loads
|
|
23
|
+
script.onload = () => {
|
|
24
|
+
window.dispatchEvent(new Event('widget-loaded'));
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
script.onerror = (error) => {
|
|
28
|
+
console.error('Failed to load widget script:', error);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
document.head.appendChild(script);
|
|
32
|
+
</script>
|
|
33
|
+
<link rel="stylesheet" href="/credify-insurance-widget.css" />
|
|
34
|
+
<style>
|
|
35
|
+
* {
|
|
36
|
+
box-sizing: border-box;
|
|
37
|
+
}
|
|
38
|
+
html,
|
|
39
|
+
body {
|
|
40
|
+
margin: 0 !important;
|
|
41
|
+
padding: 0 !important;
|
|
42
|
+
width: 100% !important;
|
|
43
|
+
height: 100% !important;
|
|
44
|
+
}
|
|
45
|
+
body {
|
|
46
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
47
|
+
background: #f5f5f5;
|
|
48
|
+
display: flex !important;
|
|
49
|
+
align-items: center !important;
|
|
50
|
+
justify-content: center !important;
|
|
51
|
+
min-height: 100vh !important;
|
|
52
|
+
}
|
|
53
|
+
.container {
|
|
54
|
+
width: 100% !important;
|
|
55
|
+
display: flex !important;
|
|
56
|
+
align-items: center !important;
|
|
57
|
+
justify-content: center !important;
|
|
58
|
+
margin: 0 !important;
|
|
59
|
+
padding: 0 !important;
|
|
60
|
+
min-height: 100vh !important;
|
|
61
|
+
}
|
|
62
|
+
#insurance-widget-root {
|
|
63
|
+
position: relative;
|
|
64
|
+
z-index: 9999;
|
|
65
|
+
}
|
|
66
|
+
.quote-btn {
|
|
67
|
+
padding: 16px 32px;
|
|
68
|
+
font-size: 18px;
|
|
69
|
+
font-weight: 600;
|
|
70
|
+
color: white;
|
|
71
|
+
background: #111827;
|
|
72
|
+
border: none;
|
|
73
|
+
border-radius: 8px;
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
transition: background 0.2s;
|
|
76
|
+
flex-shrink: 0;
|
|
77
|
+
}
|
|
78
|
+
.quote-btn:hover {
|
|
79
|
+
background: #1f2937;
|
|
80
|
+
}
|
|
81
|
+
</style>
|
|
82
|
+
</head>
|
|
83
|
+
<body>
|
|
84
|
+
<div class="container" style="flex-direction: column; padding: 48px 24px">
|
|
85
|
+
<div
|
|
86
|
+
style="
|
|
87
|
+
max-width: 896px;
|
|
88
|
+
width: 100%;
|
|
89
|
+
background: white;
|
|
90
|
+
border-radius: 16px;
|
|
91
|
+
box-shadow:
|
|
92
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
93
|
+
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
94
|
+
padding: 32px;
|
|
95
|
+
margin-bottom: 32px;
|
|
96
|
+
"
|
|
97
|
+
>
|
|
98
|
+
<h1 style="font-size: 30px; font-weight: 700; color: #111827; margin: 0 0 16px 0; line-height: 1.2">Credify Insurance Widget</h1>
|
|
99
|
+
<p style="font-size: 18px; color: #374151; margin: 0 0 24px 0; line-height: 1.6">
|
|
100
|
+
An insurance quote widget that can be embedded in your application via script tag, iframe, or npm package. The widget provides a seamless,
|
|
101
|
+
multi-stage form experience for quoting home and auto insurance.
|
|
102
|
+
</p>
|
|
103
|
+
|
|
104
|
+
<div style="border-top: 1px solid #e5e7eb; padding-top: 24px">
|
|
105
|
+
<h2 style="font-size: 20px; font-weight: 600; color: #111827; margin: 0 0 16px 0">Quick Setup</h2>
|
|
106
|
+
<div style="display: flex; flex-direction: column; gap: 16px; color: #374151">
|
|
107
|
+
<div>
|
|
108
|
+
<h3 style="font-weight: 600; margin: 0 0 8px 0; font-size: 16px">1. Install the package</h3>
|
|
109
|
+
<code
|
|
110
|
+
style="
|
|
111
|
+
display: block;
|
|
112
|
+
background: #f3f4f6;
|
|
113
|
+
border-radius: 8px;
|
|
114
|
+
padding: 12px;
|
|
115
|
+
font-size: 14px;
|
|
116
|
+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
117
|
+
overflow-x: auto;
|
|
118
|
+
"
|
|
119
|
+
>
|
|
120
|
+
npm install @getcredify/credify-insurance-widget
|
|
121
|
+
</code>
|
|
122
|
+
</div>
|
|
123
|
+
<div>
|
|
124
|
+
<h3 style="font-weight: 600; margin: 0 0 8px 0; font-size: 16px">2. Import, initialize, and open</h3>
|
|
125
|
+
<pre
|
|
126
|
+
style="
|
|
127
|
+
display: block;
|
|
128
|
+
background: #f3f4f6;
|
|
129
|
+
border-radius: 8px;
|
|
130
|
+
padding: 12px;
|
|
131
|
+
font-size: 14px;
|
|
132
|
+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
133
|
+
overflow-x: auto;
|
|
134
|
+
margin: 0;
|
|
135
|
+
"
|
|
136
|
+
><code>import { CredifyInsuranceWidget } from '@getcredify/credify-insurance-widget';
|
|
137
|
+
import '@getcredify/credify-insurance-widget/widget.css';
|
|
138
|
+
|
|
139
|
+
CredifyInsuranceWidget.init({ autoOpen: false });
|
|
140
|
+
CredifyInsuranceWidget.open();</code></pre>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<div style="margin-top: 24px; padding-top: 24px; border-top: 1px solid #e5e7eb">
|
|
145
|
+
<a
|
|
146
|
+
href="https://www.npmjs.com/package/@getcredify/credify-insurance-widget"
|
|
147
|
+
target="_blank"
|
|
148
|
+
rel="noopener noreferrer"
|
|
149
|
+
style="display: inline-flex; align-items: center; color: #2563eb; font-weight: 600; text-decoration: none; transition: color 0.2s"
|
|
150
|
+
onmouseover="this.style.color='#1d4ed8'"
|
|
151
|
+
onmouseout="this.style.color='#2563eb'"
|
|
152
|
+
>
|
|
153
|
+
View on npm →
|
|
154
|
+
</a>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
<button id="open-widget-btn" class="quote-btn">Open Quote Widget</button>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<script>
|
|
163
|
+
function initWidget() {
|
|
164
|
+
// Wait for the widget to be available
|
|
165
|
+
if (typeof window.CredifyInsuranceWidget === 'undefined') {
|
|
166
|
+
console.warn('Widget not loaded yet. Will retry...');
|
|
167
|
+
return false;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
if (typeof window.CredifyInsuranceWidget.init !== 'function') {
|
|
171
|
+
console.error('Widget API not available. CredifyInsuranceWidget:', window.CredifyInsuranceWidget);
|
|
172
|
+
return false;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
try {
|
|
176
|
+
// Initialize the widget (don't auto-open)
|
|
177
|
+
window.CredifyInsuranceWidget.init({ open: false });
|
|
178
|
+
console.log('Widget initialized successfully');
|
|
179
|
+
|
|
180
|
+
const openBtn = document.getElementById('open-widget-btn');
|
|
181
|
+
|
|
182
|
+
// Open the widget when button is clicked
|
|
183
|
+
openBtn.addEventListener('click', () => {
|
|
184
|
+
window.CredifyInsuranceWidget.open();
|
|
185
|
+
});
|
|
186
|
+
|
|
187
|
+
return true;
|
|
188
|
+
} catch (error) {
|
|
189
|
+
console.error('Error initializing widget:', error);
|
|
190
|
+
return false;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
// Listen for widget script load event (primary method)
|
|
195
|
+
window.addEventListener('widget-loaded', () => {
|
|
196
|
+
// Wait a bit for the widget to fully initialize
|
|
197
|
+
setTimeout(() => {
|
|
198
|
+
if (initWidget()) {
|
|
199
|
+
console.log('Widget initialized via widget-loaded event');
|
|
200
|
+
}
|
|
201
|
+
}, 200);
|
|
202
|
+
});
|
|
203
|
+
|
|
204
|
+
// Poll for widget availability (fallback)
|
|
205
|
+
let attempts = 0;
|
|
206
|
+
const maxAttempts = 100; // 10 seconds max
|
|
207
|
+
const checkWidget = setInterval(() => {
|
|
208
|
+
attempts++;
|
|
209
|
+
if (initWidget()) {
|
|
210
|
+
clearInterval(checkWidget);
|
|
211
|
+
console.log('Widget initialized via polling');
|
|
212
|
+
} else if (attempts >= maxAttempts) {
|
|
213
|
+
clearInterval(checkWidget);
|
|
214
|
+
console.error('Widget failed to load after 10 seconds.');
|
|
215
|
+
console.error('React available:', typeof window.React);
|
|
216
|
+
console.error('ReactDOM available:', typeof window.ReactDOM);
|
|
217
|
+
console.error('Widget available:', typeof window.CredifyInsuranceWidget);
|
|
218
|
+
}
|
|
219
|
+
}, 100);
|
|
220
|
+
</script>
|
|
221
|
+
</body>
|
|
222
|
+
</html>
|