Skip to content

Commit 7931ab4

Browse files
committed
fixed formatting
ded
1 parent 656dc3a commit 7931ab4

File tree

1 file changed

+61
-33
lines changed

1 file changed

+61
-33
lines changed

test-widget-embed.html

Lines changed: 61 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,69 @@
11
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>VapiWidget Embed Test</title>
7+
</head>
38

4-
<head>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>VapiWidget Embed Test</title>
8-
</head>
9+
<body>
10+
<h1>VapiWidget Embed Test</h1>
11+
<p>This page tests embedding the VapiWidget using static HTML.</p>
912

10-
<body>
11-
<h1>VapiWidget Embed Test</h1>
12-
<p>This page tests embedding the VapiWidget using static HTML.</p>
13+
<!-- Example 1: Using data attributes -->
14+
<div
15+
id="vapi-widget-1"
16+
data-client-widget="VapiWidget"
17+
data-public-key="your-public-key-here"
18+
data-assistant-id="your-assistant-id-here"
19+
data-mode="voice"
20+
data-theme="light"
21+
data-position="bottom-right"
22+
data-size="compact"
23+
data-main-label="Talk with AI"
24+
data-start-button-text="Start"
25+
data-end-button-text="End Call"
26+
></div>
1327

14-
<!-- Example 1: Using data attributes -->
15-
<div id="vapi-widget-1" data-client-widget="VapiWidget" data-public-key="your-public-key-here"
16-
data-assistant-id="your-assistant-id-here" data-mode="voice" data-theme="light" data-position="bottom-right"
17-
data-size="compact" data-main-label="Talk with AI" data-start-button-text="Start" data-end-button-text="End Call">
18-
</div>
28+
<!-- Example 2: Using data-props JSON -->
29+
<div
30+
id="vapi-widget-2"
31+
data-client-widget="VapiWidget"
32+
data-props='{"publicKey":"your-public-key-here","assistantId":"your-assistant-id-here","mode":"chat","theme":"dark","position":"bottom-left"}'
33+
></div>
1934

20-
<!-- Example 2: Using data-props JSON -->
21-
<div id="vapi-widget-2" data-client-widget="VapiWidget"
22-
data-props='{"publicKey":"your-public-key-here","assistantId":"your-assistant-id-here","mode":"chat","theme":"dark","position":"bottom-left"}'>
23-
</div>
35+
<!-- Example 3: Using <vapi-widget> custom element -->
36+
<vapi-widget
37+
mode="voice"
38+
theme="light"
39+
base-color="#ffffff"
40+
accent-color="#14B8A6"
41+
button-base-color="#000000"
42+
button-accent-color="#ffffff"
43+
radius="large"
44+
size="full"
45+
position="top-right"
46+
main-label="TALK WITH AI"
47+
start-button-text="Start"
48+
end-button-text="End Call"
49+
require-consent="true"
50+
local-storage-key="vapi_widget_consent"
51+
show-transcript="true"
52+
public-key="your-public-key-here"
53+
assistant-id="your-assistant-id-here"
54+
></vapi-widget>
2455

25-
<!-- Example 3: Using <vapi-widget> custom element -->
26-
<vapi-widget mode="voice" theme="light" base-color="#ffffff" accent-color="#14B8A6" button-base-color="#000000"
27-
button-accent-color="#ffffff" radius="large" size="full" position="top-right" main-label="TALK WITH AI"
28-
start-button-text="Start" end-button-text="End Call" require-consent="true" local-storage-key="vapi_widget_consent"
29-
show-transcript="true" public-key="your-public-key-here" assistant-id="your-assistant-id-here"></vapi-widget>
56+
<script
57+
src="./dist/embed/widget.umd.js"
58+
async
59+
type="text/javascript"
60+
></script>
3061

31-
<script src="./dist/embed/widget.umd.js" async type="text/javascript"></script>
32-
33-
<!-- Optional: Manual initialization example -->
34-
<script>
35-
// The widget should auto-initialize from data attributes
36-
// But you can also manually initialize if needed:
37-
/*
62+
<!-- Optional: Manual initialization example -->
63+
<script>
64+
// The widget should auto-initialize from data attributes
65+
// But you can also manually initialize if needed:
66+
/*
3867
window.addEventListener('DOMContentLoaded', function() {
3968
if (window.WidgetLoader) {
4069
new window.WidgetLoader({
@@ -51,7 +80,6 @@ <h1>VapiWidget Embed Test</h1>
5180
}
5281
});
5382
*/
54-
</script>
55-
</body>
56-
57-
</html>
83+
</script>
84+
</body>
85+
</html>

0 commit comments

Comments
 (0)